I optimized my WordPress website using 6 lines in my .htaccess file.
This will only work with HTTP/2 websites (I suppose most of them are in 2022).
Having tested my website with WebPageTest and GTMetrix, I noticed the same render-blocking behaviour for 6 files:
- 2 CSS files (one mine, one WordPress')
- 1 JavaScript file
- 3 font files (.woff2)
The solution was to use early hints (only available in Chrome 103, which is the bulk of my audience).
Here's what I put in my .htaccess file, in the root of my website:
H2PushResource /wp-content/themes/my-theme/base.css?ver=6.6.2
H2PushResource /wp-includes/css/dist/block-library/style.min.css?ver=6.0
H2PushResource /wp-content/themes/my-theme/js/whiskey-functions.js?ver=6.6.2
H2PushResource /wp-content/themes/my-theme/fonts/bentonsans/bentonsans-regular.woff2
H2PushResource /wp-content/themes/my-theme/fonts/bentonsans/bentonsans-medium.woff2
H2PushResource /wp-content/themes/my-theme/fonts/bentonsans/bentonsans-bold.woff2
The only caveat here, and the most important one, is that I needed to put the links exactly the way they are loaded, and that is including the version parameter.
That means that whenever I want to update my theme (or WordPress), I need to update my .htaccess file and change the version number.
If you want to see how fast it is, check out https://getbutterfly.com/ and browse a few pages. Everything loads almost instantly.
Top comments (1)
Great 👌, gotta test it!