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.
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
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
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.
- Caching: instead of issuing SQL requests every time a page loads (expensive) or carrying out big operations, keep results in a cache. This can be done using APC, Memcached, Redis or any number of other options. http://www.php-cache.com/en/latest/
- Avoid including unnecessary redirections in your code.
- Minimize html
- Eager loading reduces SQL requests by pre-loading elements such as images or matrix fields in a single request - https://nystudio107.com/blog/speed-up-your-craft-cms-templates-with-eager-loading
- Image optimization using the Imager plugin, which allows you to use jpegoptim or opting, for example - https://nystudio107.com/blog/creating-optimized-images-in-craft-cms
- Google Amp is a framework designed to offer server and front-end optimizations for mobile. For example, html is kept in a cache behind a CDN, lazy load images are used, etc. https://www.ampproject.org/docs/getting-started/
There are many things you can do at “client” level to reduce load time:
- Responsive images (with srcset and picture) - https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
- Use icon fonts or CSS sprites to reduce requests.
- Web font loader + minimize number of fonts (and charset) - https://github.com/typekit/webfontloader
Many different sites offer tools to test website performance based on load time and give you tips to optimize specific aspects of your website:
- Wulfdeck - https://wulfdeck.com/
- PageSpeed Insights - https://developers.google.com/speed/pagespeed/insights/
- Think with Google - https://testmysite.thinkwithgoogle.com/
- Web page test - http://www.webpagetest.org/
- Website Speed Test Image Analysis Tool - https://webspeedtest.cloudinary.com/
- Pingdom Website Speed Test - https://tools.pingdom.com/
- GT Metrix - https://gtmetrix.com/
The profiler in Xdebug can also be used to identify bottlenecks in applications.