There are many ways to host a website, but whether you choose a large cloud provider like Amazon or a small outfit like Soft Pauer – performance is one of the key concerns customers have. Technically a well-provisioned server is capable of delivering huge amounts of data anywhere in the world, with latencies of a fraction of a second. Therefore site design and configuration will be the largest factor of a well-performing site. Here are our tips for ensuring snappy loading every time.
Use the latest version of React/PHP/ NPM/Rails
If you are using an old version of PHP, NPM, REACT, Ruby on Rails etc it’s recommended you upgrade where possible. this can improve page load times and improve security. Simply moving from PHP 5.6 to 7.3 can yield a 2-3 times performance improvement. Still worrying about those Internet Explorer 6 users? Don’t! Do update your site, as Microsoft will force them all onto Edge anyway!
Remove Unnecessary Plugins
If you are using a CMS like WordPress plugins are very easy to install like apps on your mobile. They can add functionality very rapidly but if you built your site in a number of iterations, you may find each plugins increase the page load time substantially. If you used one for page cloning or as an editor you may two plugins are doing the same job or even you don’t need the plugin activated whilst you are hosting the site. We recommend removing any plugins you no longer use or plugins you can easily do without.
Remove Historic CSS
If you a native website builder Take a look at your CSS. Are you using it for classes and Id’s you have now removed? A user’s browser will slow down if it’s trying to call empty CSS classes. P.S. We wouldn’t recommend this for WordPress user your “wordpress” theme will create a CSS file for every option you select and 90% of these files aren’t used or rendered, tinkering with the CSS is a professional’s job.
Large Images
Hosting a website is tricky when it comes to imagery, you want the best resolution images on your site, but ultimately you need to consider the majority of your traffic is going to be via mobile these days, so responsive images are key. Compressing images can be done via SVG, JPGs or even WebP images as these download faster. Also considering a cloud hosting site may be a good way of ensuring the quality is good, although you can be a victim of that’s services outages, best to host them and compress them yourself.
Beware the high res photo taken by a professional camera. High end cameras often produce multi-megabyte JPGs at extreme resolutions. Many a page has fallen foul of the large banner picture!
REACT
Revising your HTML and JavaScript into React and experimenting with AMP.
React is the language created by the development team at Facebook, and Instagram. It is designed to efficiently create responsive web pages, and has many fancy controls developed for it that can liven up a static site. React uses modern browser features to optimize DOM usage, a performance hotspot in dynamic sites.
If you are using large amounts of text consider using AMP for when its viewed on mobile. Its created by Google and is used by popular sites such as Wired.co.uk to make their mobile sites load quicker. There are plugins for most Opensource CMS systems that will render AMP from your source. AMP will actually cache on third party servers though, so this is important to be aware of when gathering metrics as your server will not necessarily see every user directly.
Server Configuration
Server configuration is important, going to a cloud hosting business is full of pitfalls and hidden costs if you have huge surges of traffic. Make sure gzip compression is enabled on the server. Gzip compression is where any text-based file like HTML, CSS or JavaScript is compressed automatically before it is sent to the website visitor. This can reduce bandwidth but more importantly improve page load times.
Something to remember: static files server 10-100 times faster than dynamic content, and cached data may not be served at all. Caching rules are a powerful tool for ensuring stuff loads quickly – and importantly reduces bandwidth to your site. Therefore Cache-control will often lead to the best improvements to user experience. The difference between poor and good is often 10s of times. Good cache control will help the browser know the javascript or CSS has not changed, so processing time of those elements will be removed.
If using PHP ensure that the opcache is turned on and working – this improves subsequent execution of scripts and can be a big win. PHP should also be configured in FPM process pools, though this is normally default these days.
Databases can also benefit from performance tuning if the site is large. The number one killer of database performance is missing keys – we have had many customers get huge boosts by identifying a missing key on a large frequently used table. Query optimisers are great, but often underused!
When you have lots of traffic, you can consider technologies such as http 2. This protocol can have benefits, as the connection is much better managed than in HTTP 1.1. If the site has pages using many little files and lots of large cookies it is ideal for HTTP 2, as HTTP 2 features cookie compression and something called connection pipelining that can be a big improvement in certain scenarios. However, we recommend this is a late step in optimisation, as HTTP 2 can introduce complexities for small benefits that could be found elsewhere.
Finally when first setting out to speed up your site, always start with the basics: open the Chrome development tools and profile the page – you’ll be amazed at what you see! The acid test would be to test the speed of your site with Google’s very own tool https://developers.google.com/speed/pagespeed/insights/ simply type your URL into that, there is mobile and desktop options. See our score below, We’d be interested to see your scores.
