Leverage browser caching of static assets

[esther11]

Hi,

I have already used WP Super Cache plugin for my Wordpress site and added following codes to .htaccess file but still got the F for cache static content.

http://www.webpagetest.org/performance_o...1&cached=0

Code:

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 1 month"
</IfModule>
## EXPIRES CACHING ##

[Anton Chigurh]

CloudFlare makes your .htaccess file useless. It's bypassed. Disable CF and run these tests again to see what I'm talking about.

I use this code in .htaccess for leveraging of browser caching:

Code:

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType text/css A2628000
    ExpiresByType text/richtext A3600
    ExpiresByType image/svg+xml A3600
    ExpiresByType text/plain A3600
    ExpiresByType text/xsd A3600
    ExpiresByType text/xsl A3600
    ExpiresByType video/asf A2628000
    ExpiresByType video/avi A2628000
    ExpiresByType image/bmp A2628000
    ExpiresByType application/java A2628000
    ExpiresByType video/divx A2628000
    ExpiresByType application/msword A2628000
    ExpiresByType application/x-msdownload A2628000
    ExpiresByType image/gif A2628000
    ExpiresByType application/x-gzip A2628000
    ExpiresByType image/x-icon A2628000
    ExpiresByType image/jpeg A2628000
    ExpiresByType application/vnd.ms-access A2628000
    ExpiresByType audio/midi A2628000
    ExpiresByType video/quicktime A2628000
    ExpiresByType audio/mpeg A2628000
    ExpiresByType video/mp4 A2628000
    ExpiresByType video/mpeg A2628000
    ExpiresByType application/javascript A2628000
    ExpiresByType application/x-javascript A2628000
    ExpiresByType application/vnd.ms-project A2628000
    ExpiresByType application/vnd.oasis.opendocument.database A2628000
    ExpiresByType application/vnd.oasis.opendocument.chart A2628000
    ExpiresByType application/vnd.oasis.opendocument.formula A2628000
    ExpiresByType application/vnd.oasis.opendocument.graphics A2628000
    ExpiresByType application/vnd.oasis.opendocument.presentation A2628000
    ExpiresByType application/vnd.oasis.opendocument.spreadsheet A2628000
    ExpiresByType application/vnd.oasis.opendocument.text A2628000
    ExpiresByType audio/ogg A2628000
    ExpiresByType application/pdf A2628000
    ExpiresByType image/png A2628000
    ExpiresByType application/vnd.ms-powerpoint A2628000
    ExpiresByType audio/x-realaudio A2628000
    ExpiresByType application/x-shockwave-flash A2628000
    ExpiresByType application/x-tar A2628000
    ExpiresByType image/tiff A2628000
    ExpiresByType audio/wav A2628000
    ExpiresByType audio/wma A2628000
    ExpiresByType application/vnd.ms-write A2628000
    ExpiresByType application/vnd.ms-excel A2628000
    ExpiresByType application/zip A2628000
</IfModule>

Additionally, I test using IE 10 or 11 only, to get the full picture of what is happening with a given site. Chrome can mask alot of the responses for some reason, robbing you of the full picture.

In this test of your site, it's clear you also need to compress and optimize images. This will take almost 1 megabyte off your pageload and will improve performance without losing any content. Might even improve that time to first byte, which incidentally is far off the target for this test. Some of that is actually added, by CloudFlare. Turning off CF will immediately improve that TTFB some.

EDIT to add: This call:

Code:

http://kpopexplorer.net/wp-content/plugins/wp-pagenavi/pagenavi-css.css?ver=2.70

Is kicking a 404 not found error.

Additionally, calls 13-20 and 51 in this test waterfall view are coming from third party hosting, namely tinypic. You have no control over these images and can't optimize them if they aren't hosted locally. If they're not dynamic content, I suggest hosting them locally after optimization.

[esther11]

thank you very much for your reply. It helps a lot!

[esther11]

Hi Anton Chigurh,

When I disable Cloudfare, my TTFB improves but Keep-Alive goes down.

http://www.webpagetest.org/result/140527_PH_3FD/

Should I consider keep TTFB high or Keep-Alive?

[pmeenan]

It's not just the keep-alive, the TTFB for your static resources looks like they also come back relatively slowly. Try doing a bunch more tests (9+) and see if the base page TTFB is consistently fast. If so, reach out to Cloudflare support and your hosting company and have them work together. It's possible that they are doing IP-Based rate-limiting or something like that.

The keep-alives is also a problem with your hosting provider and usually a strong sign that they are WAY over-subscribed. If they can't/wont enable keep-alives then you should switch hosts - period (and let everyone here know so nobody else uses them - rewarding that behavior is killing performance).

[esther11]

My site result displays some weird links in 'Leverage browser caching of static assets' sections.
http://www.webpagetest.org/result/140530_93_559/

Recently, I implement Disqus comment system and some affiliate programs on the website.

[pmeenan]

Those look like a combination of retargeting pixels, ads stuff and some from Disqus. I wouldn't be surprised if the "affiliate" programs were doing all sorts of user tracking/retargeting which is what you are seeing.

[JP Ray]

You can easily Leverage Browser Caching on WordPress. Follow this guide: https://www.wpmyweb.com/how-to/easily-le...press.html