DEV Community

Ciprian Popescu
Ciprian Popescu

Posted on

Quick tip: How I optimized my WordPress website using 6 lines

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

Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
smokerman profile image
Bob

Great 👌, gotta test it!