Optimize a website and go to 100 in speed tests, altsetup method

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 by Google itself and explained extensively by DebugBear that loading speed is a ranking factor for the Google search engine itself. Our PageSpeed Insight 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”.

There are more speed tests services, you can find them all listed and ready to use on Chckr. In particular, WebPageTest and SpeedVitals deserve special attention.

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.

If you want to know what’s the difference between PageSpeed Insight performance score (lab) and Core Web Vitals (field), read the article by Google.

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 🙂

User experience

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.

Hosting: it doesn’t matter, and we explain why in an interview. At the moment it is RackNerd, shared plan with server in US.

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. However, Cloudflare is much more than a CDN. 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.

Assets management, preloading, lazy loading, more: Perfmatters plugin. The principle behind is to load files only when the user visiting a page needs them, so not before. We load or preload assets relevant for the initial page rendering and delay and/or defer all the rest, so to improve the initial loading time. This method can be applied to JavaScript, CSS (removing unused), HTML, fonts, images, iframes.

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 Image > 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 Settings > 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.

Site views’ statistics: Independent Analytics because it has no impact on the speed of the site, respects the privacy of visitors and is ignored by ad blockers. We explain the choice more extensively on our Privacy Policy page, which thus serves something 🙂

Suggestions

• 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.

Closing words

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.

If you find this article useful offer us a coffee.

You may find other articles of your interest about Tech, UX and more, just scroll down the page.