I have tested the speed of my website ebetterbooks, and found some errors that were causing the slow speed of the website, fixed almost all of them, except one that is, eliminate render blocking resources, can someone tell me how to fix it
Basically I have found CSS, Javascript and Fonts that blocks.
Javascript
I reduced the Javascript blocking by “defer”:
<script src="/js/nav.js" defer></script>
CSS
CSS I have found no way to unblock. Just compress.
Fonts
Googlefonts blocks the rendering and you can download them to your server and “unblock” them. https://gowebstatic.tk/fonts
2 Likes
CSS is blocking the page rendering until the css file(s) is fully loaded and ready to style the page.
The solution is mainly to only load resources that is applied in current page waiting to be rendered. Google has some info worth reading:
Search for more info:
https://duckduckgo.com/?q=css+render+blocking&ia=web
https://duckduckgo.com/?q=eliminate+render+blocking+resources&ia=web
2 Likes
I’m curious about how this works. I may be misunderstanding it, but I’m thinking, whether the font is on your server, or Google’s, what difference does that make from the client point of view? They will still be downloading the font to their device, just from a different (remote) location.
1 Like
Me too, ideally the client could have the Googlefont in cache already?
I suppose it is more likely with commonly used fonts, which other sites may use. But it’s the same for any cached content, the very first load can cause a block. My question is, how does having it on your server help the client? As the block is the delay in getting it to the client, from wherever.
1 Like
Fetching fonts “locally” loads faster and reduce blocking. Using woffs does not show any “render blocking” messages for fonts in Page Insights and web.dev. By using woffs you can tailor your fonts to load only latin for an example. Using less font variants (cyrillic etc) reduces also the load time.
However, Google Fonts (and similar services) are third-party services. The caveat here is that browsers would need to make extra requests – one for your server, and one for the third-party server – to get all assets (including fonts) loaded for your application. Due to multiple external requests, this can affect performance
2 Likes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.