How to fix PageSpeed Insight 'Loading critical requests'

If you run WordPress, you probably care a lot about speed. I didn’t care because it wasn’t slow when I opened it, but recently, slow posts were displayed in Google Search Console, so I measured the speed on the PageSpeed Insight site and was shocked to see that it was in the red range.

So, I’m looking at the corrections that are being made in the measurement results and making corrections, but it’s really not easy.

Even when searching on portals, it was not easy to find the information I wanted, so I looked into it by using a translator on a foreign website.

I will summarize the solution to the ‘loading important requests’ problem, which can be difficult for people like me who don’t know much about programming.

PageSpeed Insights

In my case, the font loading reduction effect was 540ms in the ‘Preload important requests’ item. If you look at the explanation here, you can see that it tells you to set the priority using < link rel=Preload >, which means that since fonts are often located at the bottom of the CSS file, you should increase the priority so that they are preloaded.

So first, I’ll introduce you to the plugin that loads various important requests, and then I’ll tell you how I solved the font problem.

Wp Fastest Cache

In order to fix the preloading of important requests, I installed a cache plugin that I had not installed before. A cache plugin is something that speeds up your site and can fix most of the issues that appear in PageSpeed insight.

The one I chose is WP Fastest Cache , a cache plugin that has over 1 million users and is constantly being updated, so you can use it with confidence.

If you install WP Fastest Cache and look at the settings, you will see something called Preload. Checking this will solve most of the Preload problems. You can use the free version of this plugin, but we recommend using the pro version to solve more problems and improve your site speed.

Although I was concerned about the price, I ended up using the Pro version because I could continue to use it once I applied it. As a result, most of the fixes that PageSpeed Insight showed were resolved. (This is the result of using Autoptimize at the same time.)

After installing this plugin, my speed scores that were previously red have changed to orange or green (this varies depending on the page I measured).

Fix Font Preload Issues

Even after installing WP Fastest Cache and Autoptimize, not all problems were solved. Among them, Preload still had a problem with Font. In order to solve this problem, I modified it by referring to the official manual and overseas communities, but it did not work properly.

As I continued to search overseas sites, I found a question asked by a user using the theme I use, and when I applied it as is, the problem was solved.

There is no significant difference between the official manual and other community content that was applied before, but I cannot explain exactly why it did not work before because I am not a programmer, but if you look at the explanation below and follow it, I think most problems will be solved.

To solve the Font Preload issue, you need to add something between <head> and </head>. If you are familiar with programming, you can add it yourself, but if you are not familiar with it like me, you can install the Insert Headers and Footers plugin to easily add it to the head.

If you have installed the plugin, go to PageSpeed Insights, right-click on the list of URLs for Preloading Important Requests, and copy the link address.

Then, just enter the link address you copied from the URL above and add it to the Insert Headers and Footers plugin.

Finally, after adding, you can delete the cache.