Web Performance Optimisation Tools & Best Practices

Slow-loading websites are not a good thing no matter what direction in the bandwidth stream you’re going. While there are quite a few decent methods and web performance tools one can use to speed up a site’s load time, here in this post we share web performance practices that have been proven to increase performance in real-world projects, substantially improving page load times.

Web performance best practices

Images, CSS, JavaScript

The “performance golden rule” stands that 80-90% of end-user response time is spent downloading all page components: images, stylesheets, scripts, etc. Thus, by optimizing site content, we can achieve a huge reduction in page load times.

1. How to minimize the amount of server-to-browser data

By reducing the number of components themselves — images, stylesheets, scripts, etc. — we reduce the number of HTTP requests required to render the page, effectively improving site performance for first-time visitors. To achieve this, one can:

Compress & optimize images

Leaving Photoshop tricks to designers, here we’re covering CSS sprites and image maps, and also combining inline images into stylesheets.

CSS sprites. Since images greatly increase page load time, keep their use to the minimum necessary. Use CSS instead: combine all images into segments of a single CSS background image and use background-position properties to display the desired segment.

How to optimize CSS sprites:

• Arrange images in sprites horizontally, not vertically (for smaller file size).
• Combine similar colors in a sprite (to lower the color count).
• Be mobile-friendly: use minimal gaps between images in a sprite (requires less memory for decompression).

In the following example the element shows two different images depending on the mouse cursor position: over the element / off the element; both images are stored in one file.

img.example { 
width:100px; 
height:100px; 
background:url(picture.gif) 0px 0px; 
} 
img.example:hover { 
background: url(picture.gif) 0px 100px; 
}

Image maps. This method implies combining multiple images into a single image and only works if the images are contiguous on the page, i.e., in a navigation bar (otherwise, defining the coordinates of image maps can be a tedious and error-prone process). We don’t recommend to use image maps for navigation.

A simple image map example with one image and several clickable areas.

<img src="images/map.png" width="1200" height="320" usemap="#map"> 
<map name="map"> 
<area shape="polygon" coords="20,20,106,20,106,106,20,106" href="http://www.azoft.com" id="box" /> 
<area shape="polygon" coords="216,50,339,50,277,156" href="http://www.azoft.com" id="triangle" /> 
<area shape="polygon" coords="460,0,574,0,460,220" href="http://www.cnn.com" id="bordertriangle" /> 
<area shape="polygon" coords="704,65,769,115,744,196,665,196,640,115" href="http://www.azoft.com" id="pentagon" /> 
</map>

Combining inline images into CSS. Inline images use the data: URL scheme to embed image data in pages, which can increase the size of an HTML document. Instead, inline images can be combined into (cached) stylesheets. Granted, inline images are not supported across all major browsers, so this solution may or may not be available to you.

Optimize CSS & JavaScript

Make JavaScript & CSS external. If users on your site generally view several pages per session and many of your pages re-use the same scripts and stylesheets, you can benefit from making them external: because external files are cached by the browser. Moreover, you can inline JavaScript and CSS in the home or landing page, in addition to external files that would potentially be downloaded after the home page has finished loading. Under this scenario, the entire site will load faster: the home page uses the inline JavaScript, CSS and the subsequent pages (those external files that are already cached in the browser).

Minify JavaScript & CSS. You can also consider combining scripts or stylesheets into one file that is minified. Minification is the practice of removing unnecessary characters from code to reduce size.

In order to achieve advanced optimization and high compression, the original JavaScript or CSS is compiled into compact, high-performance code, that a developer can’t understand, although the script logic remains unchanged.

When the code is minified all comments and unneeded white space characters (space, newline, and tab) are removed. In addition to minifying external scripts and styles, inline <script> and <style> blocks should also be minified.

Two popular tools for minifying JavaScript code are JSMin and YUI Compressor. The YUI Compressor can also minify CSS.

Note: Minification is a double-edged sword, as it makes debugging much harder.

Use Gzip

Compression reduces response times by reducing the size of the HTTP response. Gzip is currently the most popular and effective compression method. The only other compression format available is deflate, but it’s less effective and less popular.

Here is an example of enabling compression in Apache; code for the .htaccess file:

<ifModule mod_gzip.c> 
mod_gzip_on Yes 
mod_gzip_dechunk Yes 
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$ 
mod_gzip_item_include handler ^cgi-script$ 
mod_gzip_item_include mime ^text/.* 
mod_gzip_item_include mime ^application/x-javascript.* 
mod_gzip_item_exclude mime ^image/.* 
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.* 
</ifModule>

Note: Even after you gzip your scripts and styles, minifying them will still further reduce their size by 5% or more.

Note: If you use Apache, the module configuring gzip depends on the version: Apache 1.3 uses mod_gzip; Apache 2.x uses mod_deflate.

2. How to optimize server-to-browser data

Here’s what we recommend:

• Resolve all JavaScript and 404 errors as evidently they cause long delays and frequent browser crashes.
• Use efficient CSS selectors and by “efficient” I mean selectors that don’t need to search the entire DOM object.
• Remove any unnecessary markup.
• Avoid CSS expressions; they were supported in Internet Explorer starting with version 5 but were abandoned after IE7.
• Place CSS declarations in the document header.
• Position scripts at the bottom. Where it’s difficult to move scripts to the bottom, use deferred scripts.

Note: Unfortunately, Firefox doesn’t support the DEFER attribute, and in IE the script may be deferred, but not to the extent desired.

3. Let the browser cache resources for you

Browser caching demands no network resources, significantly reducing the number of requests from your server.

4. How to implement server-side data caching

Remember, you can choose which particular elements of a page you want to be cached on the server. We recommend caching:

• headers and footers (as they are rarely changed)
• dynamic HTML content delivered from a database
• the heaviest requested areas of your site
• the entire HTML before sending to a browser; for example, for WordPress the following plugins will help:
  https://wordpress.org/plugins/wp-super-cache/
  https://wordpress.org/plugins/w3-total-cache/

Two more tips: 1) Use Memcached for requests and other data and; 2) Because many frameworks support server-side caching, check the conf files for this option and customize it.

5. How to reduce DNS lookups

As you probably know, when a DNS looks up an IP address for a hostname, this hostname is not available for a browser. Typically, the number of DNS lookups is equal to the number of unique hostnames in a page: the hostnames used in the page URL, images, stylesheet and script files, etc. When you reduce the number of unique hostnames, you reduce the number of DNS lookups.

Yet, again, it’s a double-edged sword: when one reduces the number of unique hostnames, this potentially reduces the amount of parallel downloading of the page. So even though reducing DNS lookups helps to improve response times, reducing parallel downloads will increase them…

What to do? Strike a compromise. Divide the page components –  images, stylesheets and script files, etc. — across at least two, but no more than four hostnames for best results.

6. Why use Nginx instead of Apache

Why? For scaling and performance reasons. Generally, NGinx is more flexible and up to date. Plus, it offers outstanding proxy customization for various requests. The customization allows for the use of different algorithms for individual site components, e.g. to send directly if the component is an image, and to delegate to Apache if NGinx+Apache bundle is used, or to use Nginx if it’s a PHP script. If one uses NGinx without Apache, it’s possible to process PHP as fast and effective FastCGI (NGINX FPM) — which speeds script processing and is a more efficient solution overall. You can read more about it.

7. Consider NoSQL solutions

There is a wide range of new NoSQL solutions such as MongoDB, RedisDB and CouchDB that can be used more efficiently than ordinary SQL ones. However, of course, there is no universal answer to which one to choose: it all depends on the project’s particular requirements.

8. Use ready-made search engines

For convenient, flexible search within a large array of structured data, there are fast and effective ready-made solutions available. Search engines like ElasticSearch allow for the indexing of huge arrays of data, feature flexible search within the created index, and support sharding and the creation of clusters for indexes on several computers. Using ElasticSearch, it’s most effective to follow the “read from a cluster, write to master” scheme, which can, of course, be applied when working with other databases as well.