JavaScript and CSS content above the fold that block the view, delete,

[peter4661]

Dear Prestashoppers, Our site is on Prestashop 1.6.0.9, default theme. 

Testing our site with Google pagespeed we have this warning: 
' JavaScript and CSS content above the fold that block the view, delete'. The warning is related to items below.  

 

We experimented with performance setting in backoffice. ( ccc on/off, cleared smarty cache, regenerated .htaccess  )  but could not get the desired results.  

 

Backoffice setting "defer Java to the end"    on or off does not make difference: warning stays....

Spent many hours exploring the forum to find the answer to solve this ....  

• What should we test to find the issue ?

our URL : www.derks-wielersport.nl

 

 

https://www.derks-wielersport.nl/themes/default-bootstrap/cache/v_648_1371fc95776a82eb0e209171a65b7838.js

 

https://www.derks-wielersport.nl/themes/default-bootstrap/cache/v_909_59872eb855948a3a46ede80d5ceea97e_all.css

Edited December 22, 2014 by peter4661 (see edit history)

[peter4661]

Have you use ## EXPIRES CACHING ## concept of htaccess file to improve the site speed.

If not please try it. 

• Select your “.htaccess” file and “edit.”
• Add the following code into the file and save it.

ExpiresActive On

ExpiresByType image/jpg "access 1 year"

ExpiresByType image/jpeg "access 1 year"

ExpiresByType image/gif "access 1 year"

ExpiresByType image/png "access 1 year"

ExpiresByType text/css "access 1 month"

ExpiresByType application/pdf "access 1 month"

ExpiresByType text/x-javascript "access 1 month"

ExpiresByType application/x-shockwave-flash "access 1 month"

ExpiresByType image/x-icon "access 1 year"

ExpiresDefault "access 2 days"

 

Thanks

Harsh Kumar

[email protected]

 

 

 

Heya Harsh Kumar,

 

Thank you for thinking along with me about this subject.

 

I checked htaccess. It contains following Expire instructions. I replaced them with your proposal. Unfortunately this did not make the difference. Decided to put the initial instructions back

 

 

 

 

 

 

 

<IfModule mod_expires.c>

ExpiresActive On

ExpiresByType image/gif "access plus 1 month"

ExpiresByType image/jpeg "access plus 1 month"

ExpiresByType image/png "access plus 1 month"

ExpiresByType text/css "access plus 1 week"

ExpiresByType text/javascript "access plus 1 week"

ExpiresByType application/javascript "access plus 1 week"

ExpiresByType application/x-javascript "access plus 1 week"

ExpiresByType image/x-icon "access plus 1 year"

ExpiresByType image/svg+xml "access plus 1 year"

ExpiresByType image/vnd.microsoft.icon "access plus 1 year"

ExpiresByType application/font-woff "access plus 1 year"

ExpiresByType application/x-font-woff "access plus 1 year"

ExpiresByType application/vnd.ms-fontobject "access plus 1 year"

ExpiresByType font/opentype "access plus 1 year"

ExpiresByType font/ttf "access plus 1 year"

ExpiresByType font/otf "access plus 1 year"

ExpiresByType application/x-font-ttf "access plus 1 year"

ExpiresByType application/x-font-otf "access plus 1 year"

</IfModule>

[peter4661]

hello, yes these generally use to remove the cache after a time,

The issue is not a big issue, this is generally remove by put the css and js file on footer instead of header.

But in prestashop this is not so easy.

 

Not sure but as a progremmers mind you can try one more thing. download both the files for which the warning are showing. and then remove it form live server.

Then check, if some thing goes wrong then upload the files, This is a tricky way, but may solve your issue. 

 

Thanks

Harsh Kumar

[email protected]

 

 

Followed your advice and removed both files from the server. Checked front ( now style was missing )   refreshed the page. Then O.K.  Tested the page with Pagespeed insights.....   js and CSS were there again.  Prestashop had simply created new files in cache. 

 

I understand our version Prestashop 1.6.0.9 has built in feature to put JS  (and CSS ?)  in footer.

Edited December 22, 2014 by peter4661 (see edit history)

[El Patron]

in 1.6.0.9 back office-->advanced parms-->performance

 

there you can tell PrestaShop to load javascript bottom.

 

you can not however move .css to bottom only ccc it.