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:10px 5px 5px 10px}

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

What do you want to learn about next?

How do I improve an app's user interface?

How should I host and service static content files?

How do I use JavaScript with my Python web application?

Sign up for two emails per month with Python tutorials and Full Stack Python updates.

Sponsored By

Rollbar logo

Fix errors in your Python code before your users see them by monitoring with Rollbar.


Mapbox logo.

Easily build maps, search and navigation into your Python applications with Mapbox.


Real Python logo

Upgrade your Python skills by reading Real Python's awesome programming email newsletter.

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 newsletter, Twitter & Facebook.
1. IntroductionLearning ProgrammingCore LanguageWhy Use Python?Python 2 or 3?Enterprise PythonPython CommunityCompanies using PythonBest Python ResourcesBest Python VideosBest Python Podcasts2. Development EnvironmentsText Editors & IDEsVimEmacsSublime TextPyCharmJupyter NotebookShellsBash shellZshPowerShellTerminal MultiplexerstmuxScreenPymuxEnvironment configurationApplication DependenciesVirtualenvsEnvironment variablesLocalhost tunnelsSource ControlGitMercurialApache SubversionHosted Source ControlGitHubBitBucketGitLab3. DataRelational DatabasesPostgreSQLMySQLSQLiteObject-relational MappersSQLAlchemyPeeweeDjango ORMSQLObjectPony ORMNoSQL Data StoresRedisMongoDBApache CassandraNeo4jData analysispandasNumPySciPyBokehd3.jsMatplotlibMarkdown4. Web DevelopmentWeb FrameworksDjangoFlaskBottlePyramidFalconMorepathSanicOther Web FrameworksTemplate EnginesJinja2MakoDjango TemplatesWeb DesignHTMLCascading Style Sheets (CSS)Responsive DesignMinificationCSS FrameworksBootstrapFoundationJavaScriptTask QueuesCeleryRedis Queue (RQ)DramatiqStatic Site GeneratorsPelicanLektorMkDocsTestingUnit TestingIntegration TestingCode MetricsDebuggingWebSocketsuvloopWeb APIsMicroservicesBotsAPI CreationAPI IntegrationTwilioSecurity5. DeploymentServersStatic ContentVirtual Private ServersPlatform-as-a-ServiceOperating SystemsUbuntuWeb ServersApache HTTP ServerNginxCaddyWSGI ServersGreen Unicorn (Gunicorn)Continuous IntegrationJenkinsConfiguration ManagementAnsibleDockerServerlessAWS LambdaGoogle Cloud Functions6. DevOpsMonitoringRollbarCachingLoggingWeb AnalyticsChange LogWhat Full Stack MeansAbout the AuthorFuture DirectionsPage Statuses ...or view all topics.

Matt Makai 2012-2018