Search code examples
wordpresspagespeed

Took a website speed test - What does "Leverage browser caching"?


I just took a test with my personal website https://qpl.dk/ with Pingdom Tool, the performance grade is fine, loading time is around 1 sec, so that's nearly perfect.

My problem is that I get grade 2 on Leverage browser caching, which I don't know what is means.

When I expand the "Leverage browser caching" is says:

The following cacheable resources have a short freshness lifetime. Specify an expiration at least one week in the future for the following resources:

https://qpl.dk/wp-content/themes/bridge/css/img/pixel-video.png
https://qpl.dk/wp-content/themes/bridge/style.css
https://qpl.dk/wp-content/uploads/2018/01/914202_10200952332788770_187547271_o-1-400x400.jpg
https://qpl.dk/wp-content/uploads/2018/01/Realistic-Retina-Macbook-Pro-Mockup-Vol.3-Anthony-Boyd.jpg
https://qpl.dk/wp-content/uploads/2018/01/efb_mockup-min-1.png
https://qpl.dk/wp-content/uploads/2018/01/macbook-juice.jpg
https://qpl.dk/wp-content/uploads/2018/01/q-footer-logo.png
https://qpl.dk/wp-content/uploads/2018/01/q_letter_logo_dark.png
https://qpl.dk/wp-content/uploads/2018/01/q_letter_logo_white.png
https://qpl.dk/wp-content/uploads/2018/01/q_logo_white.png
https://www.googletagmanager.com/gtag/js?id=UA-112909659-1
https://maps.googleapis.com/maps/api/js?ver=4.9.4
https://www.google-analytics.com/analytics.js
https://fonts.googleapis.com/css?family=Lato%3A400%2C700&ver=4.9.4
https://fonts.googleapis.com/css?family=Raleway ... 0,900,300italic,400italic&subset=latin,latin-ext

What does it mean?

  • Thank you in advance!

Solution

  • First of all, kudos on the fast loading time. Browser caching remembers the resources that the browser has already loaded. So when a visitor goes to another page on your site all neccessary files (like CSS, logo etc) don't have to be loaded again. Leveraging means you instruct browsers how their resources should be dealt with.

    The files that are listed need to have an expiration date, which means a time in which these files will be saved and after which time they will be refreshed to the actual (maybe new, if you have updated it) version.

    All you have to do is access your .htaccess file on the server, and add this code, which will help you:

    #This code leverages your caching#
    <IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType text/css "access 1 month"
    ExpiresByType text/html "access 1 month"
    ExpiresByType image/gif "access 1 year"
    ExpiresByType image/png "access 1 year"
    ExpiresByType image/jpg "access 1 year"
    ExpiresByType image/jpeg "access 1 year"
    ExpiresByType image/x-icon "access 1 year"
    ExpiresByType application/javascript "access 1 month"
    ExpiresByType text/x-javascript "access 1 month"
    ExpiresByType application/x-shockwave-flash "access 1 month"
    ExpiresDefault "access 1 month"
    </IfModule>
    #This code ends here#
    

    1 YEAR? you may be wondering. These are the files that, I pressume, won't be changed on a daily basis, or even a weekly basis. You can, of course, change the duration to more or less, but I don't like to go below 1 month or over 1 year. Put it to your taste.

    There are also a lot of plugins that will do this for you (just check "leverage cache" in Wordpress plugin search), but I do recommend entering the code on your own.

    Some more files for you to read on:

    https://www.cloudways.com/blog/optimize-wordpress-page-load-time-by-browser-cache-leverage/

    https://gtmetrix.com/leverage-browser-caching.html