How to have a blazing fast website on mobile and desktop? We have succeeded and will explain in detail how you can do it yourself without facing unnecessary expenses.
Why optimize a website
Website optimization is an established trend. Most webmasters want to make their site faster, provide a better user experience to visitors and get good search engine results for themselves or their customers.
In this article there is an accurate description of how we have achieved the current results for the site on which you are now reading these words. We have no economic interest in promoting the services described below, our only intent is sharing. So let’s start!
Speed test results
PageSpeed Insight is Google’s speed test. For better or worse it is considered the industry benchmark, also and above all because it is hoped that good values are reflected in good placements in the ranking. Here is the result for mobile on the left and for desktop on the right.
GTmetrix is more configurable than PageSpeed Insight and provides valuable information to help you to improve. It also allows registered users to change the Test Server Location, which PageSpeed Insights doesn’t even disclose. Their Waterfall Chart is a great feature showing a request-by-request visualization of the browser’s page loading.
Pingdom offers quite limited functionality with its free service, and the results vary greatly depending on the server selected for testing. Better options are most defiantly available.
Fast or Slow is the new kid in town. Its strength is in running the analysis simultaneously from multiple servers located in different zones of the world. The generated report includes the results for each individual server and also shows an aggregate form of the obtained values, as depicted in this image.
WebPageTest is a tool geared towards in-depth testing for performance as opposed to usability. Its auditing has options for different test locations, variable connection speeds, mobile browsers, video previews, waterfall and multiple tests. The A grade on Security Score has been reached by working on Security Headers.
Cloudflare site speed test tool certifies the degree of performance improvement of our site as a result of using their CDN service (see Lazy Bit Setup section later in this article).
At this point we should change our name to Not-so-lazy Bit, right? :) As you can see all the test results published here refer to our home page. This was chosen for simplicity and consistency. The same score comes out for all the pages on our site, even those richest in content. You can verify this yourself by running some tests, maybe you want to click here to perform the PageSpeed Insight for the article page you are reading.
The results of speed tests are subject to fluctuations based on various factors related to the network and servers used, so it is possible that repeated tests give different results even if performed over a short period of time. In this article we have published the results that are closest to our average results from multiple test runs.
Speed tests are methods to “measure” the level of performance of a web page in a standard way. Actually what really matters is the visitor’s user experience, in this case the perceived speed. If you browse our site for a while, you’ll notice that the test results reflect what you perceive with your eyes, which is indeed an extremely high page viewing speed.
This site is both an experimental user experience (UX) laboratory and a full-fledged Technology blog. To achieve and maintain these results in terms of performance, we do not sacrifice the presence of any element you normally find in a good quality blog. As you can see on each page there are:
- good quality images;
- fixed menu bar at the top (sticky header);
- newsletter subscription form in the sticky sidebar on fairly large screens or after each article on smaller screens;
- table of contents at the beginning of each article;
- social icons for sharing and following;
- thumbnails that link to multiple articles;
- section at the bottom of the page (footer) with information about who we are;
- cookie bar.
Now is the time to unveil the Lazy Bit setup, i.e. the components of the system used to achieve these results on our site. Are you ready? Let’s talk about speed, hold on tight!
Lazy Bit Setup
The following setup is easy to implement and it is what we are using at the moment. We’ll update this article in case of any changes.
CDN (Content Delivery Network): Cloudflare, Free plan (which is free, indeed). A CDN is used to host the site on multiple servers distributed around the world, unlike the single server that a normal webhost makes available. This reduces the geographical distance between the server and visitors. In practice, any changes made on the webhost server are automatically replicated to all servers of the CDN network accessed by visitors. To know how to configure Cloudflare to work best with WordPress, read the BikeGremlin’s guide.
CMS (Content Management System): WordPress, which is natively not lighting fast but is a good base to work on.
WordPress Theme: Soledad. This theme natively integrates lazy load and CSS, JS and HTML optimization achieving better results than those you get with the Wordpress plugins normally used for the purpose. We explain how we chose our theme on a specific article (still not translated to English, try the one translated by Google Translate).
Cache: WP Cloudflare Super Page Cache plugin, which must be installed after activating the Cloudflare service. The official Cloudflare plugin does not need to be enabled. By default Cloudflare generates the cache only for static files (CSS, JS, images etc.), but thanks to this plugin the cache is also generated for html pages without creating problems in administration. In addition to being generated on the Cloudflare network, the cache is also generated on the webhost server. The latter comes into action when the former fails to meet requests. It is a relatively little known plugin but brilliant in the design and execution of its functions.
Page preloading: Flying Pages by WP Speed Matters plugin developed by speed-guru Gijo Varghese. It works by playing ahead and caching the HTML of internal pages before the visitor clicks. Simply brilliant.
Image Optimization: IrfanView for Windows, free for non-commercial use. We use PNG format for images with only a few and well-separated colors and WebP for photographic images.
For PNG we decrease the number of colors bringing them between 16 (4 BPP) and 256 (8 BPP) through the command
Decrease Color Depth before saving the image file to be published. Pro tip: Wordpress ignores the number of colors when generating thumbnails and automatically increases it to 16.7 million (24 BPP). For this reason we also generate versions of the same image with same dimensions as those of the thumbnails actually used by the theme. Then we upload them via FTP overwriting those generated by WordPress with our ones having between 16 and 256 color.
Here are the file saving settings used in IrfanView for both formats. The interface shown is in English, but it is available in multiple languages.
IrfanView “remembers” the last options used for each single format during the previous save, so in most cases generating the file to be uploaded via the WordPress Media Library is a just a matter of a couple of clicks.
At the time of the last update of this article, the WebP format is not yet supported by 100% of browsers, you can check the updated data on Can I use. You can use the WordPress plugin WebP Converter for Media which shows the visitor a JPG image or the corresponding auto-generated WebP based on browser compatibility. Anyway this plugin (and similar ones) does not support Cloudflare so its adoption is incompatible with ours setup.
So far we have described our image optimization process before publishing. If you want to optimize already published images (original and thumbnails generated by WordPress) then read our guide on the subject (still not translated to English, try the one translated by Google Translate)
On the Shortpixel website we performed the Image Optimization Quick Test for this article page, which is full of images. Here is the result:
General setup criteria: minimal layout, using high-quality and only really necessary plugins.
Avoid: Forminator contact form, which is in constant conflict to Soledad’s internal optimizer and any caching plugin tried.
Pro tip: to get the perception of 1st visit’s real speed of your site on desktop use Chrome in Incognito mode, so to reproduce the most common visitors’ setup. By default in Incognito there are no extensions enabled, but you should install Incognito Mode Reset Button and enable it to clean history, cookies and cache any time you want without leaving open tabs. Normal visitors don’t disable their browser’s cache so if you want to “pretend” to be one of them do NOT flag
Disable Cache on DevTools.
Our method is no better than others, but can be applied with relative simplicity and without extra costs. Optimizing a website is not a technical virtuosity for its own sake. The goal is to improve the user experience of visitors and increase the level of appreciation by search engines that are increasingly sensitive to the speed factor. Then let us know how it went!
Feel free to contact us to report any errors, make suggestions or just to say hello.
Scrolling down this page you may find other articles of your interest, take a look :)