SIERRA Posted July 17 Share Posted July 17 Hi, We have a website developed using the ProcessWire framework. We have applied the Padhai HTML Template as the theme to this website. Now we are doing page speed optimization where PageSpeed Insights suggested fixing the errors related to eliminating render-blocking resources. (Please find the screenshot: rendor-blocking.png) However, we do not face many errors in eliminating render-blocking resources when we test the Padhai HTML Template alone. (Please find the screenshot: rendor-blocking-padhai.png). We kept these template files outside the project directory. We finally found that when we have the same files inside the site/templates/ folder, we face this issue. Please suggest any plugin to resolve this or suggest how to resolve this? Link to comment Share on other sites More sharing options...
da² Posted July 17 Share Posted July 17 (edited) @SIERRA There's no problem here for me. CSS are loaded first so styles are available when content is loaded. https://web.dev/articles/critical-rendering-path/render-blocking-css Edited July 17 by da² Link to comment Share on other sites More sharing options...
AndZyk Posted July 17 Share Posted July 17 (edited) Hi @SIERRA, to avoid this "issue", you would have to extract the CSS that is rendered above the fold and insert in inline: https://web.dev/articles/extract-critical-css In the article there are some npm modules mentioned, which seem to help with identifying the CSS above the fold. But personally I have never done this, because I don't want to separate my CSS into different places. For me it is enough to minify the CSS with ProCache to get a good PageSpeed score. Regards, Andreas Edited July 17 by AndZyk Link to comment Share on other sites More sharing options...
Sanyaissues Posted July 17 Share Posted July 17 Hi @SIERRA The problem isn't related to putting the content inside Processwire templates folders or how you implemented the paidhai template. The paidhai template requires 417kb only for the CSS (plus 100kb of not used javascript) when loading the website. That's a lot. Spoiler Here's the same test results using the template reference emulating a Slow 4G throttling in a mobile device: The solution is to deliver only what is required (css, images, scripts) and defer everything else. To understand what is really required on the first load you can use the coverage tool in Chromes dev tools: 1. Open the chrome dev tools (Shift + Ctrl + I) 2. Open the command menu (Shift + Ctrl + P) 3. Type coverage and select the show coverage tool Coverage can help you to understand which content was loaded but is not being used (aka: things that you can defer). As you can see in the picture, 567kb are being loaded, but only 67kb were needed to render the first content. Spoiler I never used Bootstrap before, but in your case I will probably try to understand what CSS & JS content is really needed. - Does your website really require all the CSS files on first loading (popup, carousel modal-video, font-awesome)? - Can you defer or async the main.js and jquery.js files? or move them to the bottom of the <body>? - Can you bundle some Bootstrap files to decrease the number of requests? To solve it you can do what @AndZyk told you. Use Critical to extract, minify and inline the critical css, and then use preload to load all the other CSS files. Also, maybe Optimize can solve the issue for you. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now