Top 10 web performance killers

Sam HoltJavascript, Web Development6 Comments

Top 10 web performance killers

1. Uncompressed static assets on the server

Gzip will reduce your file transfer speed from your server to the browser – one of the biggest web performance killers.

When a user hits your website, a call is made to your server to deliver the requested files. The bigger these files are, the longer it takes for them to get to your browser and appear on the screen.

Gzip compresses your web pages and stylesheets before sending them over to the browser. Compression drastically reduces transfer time since the files are much smaller (up to 70% file size reduction).

Regarding cost versus benefit, Gzip compression should be near the top of your page speed optimizations if you don’t have it setup already.

2. Uncompressed CSS and JavaScript

Minification will reduce the size of a CSS or JavaScript file and removes all unnecessary characters from code while maintaining its functionality.

Minifying CSS and JavaScript:

  • Removes whitespace, comment, and unused code
  • Optimizes conditional expressions
  • Shortens variable and function names
  • Obfuscates production code

Minification also reduces network latency (the time it takes for data packets to get from one point to another), leading to faster browser load times.

To minify stylesheets, try CSSNano and csso. CSSNano can be integrated into your workflow as a plugin for postcss.

To minify JavaScript, try UglifyJS2. You can also utilize UglifyJS in your workflow through the Grunt plugin, or Gulp plugins like gulp-uglify or gulp-source maps.

3. Non-optimized images

Images on a page can be optimized to reduce their file size without impacting the quality. (We do a deep dive into this here.)

A large number of websites use images, and images usually account for most of the downloaded data on a page. Optimizing images is one of the easiest ways to increase page performance.

Ways to optimize images:

  • Lossless compression
  • Convert images into web-appropriate file types
  • Remove some of the image data without compromising the quality
  • Reduce the white space around images
  • Save images in appropriate dimensions

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, 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.

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 in 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 the unnecessary processing.

Invalid CSS can slow down the rendering time of a page.

Run your HTML through the W3C HTML Validator and CSS through the W3C CSS validator.

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

7. Old-school tech

Avoid using old 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 utilize them.

Plugins are legacy technology. Create content using native web technologies to ensure compatibility with 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 (which can be one of the worst web performance killers) async scripts will download 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:
The above script tag will prevent the script from blocking following 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:

Then restart your Apache server.

In nginx:

Add the charset to the server block:

Then reload nginx config.

In IIS:

Open IIS > MIME types.

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

Change the HTML MIME type in IIS

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

A slow server 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.

That’s it for the top 10 web performance killers

Do you have any more? Let us know in the comments below.

Next level software intelligence across your entire stack.

6 Comments on “Top 10 web performance killers”

  1. Michael Smale

    This is really interesting stuff. Many things that have been around a while, and some newer things like async on script includes, and character set web server settings. Very nice post and tips much appreciated.

    1. Freyja Spaven

      Thanks Cogo, let us know any questions that you have as you implement – we’d be happy to help 🙂

  2. Pingback: Java performance optimization tips: writing high-performance Java code

  3. Pingback: Are high asset loading times killing your website performance? Here are the critical asset load paths you need to know

Leave a Reply

Your email address will not be published. Required fields are marked *