htaccess to improve performance and page speed scores

Tarun · May 9, 2015

Since IPS 4 has come around I've been looking into re-optimizing my website and forums. I've been researching some htaccess ETag items and discovered that I could in fact drastically improve my Google Page Speed and YSlow test scores. An easy addition was made to my htaccess file which showed huge results.

Why do I say huge results? Because my total page size went from 0.96MB down to 335KB - roughly 66% smaller page sizes.

I've considered submitting this to the IPS Marketplace in a .zip file in case there are others who may want to benefit from these optimizations, yet I feel a bit hesitant. I do believe this would be a great help to communities, though I hesitate because I do not really know all that much about .htaccess. Would it be worth sharing with others via the Marketplace, too?

Before:

After:

Here's the .htaccess including the one segment that IPS generates:

<IfModule mod_rewrite.c>
Options -MultiViews
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule \.(js|css|jpeg|jpg|gif|png|ico)(\?|$) - [L,NC,R=404]

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

## End IPS .htaccess for Forums

## Begin - Expires caching
<IfModule mod_expires.c>

## This rule will create an ETag for files based only on the modification timestamp and their size. 
## Note: It may cause problems on your server and you may need to remove it
FileETag MTime Size

SetOutputFilter DEFLATE
Header set Expires "max-age=29030400, public"
Header unset ETag
FileETag None

# Enable expiration control
ExpiresActive On

# Default expiration: 1 hour after request
ExpiresDefault "now plus 1 hour"

# 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/jpg "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 year"
ExpiresByType image/svg+xml "now plus 1 month"
ExpiresByType image/tiff "now plus 1 month"
ExpiresByType image/vnd.microsoft.icon "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"
ExpiresByType application/vnd.wap.wbxml "now plus 1 month"

# Other optimizations
ExpiresByType application/x-gzip "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"

</IfModule>
## End - Expires caching

jackflash · May 9, 2015

I know 0 about this - anyone?

Hexsplosions · May 9, 2015

If I understand right, you're instructing the browser to not request the file if already cached and the expiration has not been reached. Clearly that means fewer requests to the server which should lead to faster load times.

I can see how this would be useful for static elements that won't change (e.g. uploaded images) but also how it could cause issues if you made a change to elements (e.g. CSS changes) since users' browsers would not request the new CSS straight away.

kysil · May 10, 2015

Would it be worth sharing with others via the Marketplace, too?

Of course!

Tarun · May 10, 2015

If I understand right, you're instructing the browser to not request the file if already cached and the expiration has not been reached. Clearly that means fewer requests to the server which should lead to faster load times.
I can see how this would be useful for static elements that won't change (e.g. uploaded images) but also how it could cause issues if you made a change to elements (e.g. CSS changes) since users' browsers would not request the new CSS straight away.

Generally speaking though, users should always clear their cache when an update occurs.

Google recommends a minimum of one week: https://developers.google.com/speed/docs/insights/LeverageBrowserCaching
GTmetrix recommends a minimum of one month: http://gtmetrix.com/leverage-browser-caching.html

Hexsplosions · May 10, 2015

Generally speaking though, users should always clear their cache when an update occurs.
Google recommends a minimum of one week: https://developers.google.com/speed/docs/insights/LeverageBrowserCaching
GTmetrix recommends a minimum of one month: http://gtmetrix.com/leverage-browser-caching.html

Whilst I agree in principle, not every user is tech savvy and just clearing out cache can be a challenge for some people. That's where I foresee difficulties arising.

Tarun · May 10, 2015

You're completely correct, Heff. I've written a wiki page about clearing your cache. It includes how to do so in CCleaner and BleachBit, along with the major browsers (Firefox, Chrome, Internet Explorer).

opentype · May 10, 2015

That’s the typical stuff an admin would do to optimize a specific size. As The Heff says, there are advantages and disadvantages. An inexperienced user just putting that in the root htaccess can also cause a lot of trouble. So it’s not something I would put in the marketplace for download, but rather in an article which actually explains what it does and how it can be used in specific situations.

Batnik · May 17, 2015

If you want MUCH more speed you should NOT use .htaccess, put that into the directory directive in your apache configs.

Batnik · May 17, 2015

and dont forget about AllowOverride None

RevengeFNF · May 17, 2015

If you want MUCH more speed you should NOT use .htaccess, put that into the directory directive in your apache configs.

This.

ASTRAPI · May 18, 2015

If you want performance stop using htaccess and move to Nginx

http://wiki.nginx.org/LikeApache-htaccess

RevengeFNF · May 18, 2015

I tested Nginx+php-fpm and Nginx+Apache(without htaccess), and in my case i prefer the last option.

But each server can be a different story.

Batnik · May 18, 2015

still like apache more then nginx

ASTRAPI · May 18, 2015

You shouldn't if you care about performance

Batnik · May 18, 2015

ill give it a try on another port, looks like a simple installation

RevengeFNF · May 18, 2015

If you are running Apache with the default AllowOverride set to on, it will be much slower than Nginx+PHP-FPM. If you turn it off, it will be slightly faster. Which makes sense, because mod_php has PHP embedded in Apache, so it should be faster.

In the rest, Nginx is much faster than Apache, thats why i choose to have a webserver with Nginx as a Reverse Proxy to Apache. The best of both worlds.

A benchmark i saw(i felt the same in my tests some months ago):

Apache w/ mod_php: Requests per second: 2395.73 [#/sec] (mean)
NginX with PHP-FPM: Requests per second: 5166.39 [#/sec] (mean)
Apache w/ mod_php(AllowOverride Off): Requests per second: 5352.41 [#/sec] (mean)

Batnik · May 19, 2015

i installed nginx, but how to add those rules, can anyone provide a valid config file for nginx?:

Here's the .htaccess including the one segment that IPS generates:

<IfModule mod_rewrite.c>
Options -MultiViews
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule \.(js|css|jpeg|jpg|gif|png|ico)(\?|$) - [L,NC,R=404]

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

## End IPS .htaccess for Forums

## Begin - Expires caching
<IfModule mod_expires.c>

## This rule will create an ETag for files based only on the modification timestamp and their size. 
## Note: It may cause problems on your server and you may need to remove it
FileETag MTime Size

SetOutputFilter DEFLATE
Header set Expires "max-age=29030400, public"
Header unset ETag
FileETag None

# Enable expiration control
ExpiresActive On

# Default expiration: 1 hour after request
ExpiresDefault "now plus 1 hour"

# 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/jpg "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 year"
ExpiresByType image/svg+xml "now plus 1 month"
ExpiresByType image/tiff "now plus 1 month"
ExpiresByType image/vnd.microsoft.icon "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"
ExpiresByType application/vnd.wap.wbxml "now plus 1 month"

# Other optimizations
ExpiresByType application/x-gzip "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"

</IfModule>
## End - Expires caching

Batnik · May 19, 2015

i figured it out, it works good, a lot less memory usage and slightly better speed

still tuning ...

apt-get remove apache2

salue · May 26, 2015

I used this when he first released it but I do not know if it improved, should I remove it from my forum ?

http://gtmetrix.com/reports/www.gamingpcforum.com/EtApoyJR < test today ( www.gamingpcforum.com/forum

if yes how do I get my old .htcaccess back or do I just delete it or what ?

if anyone can help out that would be great

Tarun · May 30, 2015

You can remove the section from your htaccess, save, reuploaded and test the page again to compare. 93% looks great, I don't see why you'd want to revert?

David.. · May 31, 2015

You can remove the section from your htaccess, save, reuploaded and test the page again to compare. 93% looks great, I don't see why you'd want to revert?

How good is this though?

And what's your settings for these:

Load javascript files from Google

Print HTTP no-cache headers

Arai · July 6, 2015

Thank you so much for this!

Pross22 · July 26, 2015

Somebody wanted nginx config, this is what we used:

        gzip on;
        gzip_vary on;
        gzip_proxied any;
        gzip_comp_level 6;
        gzip_buffers 16 8k;
        gzip_http_version 1.1;
        gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript;
        etag off;

        location ~* \.(js|css|png|jpg|jpeg|gif|ico|woff|eot|woff2|ttf)$ {
                expires max;
                log_not_found off;
        }

sobrenome · July 27, 2015

Hello,

I started to use the apache suggestions for better performance.

WebPagetest.org made a few warnings about cache:

WARNING - (60.0 minutes) - http://mysite.com/forum
WARNING - (60.0 minutes) - http://mysite.com/forum/applications/core/interface/font/icomoon.woff?-29n77j
WARNING - (60.0 minutes) - http://mysite.com/forum/applications/core/interface/font/fontawesome-webfont.woff2?v=4.3.0

Is is safe to set more time on default expires or use specific ones for these warnings?

Invision Community 4: SEO, prepare for v5 and dormant account notifications

Invision Community 5: Beta testing and latest updates

Invision Community 4: A more professional report center

Invision Community 5: A video walkthrough creating a custom theme and homepage

htaccess to improve performance and page speed scores

Recommended Posts

Tarun

jackflash

Hexsplosions

kysil

Tarun

Hexsplosions

Tarun

opentype

Batnik

Batnik

RevengeFNF

ASTRAPI

RevengeFNF

Batnik

ASTRAPI

Batnik

RevengeFNF

Batnik

Batnik

salue

Tarun

David..

Arai

Pross22

sobrenome

Archived

Recently Browsing 0 members

More