We’ve talked many times about the importance of speeding a website or blog, and make it user-friendly and optimized for search engine crawling. Today, We will talk about a really critical factor when it comes to surfing the web, and it’s the leverage browser caching of static assets.
If you’re not familiar with that term, don’t worry, you will learn how to leverage browsing cache using a simple code on your server.
When a visitor comes to your blog for the first time, the browser will load everything including in your pages, from icons, menus, and others, and when the user opens a second page. The browser re-download all the static assets such as the logo and footer. It’s really an additional step that the browser never needs, it makes things longer and can affect your site loading time.
This is why we use the leverage browser caching of static assets of your WordPress website, and load them locally for all future browsing. This method will significantly decrease the total number of requests to the servers. And the result will be a fast loading time for your blog.
Luckily, WordPress is one of the platforms that let you easily leverage browsing cache, by adding a simple code to the htaccess file in your website root.
Some plugins like the W3 total cache let you set some of the file expiration and help browser caching static files. But, it won’t work as directly through the htaccess file. It’s more powerful and without the need to edit any settings every time you update or delete a plugin.
Add the below code to your htaccess file:
## EXPIRES CACHING ##
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
## EXPIRES CACHING ##
You don’t have to edit the code, it’s optimized for the best period to save static files. But, if you want, you can change the number of months, or even, set the duration to a predefined number of days.
If you have optimized your blog images and use fast web hosting for WordPress, you will notice a real improvement, in your page loading after inserting the code above.
You can also get the maximum results from your static files in WordPress, by compressing your images first. That can be done with Photoshop before uploading the image. Make sure to have a good quality image, but with a compressed version, and use PNG in general. It will save you some time in page loading PNG images with fewer colors can work well.
The image size is also very important, verify that your image size is not bigger than your page limits. Let’s say for example, that your post’s maximum width is 500 pixels, and your image’s width is 1100 pixels, then your image will appear as 500 pixels, but with real size of 1100 pixels.
That’s in general, a big space that can make your page to load slowly, and takes more time to navigate the page. So, make things logical, and never use a size that you will never use, make your image’s size exactly as it will appear on your post.
