1. Uncompressed static assets on the server
The file transfer speed from your server to the browser can be reduced through Gzip.
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. This drastically reduces transfer time since the files are much smaller (up to 70% file size reduction).
In terms of cost versus benefit, Gzip compression should be near the top of your page speed optimizations if you don’t have it setup already.
Minification is the process of removing all unnecessary characters from code while maintaining its functionality.
- Removes whitespace
- Removes comment
- Removes 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.
3. Non-optimized images
Images on a page can be optimized to reduce their file size without impacting the quality.
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 whitespace around images
- Save images in appropriate dimensions
4. Not leveraging browser caching
5. Too many redirects
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.
Invalid CSS can slow down the rendering time of a page.
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
<script src="async-example.js" async></script>
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:
Add the following line to your .htaccess file in the root directory:
Then restart your Apache server.
Add the charset to the server block:
# ... other server config...
Then reload nginx config.
Open IIS > MIME types.
Set the .html MIME type to text/html; charset=UTF-8:
Then restart your website.
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.