Advertisement

Defer some part of template.css

Discussion regarding Joomla! 5.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
pl71
Joomla! Intern
Joomla! Intern
Posts: 63
Joined: Tue Mar 18, 2014 11:24 am

Defer some part of template.css

Post by pl71 » Fri Apr 05, 2024 7:18 pm

Hi! Having done some tests with PageSpeed and improving some items, I stuck with the 'template.min.css' of Cassiopeia. Can this file be split in 2 for better performance, notably FCP and LCP? Did someone try this? Of course, a Joomla update would interfere with this hack, but anyway... Just curious.

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

Re: Defer some part of template.css

Post by helpwithjoomla » Thu Apr 25, 2024 5:36 pm

What is PageSpeed telling you about that file? What is your rationale for splitting the file?
Joomla Developers Available To Help With Joomla!
https://www.helpwithjoomla.com

pl71
Joomla! Intern
Joomla! Intern
Posts: 63
Joined: Tue Mar 18, 2014 11:24 am

Re: Defer some part of template.css

Post by pl71 » Mon Jan 20, 2025 4:10 pm

PageSpeed is telling me, that "template.min.css" has abt 62 kB potential savings.
"Reduce unused rules from stylesheets and defer CSS not used for above-the-fold content to decrease bytes consumed by network activity. Learn how to reduce unused CSS."

User avatar
stormbyte
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 104
Joined: Tue Mar 03, 2015 1:16 pm
Location: paris
Contact:

Re: Defer some part of template.css

Post by stormbyte » Wed Jan 22, 2025 8:24 am

IMY do not touch your file, no need to split it may be counter productive as it extend requests and it's bad idea regarding PageSpeed.

There's some tools able to analyse real elements taken from your stylesheets, and also list the other not used you can remove BUT when using generic template it's complicated as some elements may be NOT used on one page, but used on another one... This analysis approach is definitely great when you're developing your own CSS template.

Regarding the defer above the fold you can easily use this kind of code:

Code: Select all

<link rel="preload" href="mytemplate.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="mytemplate.css"></noscript>
You tell the browser to defer the load until the 'onload', and if script is disabled then browser use the second direct link.

Hope it helps ;)
Kind Regards, Committed to Joomla and professional cybersecurity!
Cybersecurity Services: https://www.akaoma.com - Protect your business from cyber threats
CVE Vulnerabilities: https://cve.akaoma.com - Real-time Joomla vulnerability tracking

Advertisement

Post Reply

Return to “Performance - Joomla! 5.x”