If you run WordPress, you will be concerned about the speed. I don’t care because it’s not slow when I open it, but recently, slow posts were displayed in Google Search Console, so I measured the speed on the PageSpeed Insight site. I was embarrassed to try and get into the red range.
So I am making corrections while looking at the contents of the measurement results, but it is not easy.
Even if I searched through the portal, it was not easy to find the information I was looking for, so I searched a foreign site by running a translator.
Let’s take a look at a solution to the’Loading Important Requests’ that can be difficult for people who don’t know much about programming like me.
1. PageSpeed insight
In my case, the font load reduction effect was 540ms in the’Preload important request’ item. If you look at the explanation here, you can see that it is asked to prioritize using <link rel=Preload>, but in the case of fonts, it is often located at the bottom of the CSS file, so increase the priority so that it is preloaded. .
So, let’s first introduce a plugin that allows you to load a variety of important requests, and then show you how to fix the font problem.
2. Wp Fastest Cache
To fix preloading important requests, we installed a cache plugin that had not been installed in the meantime. Cache plugins can speed up your site and fix most of the issues found in PageSpeed insight.
My choice is a cache plugin called WP Fastest Cache, which is used by more than 1 million people, so you can use it with confidence because it is constantly being updated.
If you install WP Fastest Cache and look at the settings, you will see Preload. Checking this should solve most preload problems. You can use the free version of this plugin, but we recommend using the pro version to solve more problems and speed up your site.
There was a burden on the price, but once applied, I used the pro version in that it could continue to be used. As a result, most of the fixes in PageSpeed Insight have been resolved. (This is the result of installing and using Autoptimize as well.)
After installing this plugin, the ones that received a red score will now turn orange or green. (It comes out differently for each measured page.)
3. Font Preload problem solving
Installing WP Fastest Cache, Autoptimize did not solve all the problems. Among them, Preload had a problem with the Font, but to solve this problem, I modified it while looking at the official manual and the contents of the overseas community, but it did not work properly.
As I continued to search overseas sites, I found what the user of the theme I used asked a question and applied it as it was, and the problem was solved.
There is no significant difference from the official manual that was applied before that and other community contents. I am not a person who knows how to program, so I cannot explain exactly why, but I think that it will not be solved most if you follow the explanation below. Do it.
To solve the Font Preload problem, you need to add it between <head> and </head>, and if you know the programming well, you can add it yourself, but if you don’t know like me, install the Insert Headers and Footers plug-in, it’s easy to add it to the head.
Once you have the plugin installed, simply go to PageSpeed insight and copy the link address by right-clicking on the preloading important requests URL list.
<link rel = “preload”href = “URL “as = “font” type = “font / woff2” crossorigin>
Then, enter the link address you copied to the URL from the above and add it to the Insert Headers and Footers plugin.
Finally, you can delete the cache after adding it.
Now, if you analyze again with PageSpeed insight, you will be able to see the solution as shown on the screen above.
If you’re having a’preloading important request’ problem like me, please take a look at the above and hope it’s resolved.
We will make corrections while looking at other issues that are still left, so I will write an additional post if it is resolved.
[References] Prioritize resources-get help from the browser