23 captures

29 Sep 2017 - 17 Dec 2025

Apr	MAY	Jun
	23
2021	2022	2023

success

fail

About this capture

COLLECTED BY

Collection: Common Crawl

Web crawl data from Common Crawl.

TIMESTAMPS

Minification

Minification is the process of reducing the size of static content assets that need to be transferred from a web server to the web browser client. The goal of minification is to make webpages and web applications load faster, without changing how the assets are ultimately used after being downloaded. Cascading Style Sheet (CSS) files, JavaScript and even HTML can be minified. The techniques to minify an HTML file differ from a CSS file because the file's contents and syntax are different.

CSS Minification example

Let's say your web application has a CSS file with the following four lines to add some padding around every element with the pad-me class:

.pad-me { padding-top: 10px;
          padding-right: 5px;
          padding-left: 5px;
          padding-bottom: 10px; }

That example has 122 characters. A CSS minifier would take the above four lines and convert them to the following single line:

.pad-me{padding:10px5px5px10px}

The result would have only a single line with 35 characters, that's 87 less characters that would need to be sent from the web server to the web browser! The minification process reduced the single CSS class by 71% but kept the exact same result when the web browser applies pad-me to all elements with that class. The file size savings can be a major benefit when applied across hundreds or thousands of lines in a typical CSS file. When you also multiply that savings across every client that downloads the CSS from your web server or CDN it becomes clear that minification is a powerful way to improve the efficiency of your production web application.

CSS minification resources

●CSS minifier is an online form to copy and paste CSS then retrieve the minified results on the same page.

JavaScript minification resources

●JavaScript minifier is similar to the above CSS minifier but works with JavaScript syntax.

What do you want to learn about next?

How do I improve an app's user interface? How should I host and serve static content files? How do I use JavaScript with my Python web application?

1. Introduction 2. Development Environments 3. Data 4. Web Development Web Frameworks Django Flask Bottle Pyramid TurboGears Falcon Morepath Sanic Other Web Frameworks Template Engines Jinja2 Mako Django Templates Web Design HTML Cascading Style Sheets (CSS) Responsive Design Minification CSS Frameworks Bootstrap Foundation JavaScript React Vue.js Angular Task Queues Celery Redis Queue (RQ) Dramatiq Static Site Generators Pelican Lektor MkDocs Testing Unit Testing Integration Testing Debugging Code Metrics Networking HTTPS WebSockets WebRTC Web APIs Microservices Webhooks Bots API Creation API Frameworks Django REST Framework API Integration Twilio Stripe Slack Okta Security SQL Injection CSRF 5. Deployment 6. DevOps Changelog What Full Stack Means About the Author Future Directions Page Statuses ...or view the full table of contents.

Full Stack Python

Full Stack Python is an open book that explains concepts in plain language and provides helpful resources for those topics.

Updates via Twitter & Facebook.

Chapters

1. Introduction 2. Development Environments 3. Data 4. Web Development » Minification 5. Deployment 6. DevOps Changelog What Full Stack Means About the Author Future Directions Page Statuses ...or view the full table of contents.

Matt Makai 2012-2022