How can I optimize my site's performance?

At Mutation, website performance is at the heart of our concerns. It’s an essential element for good SEO. It’s even more important today, with the high proportion of users on cell phones, whose connections are slower.

Statistics show that more than half of all visits are abandoned if the loading time exceeds 3 seconds. And yet, over 70% of all pages on the web fail to reach their target audience.

To ensure good performance, there are two main factors to take into account: TTFB (Time to first byte) and total loading time.

The first point refers to the delay before the server sends the first byte to the browser. In other words, the time it takes for the code and database requests to be executed and for the HTML page to be built.

The second point refers to the amount of time it takes the browser to load the entire page (javascript, css, images, etc.). This is affected by the number of resources, compression, server configuration (caching, gzip), etc.

So we’ve taken the design of a PHP site as an example, and broken down the optimization steps into four parts:

  • Server configuration
  • Back-end code optimization
  • Optimizing front-end code
  • How to test performance

Server

First of all, we need to ensure that our server is sufficiently powerful to handle the anticipated traffic and load that our site will generate. This last point varies according to the architecture in place.

That’s why we recommend to all our customers the use of cloud servers, which offer the advantage of being able to scale easily with just a few clicks.

Here are some other aspects to consider:

  • Gzip, which compresses the HTML request, can be configured at Apache/Nginx level or even in the website’s .htaccess file, for example.
  • Expires headers, which lets you specify how long the browser will cache certain resources. For example, you could specify one year for CSS and one month for fonts.
  • FastCGI caching, a Nginx module that acts as a static cache, so when the client makes a request to the page, Nginx will return the HTML without executing the code. And it’s possible to “bust” the cache via the application, for example when updating content via a CMS.
  • Mod_pagespeed, a Google module that offers some performance gains.
  • Enable HTTP/2 protocol to improve performance.
  • PHP 7+. PHP has greatly improved its performance with version 7, and there are further improvements with version 7.1. We therefore recommend using the latest version. Also ensure that the OPcache extension is enabled.
  • HHVM is a virtual machine that runs PHP in JIT compilation for better performance. For example, there may be some minor incompatibilities with certain aspects of PHP.
  • MySQLTuner, a tool for configuring MySQL / MariaDB. Alternatively, you can use PostgreSQL, MongoDB or even flat file.
  • We also recommend using a CDN CDN for assets or even HTML!

Here is an example of an .htaccess file with different optimizations: GitHub.

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.

  • 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.
  • 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.
  • Image optimization using the Imager plugin, which allows you to use jpegoptim or opting, for example.
  • 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.

Front-end

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

  • Combine and minimize javascript / css. Laravel Mix, a wrapper used with Webpack, offers an easy means of combining, minimizing and otherwise modifying assets.
  • Use lazy loading for javascript images, only loading images once they’re visible in the viewport. Library: vanilla-lazyload.
  • Responsive images (with srcset and picture).
  • Use icon fonts or CSS sprites to reduce requests.
  • Web font loader minimize the number of fonts (and charset).
  • Use CSS or requestAnimationFrame animations in javascript so that the browser optimizes animations.
  • Avoid unnecessary javascript libraries (e.g. using jQuery) and load certain parts of a library (e.g. babel-plugin-lodash)
  • Load javascript in ASYNC mode.

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.

Read more articles