Printable View
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??Quote:
Originally Posted by lat9
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. :hug:Quote:
Originally Posted by shags38
You can use async for javascripts and media="screen" for stylesheetsQuote:
Originally Posted by Design75
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:
and change it to:PHP Code: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"; }
Note where it now says media="screen"PHP Code: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"; }
There is one entry for mobiles which I changed too where the styles aren't required for desktops or laptops:
changed toPHP Code:$responsive_mobile = '<link rel="stylesheet" type="text/css" href="' . $template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css') . '/' . 'responsive_mobile.css' . '"
PHP Code:$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)"
only renders the mobile stylesheet once the screensize reduces to 640pxHTML Code:media="(min-width: 53.333em)"
Javascript is slightly different.
Look for where it says:
and change it to:HTML Code:<script 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.HTML Code:<script async type="text/javascript"
I also added into htaccess:
And applied compression through CPANEL.HTML Code:<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>
All of these combined, took my page speed up from around between 50% - 60% up to 85% - 98%
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:
to images/.htaccessCode:<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>
and any other images directory (including sub directories) create a htaccess file with the above applied in it.
Correction:Quote:
Originally Posted by Nick1973
Should beCode:<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>
Code:<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.Quote:
Originally Posted by Nick1973
Missingcord.com
It should do, I have improved the speed of some 1.5.5f sites using similar methods. It depends which template you are using.