Minimize Page Weight

When Less Is More

One of the most fundamental strategies for optimizing website load time is to minimize the quantity of data that has to be downloaded by the user's web browser. Minimizing both the number and size of file resources will keep pages loading as quickly and efficiently as possible.

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, computers and web browsers don't benefit from the extra spacing and removing it reduces file size.

Here's a snippet of CSS code with comments and formatting for legibility:

CSS
/*--- 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}

And the 'minified' version:

CSS
.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 line 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 consolidated 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.

Advanced Tip

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 consolidating 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

A great website design strengthens the impact of it's message and unique, stylish fonts can add a valuable layer of visual interest. Largely due to simplified methods for adding fonts to websites, custom fonts have become very common across the web and it can be tempting to use fonts too liberally.

Best In Moderation

Custom fonts can be a great design enhancement, but with the benefit comes the performance trade off and potential load time pitfalls. Until variable fonts become more standard, each additional font or font style means an additional file, so shrewd choices about which fonts really make an impact and which can be omitted will reduce page weight - usually with little to no negative effect on overall user experience.

Although the size of the needed files varies between fonts, a good rule is to use one font for headings and one for regular paragraph text, with a sensible limit of four or five total font variants. For example, one font for (1) general paragraph text plus (2) bold and (3) italic styles, with another font for (4) headings and other distinctive text elements.

Mobile Devices

As an optional strategy to further reduce the number of fonts loaded on mobile devices, custom fonts can be limited to larger screens (or other conditions) with CSS media queries. Web browsers won't load font files that don't apply to a given device, conserving that page weight.

CSS
/*--- special heading font on large screens ---*/
@media (min-width:1000px) {
    h1 {font-family:'Special Font'}
}

System Fonts

With custom fonts so commonplace, it's easy to forget that they don't have to be used at all. They can also be used selectively, like a special custom font for headings but a common system font for general paragraph text.

Sometimes called web safe fonts, system fonts are already a part of the user's device software and ready to use without downloading. A list of fonts can be specified in the CSS code - often called a font stack - that the browser will use depending on what fonts are available on a given device.

Font Services

While approapriately-licensed font files can be self hosted, web font services leverage the power of CDNs and include options like custom character sets. Google Fonts is the most widely used, but there are other similar services.

One of the benefits of third-party web font services is that the font files may have already been downloaded by the user's browser during a visit to another website. The browser saves those files and uses them on other websites without downloading them again.

Font services also offer the option to load only the specific characters needed, rather than the full font file. This is a clever way to save page weight when only a few specific characters, words or phrases of a special font are needed.

Fonts from web font services are most commonly added to a website with a <link> reference in the HTML. (An @import rule in CSS works as well, but generally results in poorer performance for third-party fonts.) Here's an example of loading two variants of a font called Roboto from Google Fonts:

HTML
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
Advanced Tip

The web font loader is a great option for finer control over custom font loading. Co-developed by Google and Typekit, the font loader offers the option for asynchronous loading as well as advanced configuration like CSS and JavaScript callbacks to manage how fonts are displayed through the loading process.


Up next:

Optimize Images