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 with sharing these results!
Speed test results
PageSpeed Insight, Google’s speed test. For better or worse, it is considered the industry benchmark. 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.
Fast or Slow is the new kid in town. His 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 grade A on Security Score has been reached 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, actually the same score come out for all the pages of the site, even the 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 our case we have published those that report the values coming out most frequently.
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 go around our site for a while, you 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;
- 2 widgets for donations that open in pop-ups by clicking on the respective links at the end 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;
- contact form that opens in pop-up by clicking in different points (sticky header, final part of each article, footer);
- 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 easily reproducible and is updated if necessary by our editorial staff, so it is the one actually in use at the moment.
Webhost: FastComet, FastCloud Plus shared plan with servers in Germany. There is no server-level cache featured.
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 reproduced on all servers of the CDN network accessed by visitors.
CMS (Content Management System): WordPress, which is natively not lighting fast but is a good base to work on.
WordPress Theme: Soledad with all Penci Speed Optimizer features enabled except those indicated in the Install cache section. This theme natively integrates lazy load and CSS, JS and HTML optimization achieving better results than those obtainable with the Wordpress plugins normally used for the purpose. On the choice of the theme for Lazy Bit we have published a dedicated 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, which among other things include URLs auto prefetch in several ways.
Image Optimization: IrfanView for Windows, free for non-commercial use. We use PNG format for images with few and well-separated colors and WebP for photographic images. In case of PNG we decrease the number of colors to 16 or 256 through the command Image > Decrease Color Depth before saving the image file to be published.
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 matter of a couple of clicks.
At the time of the version of the article you are reading, 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, but it is a method that 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, use of plugins only of good quality and if really necessary.
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 the real speed of your site use the Chrome extension Classic Cache Killer on a Chromium-based browser on which you are not logged in to the WordPress administration. A good option is Brave. Keep Classic Cache Killer enabled while browsing your site, so you’ll always have the “first visit” experience instead of the one that comes from your browser’s local cache. The browser cache is automatically cleared just before loading each page. And no, the incognito mode doesn’t help in this because it also draws on the browser cache with unstoppable bullying.
Our method is no better than others, but it is possible to apply it with relative simplicity and without incurring excessive expense. 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!
This article was also published in Italian.
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 😉