PrestaShop how to use .htaccess to speed up your site

Website speed is one of the most important technical SEO factors. If your website is slow it does not matter how nice it is people won’t like it, and it will eat up your crawl budget. I have not even mentioned it as a ranking factor.

Leverage Browser Caching

One of the easiest ways to increase site speed and reduce server load is to leverage browser caching. Browser caching stores resources from your website page on a visitor’s computer. This allows the cached copy of the image or other type of file to be pulled from the visitor’s computer saving bandwidth and server load when they visit another page or return to your site later.

There are two basic ways to set up browser caching. The first step is to use ExpiresByType to set the cache timeframe for each resource type. The second is to use the Cache-Control header.

ExpiresByType

To leverage browser caching using this method you can simply use ExpiresByType followed by the resource type and the cache time period.

##### Optimize default expiration time - BEGIN
<IfModule mod_expires.c>
    ## Enable expiration control
    ExpiresActive On

    ## CSS and JS expiration: 1 week after request
    ExpiresByType text/css "now plus 1 week"
    ExpiresByType application/javascript "now plus 1 week"
    ExpiresByType application/x-javascript "now plus 1 week"

    ## Image files expiration: 1 month after request
    ExpiresByType image/bmp "now plus 1 month"
    ExpiresByType image/gif "now plus 1 month"
    ExpiresByType image/jpeg "now plus 1 month"
    ExpiresByType image/jp2 "now plus 1 month"
    ExpiresByType image/pipeg "now plus 1 month"
    ExpiresByType image/png "now plus 1 month"
    ExpiresByType image/svg+xml "now plus 1 month"
    ExpiresByType image/tiff "now plus 1 month"
    ExpiresByType image/x-icon "now plus 1 month"
    ExpiresByType image/ico "now plus 1 month"
    ExpiresByType image/icon "now plus 1 month"
    ExpiresByType text/ico "now plus 1 month"
    ExpiresByType application/ico "now plus 1 month"
    ExpiresByType image/vnd.wap.wbmp "now plus 1 month"

    ## Font files expiration: 1 week after request
    ExpiresByType application/x-font-ttf "now plus 1 week"
    ExpiresByType application/x-font-opentype "now plus 1 week"
    ExpiresByType application/x-font-woff "now plus 1 week"
    ExpiresByType font/woff2 "now plus 1 week"
    ExpiresByType image/svg+xml "now plus 1 week"

    ## Audio files expiration: 1 month after request
    ExpiresByType audio/ogg "now plus 1 month"
    ExpiresByType application/ogg "now plus 1 month"
    ExpiresByType audio/basic "now plus 1 month"
    ExpiresByType audio/mid "now plus 1 month"
    ExpiresByType audio/midi "now plus 1 month"
    ExpiresByType audio/mpeg "now plus 1 month"
    ExpiresByType audio/mp3 "now plus 1 month"
    ExpiresByType audio/x-aiff "now plus 1 month"
    ExpiresByType audio/x-mpegurl "now plus 1 month"
    ExpiresByType audio/x-pn-realaudio "now plus 1 month"
    ExpiresByType audio/x-wav "now plus 1 month"

    ## Movie files expiration: 1 month after request
    ExpiresByType application/x-shockwave-flash "now plus 1 month"
    ExpiresByType x-world/x-vrml "now plus 1 month"
    ExpiresByType video/x-msvideo "now plus 1 month"
    ExpiresByType video/mpeg "now plus 1 month"
    ExpiresByType video/mp4 "now plus 1 month"
    ExpiresByType video/quicktime "now plus 1 month"
    ExpiresByType video/x-la-asf "now plus 1 month"
    ExpiresByType video/x-ms-asf "now plus 1 month"
</IfModule>
##### Optimize default expiration time - END

Let’s be honest if you are serving a application/x-shockwave-flash file you probably have more problems than just caching. But now, you know how to cache it… so that is something.

I have included some resource types here that I really hope you are not using. You probably know what they are.

The timeframe tells the visitor’s browser how long to use the locally cached copy of the resource. You can set it to your preferred time. The most common are "now plus 1 day", "now plus 1 week", "now plus 1 month", "now plus 1 year". You can also use access instead of now plus.

Cache-Control

The second method is to use the Header directive to declare a custom header for the resource. As you can tell I am a fan of the Header directive.

To set the Cache-Control HTTP header you would use something like this.

##### 1 Month for most static resources
<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">
    Header set Cache-Control "max-age=2592000, public"
</filesMatch>

As you can see this is a more condensed method.

The max-age=2592000 tells the browser how long to cache the file in seconds. 2592000 is about one month.

Compress your site

Another way you can speed up your site is to make it smaller. Yes, you can reduce image size, file size, and file quantity. Something I highly recommend. You can also compress the files you send to the client browser. This allows your site to transfer fewer data faster.

Enabling gzip via the .htaccess file is not hard. You can do it with the following code

##### Enable gzip compression for resources
<ifModule mod_gzip.c>
    mod_gzip_on Yes
    mod_gzip_dechunk Yes
    mod_gzip_item_include file .(html?|txt|css|js|php)$
    mod_gzip_item_include handler ^cgi-script$
    mod_gzip_item_include mime ^text/.*
    mod_gzip_item_include mime ^application/x-javascript.*
    mod_gzip_item_exclude mime ^image/.*
    mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

You should modify this code snipit to use the resources you want to compress during transfer.

Not all servers handle gzip without error. If this method does not work on your server, you may want to explore using deflate instead.

##### Compress resources
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

You can also use the FilesMatch directive to do the same thing but less messy.

##### Or, compress certain file types by extension:
<FilesMatch *.(html|css|jpg|jpeg|png|gif|js|ico)>
    SetOutputFilter DEFLATE
</FilesMatch>

If you compress your site, be sure to use the Vary: Accept-Encoding HTTP header. Failing to do so can cause your site to fail if it is served through a CDN, firewall, or proxy.

##### Set Header Vary: Accept-Encoding
<IfModule mod_headers.c>
    <FilesMatch ".(js|css|xml|gz|html)$">
        Header append Vary: Accept-Encoding
    </FilesMatch>
</IfModule>

Making your site faster is one of the key features of a well-written .htaccess file. You can use compression and caching to make your website load faster. I, personally, recommend using both. It usually creates the best results.