WPO Wasabi vs. competitors
Do you want to see all the web performance improvement options of Wasabi Theme one by one?
Among its advantages, we highlight the following:
Loading static resources (JS and CSS) only if they are needed
No code will be loaded that will not be rendered. Historically, HTTP/1.1 was a bad practice because it implied making a more significant number of HTTP requests and consequent latency. Still, it became obsolete when they implemented HTTP/2 and parallel resource offloading.
This saves on bytes transmitted and allows resources to be processed as encountered in the DOM. More info: https://deliciousbrains.com/performance-best-practices-http2/
Inline CSS code
Thanks to the above change, it can also be very interesting to inline all CSS code so that the user’s visual perception of loading is instantaneous.
Why is this interesting? Because only the code to be used will be injected, no more and no less, without the need to generate “critical” CSS before inlining. This option is disabled by default but can be enabled from the panel.
This emulates, in a way, the practice imposed by projects such as AMP. More info: https://amp.dev/es/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/
DNS-prefetch to affiliate resources
Add the tag “ in the pages where resources obtained from affiliate APIs are used (for example, product images).
This way, we manage to reduce latency by resolving the DNS before the resource request is made.
Do not add redundant HTML code
This is a bad practice (commonly called “divitis” and “classitis”) that is generally used to speed up the design work. However, if we manage not to fall into it:
- We reduce the number of elements inserted in the DOM: less CPU is required to process, and less data is used to transmit over the network.
- We improve semantics.
In addition to developing the template itself based on these criteria, we have also developed a module that eliminates redundant code added by WordPress (extra classes, emoji code, extra nesting in menus, etc.)
Background images with optimized loading
In the background images of landings and categories, we use a “hack” that loads the images from more minor to larger, thus avoiding loading the full image on mobile devices.
This is a mistake made by slider or “hero image” plugins.
Instant loading of Google fonts
Load Google fonts with “font-display: swap” so that the user does not see the typical second page without text. If the font is not loaded, any element that tries to use it must show an alternative font. This is configurable from the panel.
Affiliate API cache
All requests to affiliate APIs (Amazon, eBay, etc.) are cached to avoid consuming resources and improve speed on future requests.
SVG inline
In the case of using SVG, for example, for category icons, the template inserts it directly into HTML without loading the resource, thus avoiding extra requests to the server(http://designingforperformance.com/optimizing-images/#svg)
Lazy-load
Deferred loading of images configurable from the administration panel and natively integrated into Wasabi Theme.
Scripts deferred loading
Moves the loading of scripts to the footer, managing not to block the DOM construction and improving slightly over techniques such as asynchronous script loading. Configurable from the admin panel. More info: https://javascript.info/script-async-defer
Minify HTML
Removes extra spaces in the HTML document to gain some milliseconds in loading speed. Configurable from the administration panel.
Remove static resource query parameters
This doesn’t add much, but it helps to improve the score in tools like GTmetrix. I add it if someone wonders what the option does in the admin panel.
