Eliminate render-blocking resources

Discussion regarding Joomla! 3.x Performance issues.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10.
Post Reply
Forsh
Joomla! Explorer
Joomla! Explorer
Posts: 299
Joined: Sat Aug 20, 2005 3:05 pm
Location: 1135 N Broadway #213 Denver, CO 80203
Contact:

Eliminate render-blocking resources

Post by Forsh » Fri Sep 18, 2020 5:34 am

I am testing my website on Google Page Speed tool and one of the recommendations it's giving me is to "Eliminate render-blocking resources" and that's in the attached JPG. Is there a plugin or setting inside of Joomla that could fix this? It's the number one issue the tool is telling me to fix and the file it's talking about is at the bottom, the CSS file.
eliminate-render-blocking-resources.png
You do not have the required permissions to view the files attached to this post.

waarnemer
Joomla! Hero
Joomla! Hero
Posts: 2870
Joined: Sun May 04, 2008 12:37 pm

Re: Eliminate render-blocking resources

Post by waarnemer » Fri Sep 18, 2020 10:30 am

Google page speed gives automated advice without taking other settings into account.
Google page speed "sees" a site as static as it receives a page.

Interesting though that when I check your page in the same test tool, this particular "issue" seems solved.

Your link to the css file is in between the <noscript></noscript> tags so if my browser doesn't support scripts I get that one... if I do support I get it injected into the head through the bottom .js
Exactly same css...

Jokingly acccording to page speed you need to minify your minified css file :).. I mean.. don't go hunting all advices from Page Speed.. check against all other improvements done and also consider that all that is cached in a browser doesn't need to get requested again.

All you put in the rendered page directly has usually no to little cache as the PHP rendered page is dynamic.

joni londo
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Mon Sep 28, 2020 4:44 pm

Re: Eliminate render-blocking resources

Post by joni londo » Mon Sep 28, 2020 5:13 pm

try use defer attribute to the tag
example : <link rel="stylesheet" href="styles.css" defer>

User avatar
sozzled
Joomla! Exemplar
Joomla! Exemplar
Posts: 9861
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia

Re: Eliminate render-blocking resources

Post by sozzled » Mon Sep 28, 2020 7:40 pm

joni londo wrote:
Mon Sep 28, 2020 5:13 pm
Try use defer attribute to the tag
example : <link rel="stylesheet" href="styles.css" defer>
I've never heard of a "defer" attribute used with CSS. I have seen the defer attribute used with script tags. One way to defer loading CSS below the fold is to use the following syntax:

Code: Select all

<link rel="preload" as="style" href='mycssfile.css'>
There are other ways that involve using Javascript to defer loading the CSS.

The syntax

Code: Select all

<link rel="preload" as="style" href='mycssfile.css'>
can also be used with other content types (e.g. image, video, document). See https://developer.mozilla.org/en-US/doc ... ng_content

I don't know if all browsers support this tag.
https://www.kuneze.com/blog
“If you think I’m wrong then say, ‘I think you’re wrong.’ If you say ‘You’re wrong!’, how do you know?” :)

helpwithjoomla
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 106
Joined: Sat Sep 21, 2019 7:29 pm
Contact:

Re: Eliminate render-blocking resources

Post by helpwithjoomla » Wed Oct 28, 2020 9:46 pm

As mentioned in the Page Speed recommendations you could add the css inline in the document rather than calling in a separate css file.

You basically take all the css out of the css file and put it in the head of your document(s).

We've had good results with this approach.
Joomla Developers Available To Help With Joomla!
https://www.helpwithjoomla.com

waarnemer
Joomla! Hero
Joomla! Hero
Posts: 2870
Joined: Sun May 04, 2008 12:37 pm

Re: Eliminate render-blocking resources

Post by waarnemer » Wed Oct 28, 2020 10:44 pm

there is no gain from adding all your css in the head of your document as it will add to the payload each call to a page (since virtually every page render is dynamic there is no browser cache on that)

same applies to optimizers that press all page css and js files in one single cssand js.. server resource heavy and each css and js a page is different.

"advice" from google page speed and alikes is not always good and hardly ever best advice.
it merely hints to possible solutions of problems you may have.. but unfortunately also offers solutions to problems you don't have.

page speed and alikes do measure initial first load of a page without browser cache.
in 999 out of 1000 they are testing on some server far far far away from your target audience computers...


Post Reply

Return to “Performance - Joomla! 3.x”