Do you want 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 for 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 this site. We have no economic interest in promoting the services described below, our only intent is sharing. So let’s start!
Speed test’s results for altsetup
PageSpeed Insight is Google’s speed test. For better or worse, it is considered the industry benchmark. It is well documented that loading speed is a ranking factor for the Google search engine itself. Our score is 100 for both desktop and mobile on all pages. You can verify for yourself by running the test for our home page. However, below is an image of the result. Also note the “metrics”.
Do speed test scores matter?
Speed tests are the main tools to measure the performance of your website, so the scores can guide you in the best possible optimization.
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.
One of the most used arguments to discredit the importance of speed test scores is in statements like “This site loads fast on my computer, this means that low score doesn’t matter”. People who visit your site live around the world and have different devices and internet connections. This means that it might load faster or slower for them depending on these factors. Some lab tests like PageSpeed Insight mobile reproduce less favorable conditions to see how your site fares in those cases.
Another typical objection is “Please your visitors, not Google”. We all know that if we don’t please Google, we don’t have visitors to please. Sad but true, all that matters for ranking are Core Web Vitals. You can read about it on a great article by Kishorchand Thangjam.
Supposed low priority is a pretext often adopted to minimize the importance of achieving good results in terms of optimization and speed. According to some, it is more important to create high-quality content than to ensure that visitors see it quickly. In fact, good content and fast page loading are both important, and you need not choose between the two.
Those who say that speed test scores don’t matter are usually driven by frustration at not being able to get the desired results, a bit like in The Fox and the Grapes 🙂
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 us;
Now is the time to unveil the altsetup 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!
altsetup setup (no pun intended)
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 traditional web hosting provider makes available. This reduces the geographical distance between the server and visitors. In practice, any changes made on the hosting 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 Perfmatters devs’ guide.
CMS (Content Management System): WordPress, which is natively not lighting fast but is a good base to work on thanks to its flexibility.
WordPress Theme: Kadence. It is the best compromise between richness of functionality and performance.
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. The result is a full-page cache similar to what you can get with the Cloudflare’s Automatic Platform Optimization (APO) add-on. In addition to being generated on the Cloudflare network, the cache is also generated on the hosting 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.
Before the user interaction, altsetup loads only the HTML file and any images to be displayed immediately. As a result, post pages load two files, HTML and featured image. As a demo, we have a post sending to the network only the HTML request.
Images optimization: SVGOMG (web) for SVG images and IrfanView (Windows) for PNG and WebP images. We use SVG (some inline) for illustrations and icons, PNG 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.
Here are the file saving settings used in IrfanView for PNG and WebP. 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 just a matter of a couple of clicks.
At the time of the last update of this article, the WebP format was 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 our setup.
Considering our layout we have decided to disable the automatic generation of smaller images that normally occurs when uploading to the WordPress Media Library. One of the limitations of this automatic generation is that it happens out of control parameters. For example for PNGs the number of colors is automatically increased to 16.7 million (24 BPP).
You can disable it from the WordPress dashboard in
Media this way:
For our articles we use images with a maximum width of 768px, which is a standard. This way, no smaller image is generated, and the display is suitable for every device. By doing this we have complete control of what is shown without wasting time on subsequent optimizations. Another positive effect of this choice is that it does not generate a multitude of useless images which only contributes to increasing the space occupied on your hosting.
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.
- Adopt a minimal layout, that’s what people like
- Use high-quality and only really necessary plugins
- Don’t use page builders like Elementor, Divi etc.
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!
English proofread by Gregor Bock.
Feel free to contact us to report any errors, make suggestions or just to say hello. We are also available for consultations.