How to improve your page load speed for client-side & server-side

Tags: , , &

error-tracking-3-by-zing-design

Speedy page loads are integral to the success of a website. It’s a simple equation, the longer visitors have to wait for content to load, the less likely they are to stick around. Here are some improvements that you can make on the client-side and the server-side to decrease page loading time.

An important fact to keep in mind is that not everybody viewing your site has ultra-fast broadband. We recommend using a connection simulator like Slowy or Charles to get a more realistic view of what your target audience will experience.

Client-side

Beginner

There are a few simple improvements which you can make on the client-side to see a noticeable difference to loading times. These include:

  • Lossless compression of image assets – using a tool like ImageOptim or TinyPNG
  • Compression and concatenation of JS and CSS files – this can be done on-the-fly with Grunt.
  • Load scripts just before the closing </body> tag – this is a fix for legacy IE browsers, which are limited to how many scripts they can load at once, for this reason it’s considered best practice.
  • Host large images and videos on a CDN.

Intermediate

Some of the bottlenecks that can cause long page load times come from the way browsers load assets and from having large amounts of content on a page.

  • Load third-party scripts asynchronously – this way, if they are running slowly from the source for whatever reason, they won’t get in the way of your other scripts.
  • Large images take a long time to load, even after compression. You can load large images as the user requires them with the lazyload.js jQuery plugin.
  • For long pages with multiple media types, you can download the content in ‘chunks’ as the user scrolls down – e.g. Infinite Scroll.

Advanced

Once you’ve squeezed your assets down and put them in the right place, it’s time for some more nit-picking. Some scripts may not necessarily be required on:

  • Mobile devices – where JavaScript should be kept to a minimum for load time and performance issues
  • Legacy browsers – which lack the support for newer features

There are a lot of JavaScript libraries available for conditional loading of scripts, I would recommend using Modernizr with YepNope.js. Modernizr will detect the supported features, YepNope will decide which resources to load. For example, if you’ve got a script which deals with swipe events, you’ll want to load that script when the user’s device supports touch.

Here are some simplified examples:

Modernizr.load(
//Mobile device example
{
  test: Modernizr.touch,
  yep: 'js/touch-handler.js',
  nope: 'js/mouse-handler.js'
},
//Legacy browser example
{
  test: Modernizr.csstransitions,
  nope: 'js/jquery-animations.js'
}
);

These very simple examples will remove the extra overhead of downloading the mouse-handler script for touch devices and excluding the jQuery animations script for browsers which do support CSS3 transitions.

 Server-side

Beginner

The first positive action we can take is to enable gzip compression on the server. What this does is compress all of your site’s static assets (HTML, CSS, JS), the obvious benefit of this is that smaller files mean faster downloading.

Adding the following code to your .htaccess file will enable gzip compression:

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

Source: Feed the Bot

Intermediate

Caching is a way of speeding up the loading time by serving content which the user or the server has accessed previously. Most web content can be ‘reused’ in this manner, and by enabling caching we can speed up the page load even further. When it comes to the web, there are four main types of caching:

  • Browser caching – Store a version of your site’s static resources on the user’s disk, with explicit expiry dates set in headers
  • Page caching – Store a raw HTML version of each page, rather than loading the dynamically-loaded version from the server every time a request is made
  • Object caching – On PHP sites with a large amount of dynamic content, enable OpCode caching. PHP is inefficient in the way that it compiles the code on each request, OpCode caching remembers the results of the compilation for next time, meaning less processing required and a faster website.
  • Database caching – or query caching is based on the same idea – that commonly used queries don’t need to be executed over again, but rather the results are stored for a predetermined expiry date.

Advanced

Fix the errors which are slowing things down. Errors in code are one of the trickiest problems to identify and repair. They could be occurring on the client-side or the server-side, so they can lead to usability issues as well as taking up precious processor power. We recommend using a tool called Raygun.io, which is a web-based service for tracking errors in software and web applications.

Raygun lets you track errors on any platform or framework, including JavaScript. It sends you updates whenever your site hits an error and charts the number of errors over time.

It makes good business sense too

Speeding up your sites’ page load times will not only help to boost your traffic and keep your customers happy, but will decrease the amount of bandwidth you use, which will save on hosting costs in the long run. Talk to us today about how we can improve your page load times.

People who have viewed this post also viewed

Leave a comment

* Required fields

captcha

Please enter the CAPTCHA text