Enable GZIP Compression and Browser Caching

[curtdonohue]

Hi all,

With help from Nethercott Constructions, I’ve created a two-part video tutorial on GZIP compression and browser caching that explains how to do the following things to help make your store run faster and provide a better customer experience:

1. Create a .htaccess file and upload it to your web host
2. Enable GZIP compression for versions 1.3 and 1.4
3. Enable browser caching for versions 1.3 and 1.4
4. Enable ETags for versions 1.3 and 1.4

You can view the video at http://www.prestatraining.com/gzip-compression-browser-caching/.

[Mallee Boy]

Curt,

Great Video's. Brilliantly done. I might say though, that they are long and I wonder if they could be reduced (or split) so that you can get to the information you want a little easier. I wasn't able to speed ahead to the information I wanted and just had to play it out until you got to the part I needed.

Never the less, they are really well done. You're gifted.

[curtdonohue]

David,

Thanks for that great feedback. I'm considering how I can ease that pain.

I'm going to try to add a table of contents through my Camtasia Studio software to that video. The issue is that the video won't fit on the page anymore because it is too wide. I'll make a post here after I've modified and reproduced the GZIP video to see what people think about the changes.

I really appreciate you taking the time to provide helpful comments!

[Mallee Boy]

Curt,

Are you able to explain what the caching by file system or memcached does. Do I need to set up anything on my server for caching with file system? What depth do i set it to and what will it accomplish?

Also, I used gzip in 1.3.3 with great success but get an error when using it with 1.4.1. The error prevented check out by stating that their was a problem with compression. When i removed gzip it all worked fine.

[curtdonohue]

David,

I can't say I have a good handle on Memcached and File System Caching beyond what I covered in the video because I am not able to use either one of them. I have however found out a little more information since the video was published due to visits with Bluehost and some reading on the subject.

I found out that it is unlikely a shared host such as Bluehost or Hostgator (my two favorites) can do either Memcached or File System caching. I know that BlueHost cannot do either because they told me so. I haven't confirmed this with Hostgator yet. It is my understanding that the very nature of shared hosting makes hosts disinclined to create special amounts of memory (Memcached) or disk space (File System) available.

The Memcached and File System options would most likely require at least a Virtual Private Server and possibly a dedicated server, depending on the host. Only the host can tell you what they can and cannot do. Moving up to this level of hosting is much more expensive than shared hosting and probably unnecessary for the majority of PrestaShop users since most users have very small shops and relatively low traffic. For the majority of people, Memcached and File System Caching would have little to no noticeable benefit anyway.

If you are able to use File System caching, however, it is my understanding that you do not want to increase the directory level depth, unless someone forces your to (your host). Keep the directory level at 1. I guess, it gets slower the deeper you go. Why go deeper anyway if there isn't a reason to?

Regarding your issue with GZIP and 1.4, I'm not sure what to say. Maybe some other folks can comment on this and help us both understand it better. Are you using the default PrestaShop them, or a customized theme? Did you have problems with GZIP on earlier versions of 1.4.x, or just 1.4.1? For instance, did you have issues with 1.4.0.15 or 1.4.0.17?

[Mallee Boy]

Curt, thanks for your reply. Gzip worked well under 1.3.3 for me. All I have done is put it in the header of 1.4.1 using default PS theme and that is when i get an error which says that I have a compression problem. The error appears when trying to load paypal during checkout.

I will leave Memcached and caching for now. I have a permanent warning on my performance page about Memcached and I suspect (hope) it is related to this caching option and unimportant.

[curtdonohue]

David,

When you say you "put it in the header of 1.4.1," you mean you did that by generating a .htaccess file in the back office and checked the Optimization check box, right?

[Mallee Boy]

Dear Happy Curt,

Yes i have generated an .htaccess and ticked optimization in the generator tab of the BO. But I also added this to the header.php in the root directory: <? ob_start("ob_gzhandler"); ?> 

Adding this is what I have done in 1.3.3 (which is my live site). I have not gone live with 1.4.1 and wont until I iron out the little bugs.

[curtdonohue]

David,

I haven't seen any literature where you need to add anything to your header. All you should have to do is include the GZIP commands, per the video in your 1.3.3 .htaccess files. You will have to do that manually in 1.3.x. It's nice that 1.4.x does it for you. I wonder if putting that code into your header is what's causing your issue?

[Mallee Boy]

Curt,

I was causing the issue, and so I took it out. I didn't realise that it was being done automatically by 1.4.1. That is good news. Thanks again for your help, and for your video's.

Great Stuff.

[curtdonohue]

No problem David. I'm glad it was that easy:)

[Mallee Boy]

Curt,

When you are efficient at something, you tend to get asked a lot of questions. Here is one last one from me. Are their translation files in my server folders that I can edit manually? I can't see any for front office expressions. I know I can edit tpl files, but each time I upgrade i have to do this all over again. i know that their is the translations tab in teh BO, but my server wont allow so many form fields to be opened.

I am asking my host provider to fix this, but in case they don't, being able to edit the translation files directly through my server folders or database would at least mean I can keep them for each new upgrade and not have to manually edit tpl files.

Translations have never worked well for me (referring to the BO Tab). I only use English, so editing them directly would be fairly straight forward - if only i knew where those files were.

[curtdonohue]

David,

If at all possible, I would avoid directly editing files.

If I understand your question correctly, you want to change how something reads by creating a translation (different words) for it. For instance, you might have a spot in your front office that says "There are no products." Maybe you want to change that to say "Choose a category below." Is this what you mean?

Even if it isn't, I'm pretty sure checking into the Translation subtab is what you want to do. You can find a good explanation of this process by watching my video at http://www.prestatraining.com/remove-there-are-no-products-text/. That video is only 5 minutes so it shouldn't be too painful.

Once you change a translation and save it, you can export it prior to an update and then import it after the update. That way you keep all your translations. This process is described in the PrestaShop Update guide here: http://www.prestashop.com/download/guide_MAJ_PS14_en.pdf. You will see this referenced on page-2 in the Translations section.

I think once you see the power of the Translations subtab, you should never have to modify a file again. I'm not positive, but I think you can change any text you see in the Front Office and the Back Office by using the Translations subtab.

In your post above, it also appears that you may already know what I just wrote, but that your Translation subtab isn't working. Is that correct? If so, I would do something about that versus manually editing files. It's just too difficult to keep track of all those changes, in my opinion.

If this isn't what you meant, let me know.

[Mallee Boy]

Curt,

Everything you say is true and I agree. You have understood my question. However, The problem is that I have never been able to use the translation tab successfully. Usually because though it said "Successful" it actually didn't change anything in the front end.

The problem is further complicated in 1.4.1 because now I am told, when I select, "front office translations", that,

Warning, your hosting provider is using the suhosin patch for PHP, which limit the maximum number of fields to post in a form :
200 for suhosin.post.max_vars.
200 for suhosin.request.max_vars.
Please ask your hosting provider to increase the suhosin post and request limit to 820 at least. or edit the translation file manually.

I am asking my host to do whatever they need to do to fix this, but if they can't, then i need a way to edit my translation files for the front office directly. Though this is not ideal, i can still export these files when doing an upgrade (or so I think).

[curtdonohue]

David,

Bummer. Who is your host?

Sorry if this sounds dense, because I think you were saying this above, but can you modify the translation files for the language you want to change just by opening the files in an editor, modifying them, then saving those files?

For instance, go to translations/en/admin.php and then change the first translation there, which is:

$_LANGADM['AdminAccess9d3aff6bea8ffbe99b0dd0538fe143ff'] = 'Profile updated';

I'm assuming you can change the 'Profile updated' to something else, then save it and that is the phrase that will be used. Is that was you were saying earlier?

[Mallee Boy]

Yes, you are answering my question, which was, "where are those files"? I see the admin.php, for example (along with errors, fileds, pdf, etc), but it does not contain front office expressions such as "log in", "comments", "more info", "already registered", etc, etc. It only contains BO expressions.

Where are the front office expressions kept on my server? (this is my original question).

By the way, just as an experiment, i tried to alter one of the expressions in the admin.php file. I changed,
"$_LANGADM['AdminImporta51d7d2f3e952dfcf1e12ae572d7b337'] = 'Meta-title';"
to
$_LANGADM['AdminImporta51d7d2f3e952dfcf1e12ae572d7b337'] = 'Meta-grub';

But it did not change in the product page of the BO, so I am not sure that it will work even if I do find my front office expressions. Unless it is a permissions thing.

[curtdonohue]

Ok, I understand now. Unfortunately, I don't know where the FO translations are if they aren't part of those files.

Just to be sure that BO translations haven't actually changed, you might want to be sure you've cleared cookies and cache, reload the page, then check again. If that doesn't work, I don't know what to do, yet.

[Mallee Boy]

Thanks Curt. You have been very helpful and i do appreciate your time. I will clear cookies, etc, and continue my hunt for those front office expressions. If you find them first, be sure to let me know. Surely they must exist!

[Hazlet]

Hi, any solution for previus versions of prestashop (1.2.4) ?

Thanks

[pshop_newb]

I wouldn't listen to people without technical experience. Shared hosting very rarely has mod_gzip or mod_deflate enabled (at the low prices people pay) which is what compresses the page content and shrinks your site. Using these apache modules is possible via .htaccess directives. VPS and dedicated hosts may not even have them either but you can at least install them yourself or have them installed. It adds server load because the pages are compressed over and over again. using ob_gzhandler via php is a sure way to compress content without these modules being present (ie. in a shared hosting environment). But you suffer the same drawback, server load. There are also tricks to use php to compress JS and CSS and send them to the clients instead of using .htaccess because it requires less server load because you can compress them once or every set interval to refresh them so the server does a lot less work over time. .htaccess directives are usually accompanied by conditional checks, like " COMPRESS MY STUFF " which says if the compressing module exists please use my directives to compress the content I require. So if the module isn't installed you will never know because it just won't do anything. You need online tools to check your site, or firefox extensions like firebug. Without using conditional directives and the module wasn't installed I would assume you would get server errors or your page may not load.

I'm installing prestashop on a VPS soon and I will be tuning the server to my liking and removing unnecessary services to free up memory. Than installing performance modules, memcache, and a range of other things to speed up a site.

It's wierd seeing people writing technical documentation that don't seem to have programming or technical experience...I don't want to come off as rude but I saw a tutorial video about performance where they just didn't know or have any information about memcache, media servers and subdomains, etc...which isn't too assuring. At least if they didn't know about using it in prestashop they should be aware of the information and fundamentals....

Main thing to understand is that when using .htaccess you require many apache modules to be installed to perform the tasks they are talking about. Most shared hosting has re-write, expires, header modules to perform the actions we would need for performance but I wouldn't say all of them do b/c I don't know what is the default install. So it is always good to check yslow or pagespeed to see you are making use of some practices being mentioned here. Also, to be honest I wasn't impressed with prestashop htaccess creation because it used deflate when a lot of people could be using gzip (two different modules), and I found it lacking a lot of information I ended up adding myself. Just an FYI

[Mallee Boy]

Pshop_newb,

Thanks for your post, but I am not sure what you are trying to convey, or what practical information you are trying to give. While not all prestashop users have technical experience they do have practical experience. They know Prestashop inside out through testing and configuring in the real world.

Clear advice and instruction is valued by all. I don't know that anyone in this thread is using shared hosting.

If you have some practical and easy to understand tips on how to speed up our store, I would be very interested to hear them.

[Mallee Boy]

Hi, any solution for previus versions of prestashop (1.2.4) ?

Thanks

Hazlet, Yes, the new 1.4.2 runs like a dream and I recommend yo upgrade.

[pshop_newb]

I'm just trying to convey that using .htaccess to speed up your site won't do anything unless the apache modules are installed on the server. VPS and Dedicated hosting gives you the opportunity to install them yourself. Most of the modules needed are installed by default but I don't think deflate and/or gzip is by default. It is not possible to gzip your site using .htaccess without the apache module mod_gzip or mod_deflate installed. You need to ask your hosting provider if they are installed, if they can be installed for free, or look up instructions on how to do so.

Also download the addon firebug for firefox, yslow for firefox, and pagespeed for firefox. Using firefox and these addons you can profile your website and see if you are following all the guidelines for speed and optimization recommended by professionals. You can also see if your web page is being gzipped properly, you can see how many requests are being made by clients, how big images are, and etc. Another good tool is "smushit" by yahoo which will compress and optimize images if they are not already. This tool is meant to be used to compress your images and than upload them to the server (like all the images used in your CSS style sheets). The key things in website speed are less http requests, small images, and paralell downloads. Yahoo and google also have a series of instructions for webpage speed which are very good and apply to everyone not just prestashop.

I will be configuring a VPS, installing and configuring several apache modules, installing and configuring memcache, configuring query caching, tuning the apache server, and using all of the prestashop performance options in the next couple weeks. I can post detailed instructions if that helps.

A final note is for those using VPS or dedicated that GUI's kill your RAM. In order to interface you are likely running CPANEL or various flavors of it which eats up memory (when you rarely need it) and services like TOMCAT or other things. If you know what you are doing you can use SSH and a terminal to kill these processes and run them only when you need access to them, freeing up a lot of memory for your website to run......dynamic websites can definitely use the boost.

[Mallee Boy]

Yes, it would be very useful if you could post your results and recommendations in this thread. Thanks Pshop!

[ALMAJ]

How can I enable compression to themes/default/cache?
this is what i get from PageSpeed Insights and gtmetrix.com:

Compressing the following resources with gzip could reduce their transfer size by 247.8KiB (73% reduction).

• Compressing http://www.tekcenter...894ca5515689.jscould save 152.2KiB (69% reduction).
• Compressinghttp://www.tekcenter...b9d80ce_all.css could save 80.7KiB (82% reduction).
• Compressing http://www.tekcenter...pluginDetect.js could save 14.9KiB (65% reduction).

My prestashop version is: 1.5.6.2 (Default theme)

 

my current .htaccess code is this:

<IfModule mod_rewrite.c>
<IfModule mod_env.c>
SetEnv HTTP_MOD_REWRITE On
</IfModule>

RewriteEngine on
RewriteCond %{HTTP_HOST} ^www.tekcenter.pt$
RewriteRule . - [E=REWRITEBASE:/store/]
RewriteRule ^api/?(.*)$ %{ENV:REWRITEBASE}webservice/dispatcher.php?url= [QSA,L]

# Images
RewriteCond %{HTTP_HOST} ^www.tekcenter.pt$
RewriteRule ^([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p//jpg [L]
RewriteCond %{HTTP_HOST} ^www.tekcenter.pt$
RewriteRule ^([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p///$1jpg [L]
RewriteCond %{HTTP_HOST} ^www.tekcenter.pt$
RewriteRule ^([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p///$3/$1jpg [L]
RewriteCond %{HTTP_HOST} ^www.tekcenter.pt$
RewriteRule ^([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p///$3/$4/$1jpg [L]
RewriteCond %{HTTP_HOST} ^www.tekcenter.pt$
RewriteRule ^([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p///$3/$4/$5/$1jpg [L]
RewriteCond %{HTTP_HOST} ^www.tekcenter.pt$
RewriteRule ^([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p///$3/$4/$5/$6/$1jpg [L]
RewriteCond %{HTTP_HOST} ^www.tekcenter.pt$
RewriteRule ^([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p///$3/$4/$5/$6/$7/$1jpg [L]
RewriteCond %{HTTP_HOST} ^www.tekcenter.pt$
RewriteRule ^([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p///$3/$4/$5/$6/$7/$8/$1jpg [L]
RewriteCond %{HTTP_HOST} ^www.tekcenter.pt$
RewriteRule ^c/([0-9]+)(\-[\.*_a-zA-Z0-9-]*)(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/c/jpg [L]
RewriteCond %{HTTP_HOST} ^www.tekcenter.pt$
RewriteRule ^c/([a-zA-Z_-]+)(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/c/jpg [L]
# AlphaImageLoader for IE and fancybox
RewriteCond %{HTTP_HOST} ^www.tekcenter.pt$
RewriteRule ^images_ie/?([^/]+)\.(jpe?g|png|gif)$ js/jquery/plugins/fancybox/images/ [L]

# Dispatcher
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteCond %{HTTP_HOST} ^www.tekcenter.pt$
RewriteRule ^.*$ - [NC,L]
RewriteCond %{HTTP_HOST} ^www.tekcenter.pt$
RewriteRule ^.*$ %{ENV:REWRITEBASE}index.php [NC,L]
</IfModule>


<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"
</IfModule>


FileETag INode MTime Size
<IfModule mod_deflate.c>
    <IfModule mod_filter.c>
        AddOutputFilterByType DEFLATE text/html text/css text/javascript application/javascript application/x-javascript
    </IfModule>
</IfModule> 

Best regards.

Edited February 25, 2014 by majority (see edit history)