4. Not Leveraging Browser Caching

Caching reduces the load time of web pages for repeat visitors by storing files on a user’s browser. Stored files do not need to be fetched or loaded again for a specified period.

When users first visit a site, resources are fetched over the network and may require multiple trips between the client and server. Caching stores commonly used files, making subsequent site visits faster. To enable browser caching, add the Cache-Control and ETag (entity tag) headers to HTTP response headers. Cache-Control defines how, and the period of time, a response can be cached by the browser and other caches. ETag provides a validation token, used to communicate with the server, to check if a resource needs to be updated. Learn more about leveraging browser caching.

5. Too Many Redirects

A redirect requires an additional HTTP request-response cycle and delays the page load.

Remove unnecessary redirects, especially if they are on a home or landing page.

6. Invalid HTML and CSS

Writing HTML and CSS which complies with the W3C standards means that it will be interpreted consistently by modern browsers.

Invalid HTML can slow down page load as the browser has to do unnecessary processing.

Alternatively, you can incorporate HTML validation into your workflow with the Grunt HTML validation package and Stylelint.

7. Old-School Tech

Avoid using obsolete technologies like Flash, Java, and Silverlight in the browser.

Most mobile devices do not support plugins, such as Flash. Plugins are also the leading cause of crashes and security incidents on pages that utilise them.

Plugins are legacy technology. Content should be created using native web technologies—this ensures that content can be accessed by all devices and browsers.

8. Not Leveraging HTML Features

There are a few simple HTML5 features which can help to improve performance:

Add async tag to scripts

Instead of waiting for a script to finish downloading before the page renders, async scripts are downloaded in the background. This means the browser can continue rendering HTML that comes after the asynchronous script tags.

To make a script in the <head> of a document asynchronous, just add ‘async’ to the script tag:

<script src="async-example.js" <strong>async</strong>></script>

This will prevent the script from blocking subsequent scripts and page assets, meaning a faster load speed.

Avoid setting charset in metatag

Specifying the charset in the meta tag disables the lookahead downloader in IE8. Disabling the lookahead downloader can increase the page load time.

Setting a charset in the HTTP Content-Type response header in HTML files allows the browser to start loading HTML and scripts immediately. This method also sets the charset for every page.

Here’s how to configure the default charset in the popular servers:

In Apache:

Add the following line to your .htaccess file in the root directory:

AddDefaultCharset UTF-8

Then restart your Apache server.

In nginx:

Add the charset to the server block:

server {
# ... other server config...
charset utf-8;
}

Then reload nginx config.

In IIS:

Open IIS > MIME types.

Set the .html MIME type to text/html; charset=UTF-8:

Then restart your website.

9. Synchronous JavaScript Blocking the Page Load

Add <script> tags just before the closing </body> tag to make sure they don’t block parallel downloads.

10. Slow Server Response

This is the most complex performance killer, and unfortunately there’s no easy fix for this!

All you can do is identify and fix bugs in your server-side code—the faster the server response time, the faster your website or application will be.