Jump to content

htaccess to improve performance and page speed scores


Recommended Posts

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:

TXR4Uwk.png
After:

5dmndD5.png

 

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

 

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

​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.

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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)

 

Link to comment
Share on other sites

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

 

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 1 month later...
  • 3 weeks later...

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;
        }

 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...