OPTIMIZING WEBSITE PERFORMANCE

At Mutation Digitale, website performance is at the heart of what we do. Not only is it essential for great SEO, but it’s also becoming increasingly important for users, many of whom are using mobile devices with lower connection speeds. Statistics show that more than half of all visits are abandoned if load time exceeds three seconds – but over 70% of current websites are larger than 1MB.

There are two main factors to take into account in terms of performance: TTFB (Time To First Byte) and total load time.

The first factor relates to the time taken by the server to send the first byte to the browser – in other words, the time taken to execute the code and database requests to construct the HTML page.

The second factor relates to the time taken for the browser to load the whole page (javascript, css, images, etc.). This is affected by the number of resources, compression, server configuration (caching, gzip), etc.

Taking the example of a PHP website, we’ve broken down the optimization process into four steps:

  • Server configuration
  • Optimizing backend code
  • Optimizing frontend code
  • Testing performance

SERVER

Obviously, the first thing to do is to make sure that your server has the capacity to handle your expected traffic and the load generated by your website. This load varies depending on the selected architecture.

For this reason, we encourage our clients to use cloud servers, which present the advantage of being easy to scale up as required.

Next, there are several other aspects to consider:

  • Gzip can be used to compress HTML requests. It can be configured at Apache/Nginx level, or even in the website’s .htaccess.
  • Expires headers specify how long certain resources should be kept in the browser cache. For example, the expiration delay for CSS might be set at one year, with fonts expiring after a month.
  • FastCGI caching is an Nginx module which acts as a static cache: when clients send a request to the page, Nginx brings up the html without executing the code. The cache can also be busted via the application, e.g. if you’re updating content via a CMS. https://www.digitalocean.com/community/tutorials/how-to-setup-fastcgi-caching-with-nginx-on-your-vps
  • Mod_pagespeed is a Google module which provides some improvement in terms of performance. https://developers.google.com/speed/pagespeed/module/
  • Activating the HTTP/2 protocolincreases performance. https://http2.github.io/
  • PHP 7+. The performance of PHP increased substantially with version 7, and version 7.1 is even better. We recommend using the latest version. Make sure that the OPcache extension is activated.
  • HHVM is a virtual machine which executes PHP using a JIT approach to improve performance. Note that there may be minor incompatibilities with certain aspects of PHP, but they’re working on it. http://hhvm.com/
  • MySQLTuner is a tool for configuring MySQL / MariaDB. Other options include PostgreSQL, MongoDB or even flat file. https://github.com/major/MySQLTuner-perl
  • We also recommend using a CDN for assets, or even for HTML!

There’s an example of an .htaccess file with different optimizations at
https://github.com/h5bp/server-configs-apache/blob/master/dist/.htaccess

Back-end

Once you’ve optimized the server side, it’s time to look at the application code. In some cases, back end code is a major obstacle to performance. It’s also something that developers have been known to ignore in favor of an easy, off-the-peg solution – which may not be ideal for your specific situation.

Front-end

There are many things you can do at “client” level to reduce load time:

Tests

Many different sites offer tools to test website performance based on load time and give you tips to optimize specific aspects of your website:

The profiler in Xdebug can also be used to identify bottlenecks in applications.