Minimize Page Weight

Page Speed Checklist

When Less Is More

Minimize both the quantity and size of file resources to keep pages loading as quickly and efficiently as possible.

Lean = Fast

The fastest loading files are the files that don't load at all.

Before putting any individual page speed techniques and strategies into practice, it's a good idea to carefully review any included resources and make some shrewd decisions about what should and shouldn't be included.

This is often best done by taking a close look at each content element, feature and included resource and asking yourself, "Is this good for the user?"

Omit Unnecessary Features

Underused or superfluous features, plugins and other files can be good candidates for removal or adjustment. For example, while banner-style image rotators can seem like a good idea, if most users scroll past before seeing more than one or two slides, it may not be worth the extra resources. Instead, a single static image with a clear, focused headline may deliver a stronger and more effective message, with less page weight.

Remove Excessive Fonts

Custom fonts can also be a good source of page weight reduction and even an opportunity to refine the design. Custom font systems like Google Fonts make it easy to add stylish and eye-catching text styles and it can be tempting to use them too liberally - at the expense of both tasteful design and page speed. For most applications, 4-6 custom font variants yields a good balance of design style and page speed.

For the best results, use every strategy to reduce custom web fonts:

Optimize Fonts

Lightweight Alternatives

Finding lighter weight alternatives to achieve the same result is a simple way to reduce page weight without sacrificing features. For example, updating from an unnecessarily-robust CSS reset to a minimal CSS reset helps to reduce render blocking code overhead for faster initial page loading.

Minimal CSS Reset

For the resources that remain after a prudent spring cleaning, the strategies below will help limit or fully eliminate the render blocking impact during the loading process.

Clean House

An easy way to start trimming down page weight is to remove old, out of date, unused or unnecessary code and other resources. This could mean entire files, but it may also include sections of code within files. It can also mean files that are used on some pages but not on others, so in some cases removing files on a page-by-page basis can have a worthwhile impact.

Old or unused JavaScript plugins are often good candidates for removal, particularly as doing so may coincide with simplifying content to find a more effective overall balance with loading speed. For example, replacing an animated image slideshow with a single static image and strong core message usually means any JavaScript file(s) related to the slideshow functionality can be removed.

Templates & Frameworks

Clearing out unused files and code can be particularly effective for websites that use a template like a WordPress theme or a front end framework like Bootstrap. Websites built on these systems often only use a portion of the available modules, features and options, so removing unused code can go a long way to reduce file sizes.

Minify Code

HTML, CSS and JavaScript code are often formatted in a way that makes it easy to compose and edit, with indentation, line breaks, spaces and comments. While that formatting is useful for people to maximize legibility, computers and web browsers don't benefit from the extra spacing and removing it reduces file size.

Here's a snippet of CSS with comments and indentation to make the code easy to understand and edit:

/*--- product listing <ul> -----------------------*/
.product-listing {padding:1em;border:2px solid #ccc}
    product-listing li {margin:0 0 1em}
        product-listing a {display:block;color:#333}

            /*--- image ---*/
            .product-listing img {margin:0 auto 1em}

            /*--- product title ---*/
            .product-listing h2 {font-size:1.2em;margin:0 0 .5em;transition:color .2s}
                product-listing a:hover h2, product-listing a:focus h2 {color:#336f20}

            /*--- description ---*/
            .product-listing p {font-size:.8em}

            /*--- price ---*/
            .product-listing div {font-weight:bold;color:#336f20}

The minified version removes any unnecessary space:

.product-listing{padding:1em;border:2px solid #ccc}.product-listing li{margin:0 0 1em}.product-listing a{display:block;color:#333}.product-listing img{margin:0 auto 1em}.product-listing h2{font-size:1.2em;margin:0 0 .5em;transition:color .2s}product-listing a:hover h2,product-listing a:focus h2{color:#336f20}.product-listing p{font-size:.7em}.product-listing div{font-weight:bold;color:#336f20}

Each of these code snippets have the same meaning and produce the same result in the web browser, but the minified version produces a smaller file. Applying this effect over hundreds or thousands of lines of code can yield significantly smaller files.

Note that reducing file size by minifying code content is different from HTTP file compression which is applied by the web server before files are transferred or image compression which is applied as a part of image optimization.

Consolidate Files

Combining the content of many small CSS or JavaScript files into fewer larger files yields more efficient HTTP compression, further reducing the quantity of data that has to be transferred to the user's web browser. (Some image files can be combined into image sprites for a similar benefit.)

Files should be consolidated in a way that makes sense for the context, striking a balance between fewer, larger files and only loading resources that are used on a given page. For example, CSS styles for elements common to all pages like the header, footer and navigation could be combined into one file, while keeping styles for pages types like blog posts or product pages in separate files and only loaded where needed.

To Combine Or Not To Combine?

Given the limitations in the way web servers and web browsers interact, best practice has long maintained that files should be consolidated as much as possible to minimize the impact of network latency by reducing individual requests from the web server. The growing adoption of HTTP/2 and its ability to load many files simultaneously (rather than one or a few at a time) effectively eliminates that practice as a goal in itself.

It still raises a question about the potential trade off between efficient caching of more numerous smaller files and better server compression of fewer larger files.

The consensus is that while HTTP/2 reduces the importance of minimizing server requests, logically combining files remains beneficial. Particularly for infrequently modified resources like CSS and JavaScript, the real-world benefit of reasonable file consolidation typically outweighs the potential costs.

In short, consolidate files logically and to a reasonable extent, combining related files by how and where they're used.

Optimize Fonts

Don't forget about fonts. Often overlooked, custom web fonts can add up quickly to slow down page speed. Optimizing fonts is an important step to reduce page weight and can also help refine typography and design.

Optimize Fonts