This article demonstrates that it is possible to pass Google’s Core Web Vitals without any caching plugin for WordPress by taking the site seopress.org as a case study.
We are talking here about the 3 metrics used in the calculation of this index, namely the Largest Contentful Paint (LCP), the Interaction to Next Paint (INP) and the Cumulative Layout Shift (CLS).
All these optimizations have positively impacted our Page Speed score, especially on mobile, by increasing it from 60% to 96% (100% on Desktop).
Warnings
These optimization techniques are relatively “easy” to implement. However, it is necessary to understand them well in order to avoid any side effects on your site. We recommend that you make a backup before making any changes.
The gains observed may vary from one site to another. Many criteria come into play in performance. It is recommended to perform several series of tests via Page Speed and to take an average.
Finally, we do not claim in any way to be “experts in web performance”. We do not question the role of cache plugins either. We simply consider that, in web performance:
- your webhost has an impact of 50 to 60%;
- your WordPress site (theme, extensions, code quality) an impact of around 30% (this is the second point that this article is dedicated to);
- and that a caching plugin an impact of 10%.
In other words, a caching plugin that increases a site on mobile from 20 to 90% reveals only one thing: it is the tree that hides the forest. You have major technical problems to solve on your site.
Here is our list of optimizations implemented on seopress.org over the years and the technical developments brought by our browsers!
#1 – “Expires” headers
When you open a web page, many resources are loaded like image files, JavaScript, web fonts, CSS stylesheets etc.
Many of these files are cached by your browser in order to load these resources faster for the next URLs visited.
By adjusting the “expires” headers for each type of resource, we ensure that they are cached long enough by your browser and thus avoid that some are systematically loaded from the site’s server.
Here is an example that we use on seopress.org based on what most WordPress caching plugins offer. This code is added in the .htaccess file (Apache server only). Adjust it according to your needs.
#2 – DNS Cache
If your audience is international as is the case with seopress.org where we have many customers in the United States, India, China, Japan, South America in addition to all of Europe, DNS retrieval took between 50 and 400ms depending on the distance between our server located in France and the customer’s country. An eternity just to obtain the domain name resolution!
The trick was to host our DNS with Cloudflare. Their free offer allows automatic caching of the latter in their 330 data centers spread across the globe.
In addition, any change in the DNS is immediate: a real added value and time saving!
Result: DNS that take on average 4 to 20 ms to load. You can perform a performance test on DNS Performance for example.
#3 – Media Cache
Cloudflare, again, also offers in its free offer, caching of your media. That is to say that instead of loading your images, videos, documents from your server, Cloudflare takes care of it. And this in complete transparency. No need to modify your URLs, your server configuration, or install another WordPress plugin to take advantage of this feature.
#4 – WordPress Transients
The WordPress transients API is simply a database cache system where you temporarily store data. Each entry has its own expiration date.
In our case, we used this system to generate our two navigation menus (header and footer). These are built dynamically via WP_Query, walkers, and other queries. Except that they are not intended to change depending on the pages, and their data being little changing, it is ideal to store all that in transients.
Here is a very simple example where the file responsible for generating the HTML of the main menu is stored in a transient for a period of 24 hours.
We have successfully applied this process to other elements of the site which allowed us to save 100 to 300ms per URL loading.
#5 – Webfont optimization: variable fonts, asynchronous loading and preload
SEOPress.org uses 2 webfonts:
- one is hosted by Adobe Fonts (Degular)
- the second directly on our server (a well-known Google Font called Inter).
The first step is to asynchronously load our two fonts by modifying the resource call line like this:
The second step is to preload the Adobe Fonts URL (formerly TypeKit). This cannot be hosted on our own server for licensing reasons (to be banned but that’s another topic). Here is an example of code used on seopress.org:
This code adds these lines to the header of your pages:
<link rel='dns-prefetch' href='//use.typekit.net' /> <link href='https://use.typekit.net' crossorigin rel='preconnect' />
The third step, and probably the most impactful in terms of performance, is to use variable fonts.
This evolution in loading web fonts is quite recent. Not all fonts are called “variable”. Luckily, Inter, our Google font, was.
This consists of loading, via a single woff2 type file, what is only necessary in terms of weight, style variations, etc. Fewer server requests, smaller files, therefore more performance!
Our call is made in this way via CSS:
As for the woff2 file, it can be retrieved from Google Fonts servers.
Average Page Speed Gain: 20%
#6 – Unload unnecessary JS and CSS
Dozens of CSS and JS files are loaded by WordPress, your theme and your plugins, and most of the time in an inefficient way. By building a custom theme, we make sure to condition the loading of each JS and CSS via WordPress conditional tags.
We unload each unnecessary file (for example CSS that we already integrate into our main CSS stylesheet) using the wp_enqueue_scripts hook and the wp_dequeue_style (CSS) and wp_dequeue_script (JS) functions.
Here is a very small part of the code of what is described above as an example:
This must obviously be adapted to your needs!
#7 – Deferred loading of JS scripts
Some JS scripts do not need to be loaded from the beginning, they can be deferred, this is what this code does. Here again, to be used with caution, it is necessary to determine what should be “blocking” or not, identify dependencies etc.
Average Page Speed Gain: 5%
#8 – ACF JSON
Built 4 years ago, seopress.org relies heavily on the Advanced Custom Fields plugin. Although very practical in the pre-Gutenberg / FSE era, it can have a significant impact on the performance of your site, depending on the number of calls made in your different templates via get_field or get_sub_field for repeater fields for example.
One way to easily optimize this is to use ACF’s Local JSON feature. Each field group created via ACF is stored in a JSON file.
Result: your server reads a static file rather than your database, which is much faster!
To enable local JSON storage for ACF, read this tutorial.
Average Page Speed Gain: 10%
#9 – Live chat Help Scout
All of our site’s pages offer our visitors one-click to ask their questions via a live chat system. This is provided by Help Scout. The problem encountered was its slow loading, even if no user interaction was undertaken on the beacon.
The trick here was to create our own pre-sales questions button. When the user clicks on it, we manually load the associated Help Scout script. We used the Beacon JavaScript API available here for this.
The script is therefore executed on demand only, which had the effect of drastically reducing the page loading time (especially since external requests are made that can cause a loading block if slow on the Help Scout side).
Average Page Speed Gain: 15%
Bonus – various optimizations
To finish this list, here are some other technical optimizations implemented:
- OPcache on the dedicated server;
- GZIP / Brotli compression;
- HTTP/3;
- blocking of SEO tool crawlers and AI training via the SEOPress robots.txt editing feature;
- complete removal / deactivation of the “comments” part of the blog (less JS to load, no more external requests for Gravatars etc.).
We hope that this series of 9 tips (+ 1 bonus) will have helped you optimize the performance of your WordPress site, all without using a cache extension. The results we obtained on seopress.org are clear as mentioned in our introduction. It is worth recalling that this was a long-term work, many hours of testing and effort to achieve these results. Work that must be constantly carried out and updated as the web in general evolves.
