Page Load Speed issues - Minify CSS, Compress Images, Render Blocking JavaScript, CSS

[shags38]

Do you think that Image Handler will help?

I was wondering the same thing - the images that are issues according to a number page speed tests are those that are integrally a part of the template, logos and the slider images - so I am not sure how to have IH4 handle those images - it appears that IH4 only handles product images??

cheers,
Mike

[Design75]

Many thanks for your reply Design75 - Guess who did exactly that soon after posting - was early in the morning, hadn't yet had my second cup of coffee so brain still wasn't engaged

cheers,
Mike

Yeah, the answer may have been a bit lame, people tend to forget there is a big world with information outside this community.

[Nick1973]

Yeah, the answer may have been a bit lame, people tend to forget there is a big world with information outside this community.

You can use async for javascripts and media="screen" for stylesheets

It doesn't work for all of them but works for some. Also compressing all stylesheets into one doesn't always work due to the Zen Cart architecture.

This is what I suggest:

In templates/YOUR_TEMPLATE/common/html_header.php

Look for where it links to your stylesheets

For example:

while(list ($key, $value) = each($directory_array)) {    echo '<link rel="stylesheet" type="text/css" href="' . $template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css') . '/' . $value . '" />'."\n";  } 

and change it to:

while(list ($key, $value) = each($directory_array)) {    echo '<link media="screen" rel="stylesheet" type="text/css" href="' . $template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css') . '/' . $value . '" />'."\n";  } 

Note where it now says media="screen"

There is one entry for mobiles which I changed too where the styles aren't required for desktops or laptops:

$responsive_mobile = '<link rel="stylesheet" type="text/css" href="' . $template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css') . '/' . 'responsive_mobile.css' . '" 

changed to

$responsive_mobile = '<link rel="stylesheet" type="text/css" href="' . $template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css') . '/' . 'responsive_mobile.css' . '" media="(min-width: 53.333em)" 

media="(min-width: 53.333em)"

only renders the mobile stylesheet once the screensize reduces to 640px

Javascript is slightly different.

Look for where it says:

<script type="text/javascript"

and change it to:

<script async type="text/javascript"

I suggest testing as well, don't do this on a live site. AND BACKUP before you do the work. The results can be a little sketchy but you increase your page speed.

I also added into htaccess:

<IfModule mod_headers.c>      <FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf|svg)$">   Header set Cache-Control "max-age=84600, public"  </FilesMatch>  <FilesMatch "analytics\.(js)$">   Header set Cache-Control "max-age=31536000"  </FilesMatch>  <FilesMatch "stylesheet\.(css)$">   Header set Cache-Control "max-age=604800"  </FilesMatch>  <FilesMatch "jquery.mmenu.min.all\.(js)$">   Header set Cache-Control "max-age=31536000"  </FilesMatch>  <FilesMatch "responsive_mobile\.(css)$">   Header set Cache-Control "max-age=604800"  </FilesMatch>  <FilesMatch "jquery.mmenu.all\.(css)$">   Header set Cache-Control "max-age=604800"  </FilesMatch>  <FilesMatch "jquery.nivo.slider.pack\.(js)$">   Header set Cache-Control "max-age=31536000"  </FilesMatch>  <FilesMatch "stylesheet_colors\.(css)$">   Header set Cache-Control "max-age=604800"  </FilesMatch>  <FilesMatch "jscript_imagehover\.(js)$">   Header set Cache-Control "max-age=31536000"  </FilesMatch>  <FilesMatch "index_home\.(css)$">   Header set Cache-Control "max-age=604800"  </FilesMatch>  <FilesMatch "responsive\.(css)$">   Header set Cache-Control "max-age=604800"  </FilesMatch>  <FilesMatch "stylesheet_zen_colorbox\.(css)$">   Header set Cache-Control "max-age=31536000"  </FilesMatch>  <FilesMatch "jscript_matchHeight-min\.(js)$">   Header set Cache-Control "max-age=31536000"  </FilesMatch>  <FilesMatch "stylesheet_css_buttons\.(css)$">   Header set Cache-Control "max-age=31536000"  </FilesMatch>  <FilesMatch "stylesheet_flexible_footer_menu\.(css)$">   Header set Cache-Control "max-age=31536000"  </FilesMatch>  <FilesMatch "print_stylesheet\.(css)$">   Header set Cache-Control "max-age=31536000"  </FilesMatch>  <FilesMatch "jquery.mmenu.fixedelements.min\.(js)$">   Header set Cache-Control "max-age=31536000"  </FilesMatch>  <FilesMatch "style_imagehover\.(css)$">   Header set Cache-Control "max-age=31536000"  </FilesMatch>  <FilesMatch "p\.(css)$">   Header set Cache-Control "max-age=31536000"  </FilesMatch></IfModule>

And applied compression through CPANEL.

All of these combined, took my page speed up from around between 50% - 60% up to 85% - 98%

[Nick1973]

I also optimised a secondary set of images with a .webp extension. You will need JPEGS and PNG's as well as a fallback for browsers that can't render .webp images.

However to automate whether the browser sees the .webp image or the jpeg or png all you need to do is add:

<ifModule mod_rewrite.c>
  RewriteEngine On 
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_URI}  (?i)(.*)(\.jpe?g|\.png)$ 
  RewriteCond %{DOCUMENT_ROOT}%1.webp -f
  RewriteRule (?i)(.*)(\.jpe?g|\.png)$ %1\.webp [L,T=image/webp,R] 
</IfModule>

to images/.htaccess

and any other images directory (including sub directories) create a htaccess file with the above applied in it.

[Nick1973]

I also optimised a secondary set of images with a .webp extension. You will need JPEGS and PNG's as well as a fallback for browsers that can't render .webp images.

However to automate whether the browser sees the .webp image or the jpeg or png all you need to do is add:

<ifModule mod_rewrite.c>
  RewriteEngine On 
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_URI}  (?i)(.*)(\.jpe?g|\.png)$ 
  RewriteCond %{DOCUMENT_ROOT}%1.webp -f
  RewriteRule (?i)(.*)(\.jpe?g|\.png)$ %1\.webp [L,T=image/webp,R] 
</IfModule>

to images/.htaccess

and any other images directory (including sub directories) create a htaccess file with the above applied in it.

Correction:

<ifModule mod_rewrite.c>
  RewriteEngine On 
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_URI}  (?i)(.*)(\.jpe?g|\.png)$ 
  RewriteCond %{DOCUMENT_ROOT}%1.webp -f
  RewriteRule (?i)(.*)(\.jpe?g|\.png)$ %1\.webp [L,T=image/webp,R] 
</IfModule>

Should be

<ifModule mod_rewrite.c>
  RewriteEngine On 
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_URI}  (?i)(.*)(\.jpe?g|\.png)$ 
  RewriteCond %{DOCUMENT_ROOT}%1.webp -f
  RewriteRule (?i)(.*)(\.jpe?g|\.png)$ %1\.webp [L,T=image/webp,R] 
</IfModule>


<IfModule mod_headers.c>
  Header append Vary Accept env=REDIRECT_accept
</IfModule>


AddType image/webp .webp

[jasonshanks]

Correction:

<ifModule mod_rewrite.c>
  RewriteEngine On 
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_URI}  (?i)(.*)(\.jpe?g|\.png)$ 
  RewriteCond %{DOCUMENT_ROOT}%1.webp -f
  RewriteRule (?i)(.*)(\.jpe?g|\.png)$ %1\.webp [L,T=image/webp,R] 
</IfModule>

Should be

<ifModule mod_rewrite.c>
  RewriteEngine On 
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_URI}  (?i)(.*)(\.jpe?g|\.png)$ 
  RewriteCond %{DOCUMENT_ROOT}%1.webp -f
  RewriteRule (?i)(.*)(\.jpe?g|\.png)$ %1\.webp [L,T=image/webp,R] 
</IfModule>


<IfModule mod_headers.c>
  Header append Vary Accept env=REDIRECT_accept
</IfModule>


AddType image/webp .webp

Will this work with 1.5.5f ? I am trying to improve my page load speed in google insight.

Missingcord.com

[Nick1973]

It should do, I have improved the speed of some 1.5.5f sites using similar methods. It depends which template you are using.