The optimizations that pagespeed are talking about are loading the javascript async rather than as render blocking in the head of the page.
Doing this depends on if you have any inline scripts anywhere which depend on your client dependcy scripts? if not you can add an html attribute object with async="async" when setting the scripts as required in client dependency.
However, lazy loading all of your CSS is bad - as there will be a noticeable "flick" from content loading to styles loading. So the approach you need to take is to prioritize the above fold CSS and inline these styles in your head (just enough for the page to look pretty) and then lazy load the rest.
This entire process will normally mean re-engineering your stylesheets (if not revising your entire approach to styling) and in my oppinion the user benefits are very limited.
Be careful you will find yourself spending hours chasing pagespeed optimization with very little end user benefit!
ClientDependency JavaScript and CSS optimization's proposal from Google PageSpeed Insights
Use: Umbraco version 7.2.8 assembly: 1.0.5675.23466
Google PageSpeed Insights tool: https://developers.google.com/speed/pagespeed/insights/
When I use ClientDependency, it's work as expected, but I got a note on this 3 lines (2 CSS and 1 JavaScript):
Google give me these two links for optimization:
Remove Render-Blocking JavaScript (Make JavaScript Asynchronous - async) https://developers.google.com/speed/docs/insights/BlockingJS
Optimize CSS Delivery https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery
Are there some known configuration for ClientDependency regarding improvement of the optimization?
Hi Tom.
The optimizations that pagespeed are talking about are loading the javascript async rather than as render blocking in the head of the page.
Doing this depends on if you have any inline scripts anywhere which depend on your client dependcy scripts? if not you can add an html attribute object with async="async" when setting the scripts as required in client dependency.
The CSS is a whole other issue - you need to lazy load the CSS basically - there are lazy loaders for CSS for example http://www.giftofspeed.com/defer-loading-css/
However, lazy loading all of your CSS is bad - as there will be a noticeable "flick" from content loading to styles loading. So the approach you need to take is to prioritize the above fold CSS and inline these styles in your head (just enough for the page to look pretty) and then lazy load the rest.
This entire process will normally mean re-engineering your stylesheets (if not revising your entire approach to styling) and in my oppinion the user benefits are very limited.
Be careful you will find yourself spending hours chasing pagespeed optimization with very little end user benefit!
Thanks
Carl
is working on a reply...