Jump to content

How to defer JS and CSS on-load


Gauravk
 Share

Recommended Posts

Working on site speed optimization, found these remarks in almost all reports to defer 7 JS files and 7 CSS files.

Anyone can help adding asyc defer switch in below highlighted two lines.....? Thanks.

        {template="includeMeta" app="core" group="global" location="global" params=""}
        {template="includeCSS" app="core" group="global" location="global" params=""}
        {template="includeJS" if="theme.js_include != 'footer'" app="core" group="global" location="global" params=""}

        {template="favico" app="core" group="global" location="front" params=""}

Capture.JPG

Link to comment
Share on other sites

2 hours ago, Gauravk said:

Working on site speed optimization, found these remarks in almost all reports to defer 7 JS files and 7 CSS files.

So far there are only setting solution for JS.

Customization - Themes - Edit your theme - Custom->'Javascript include location -> Just before </body> tag' - Save

Link to comment
Share on other sites

Installing the google pagespeed mod for apache or nginx can improve the loading speed vastly.

It allows to deferr all the css and js without touching the templates. The only tricky part is to prohibit the editor script to be deferred.

 

Link to comment
Share on other sites

14 minutes ago, Gnuru said:

Installing the google pagespeed mod for apache or nginx can improve the loading speed vastly.

It allows to deferr all the css and js without touching the templates. The only tricky part is to prohibit the editor script to be deferred.

 

You can show the site where this mod work?

Link to comment
Share on other sites

Adlago: Moving the JS line didn't help much as homepage was fine but classifieds landing page hidden all images, may be my coder need some work around to test it again.

Gnuru: Like Adlago, I would love to see some pagespeed optimize IPB server to have more confidence in taking that big step.

Link to comment
Share on other sites

Actually I don't have a pagespeed optimize IPB server, I just use the mod_pagespeed for reducing the image sizes and experimenting with some other features.

It works pretty well for my site (www.teramed.de). You have to be careful concerning the server cpu load.

What I know, is that you can defer javascript, but it will brake the ck-editor.

Link to comment
Share on other sites

 

4 hours ago, Gauravk said:

OK, That's even better. Do you mind explaining how you using mod_pagespeed w/o installing on the server? So we can actually test it before implementing it. Thanks.

I am sorry, but you need to install mod_pagespeed to use it. I will be happy to show my configuration and the installation steps.

Link to comment
Share on other sites

7 hours ago, Gauravk said:

Adlago: Moving the JS line didn't help much as homepage was fine but classifieds landing page hidden all images, may be my coder need some work around to test it again.

JS before the /body tag is a small part of optimizing speed. I personally use this setting successfully. But before that, I load all resource and images in cookie free domain etc.

Speed optimization process involves a lot of analyzes and tests. It takes time, patience and a lot of reading of information.

Link to comment
Share on other sites

I installed the mod_pagespeed on my server today and tried several variation of filters making very very marginal difference here and there. Overall pagespeed score drop from 80-77 and finally given up for today after so many filters permutation and combinations and in end switch off all filters and let it run at default ON mode. Pingdom and yslow is also same as before.

Appreciate if someone have proven filters working for IPB.....!

 

Capture.JPG

Link to comment
Share on other sites

would like to know what your pagespeed configs are?

i seem to have similar issues with google reporting 8 css blocking scripts. 

purging pagesped cach directory i get 0 blocking scripts but after 12 hours i get 8 blocking scripts again

Link to comment
Share on other sites

Hi Maidos, I am not using any filters and kept at stock mode: ON. I tried with filters and it was not doing any benefit. 

Even the pagespeed score decreased from 80 -77 but I still like it with mod_pagespeed as it doesnt hold the page until full load so it gives a slightly better user experience when user sees that something appear in 1-2 secs and then page fully loaded at around 3 ish second from Dubai.

Where is the pagespeed cache file located, may be I can try that today and also share what all filters you are using? 

Link to comment
Share on other sites

  • Management

You can't really defer CSS loading as it would show a FOUC (flash of unstyled content) before rendering the page. Some of our JS needs to execute before the page is rendered to hide elements too otherwise there is a risk that the page changes quickly after loading. There is a theme setting to defer loading the JS if you need it.

Link to comment
Share on other sites

heres my pagespeed config.

http://www.textsnip.com/h3jis1

takes average 2.8 seconds to load my front page

pagespeed cache are located under /shm/ where my rams are being stored for faster performance

hm regarding css blocking script i read this on debug, think i need to adjust my config further

<!--deadline_exceeded--><!--deadline_exceeded for filter CssFilter--><!--deadline_exceeded--><!--deadline_exceeded for filter CacheExtender--><!--deadline_exceeded for filter CssCombine-->

@Makoto if u have time could you check if my configs are ok? :D

Edited by maidos
Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...