Leverage browser caching wordpress

New Page

How to Take Advantage of Browser Caching in WordPress

Posted on September 23, 2021March 22, 2019 by WPDT Personal

How to Take Advantage of Browser Caching in WordPress How to Take Advantage of Browser Caching in WordPress

If you want to take advantage of browser caching in WordPress, you should know its main benefit: it improves the loading speed of the website.

This detail is very important for people who encounter this problem. Consequently, there are tools such as Google PageSpeed ​​​​Insights or the GT matrix. These can tell you exactly what you want to know about your website’s performance, what you need to change whether or not you already have browser caching enabled, and much more.

Untitled-1-2 svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww

Well well. So what’s the problem? Why do you need to take advantage of browser caching in WordPress?

This issue is discussed in detail below by our wpDataTables team , so keep reading and you’ll be successfully leveraging browser caching by the end of this article (fingers crossed).

Creating a visually pleasing website is no longer paramount when load times are so bad that they force users to leave in seconds.

You need to create a website with fast loading pages and quality content. Anyone in contact with the Internet should know this. And the easiest way to make a website faster is to take advantage of browser caching.

gt-metrix svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww

This concept will be explained later, but be aware that this is Google’s main recommendation for loading times.

Normalement, la vitesse de chargement de votre site Web peut être améliorée jusqu’à 50 %, tant que vous utilisez les méthodes appropriées.

Qu’est-ce que la mise en cache du navigateur a à voir avec cela ?

Let’s dig in.

Table of Contents

  • Leverage Browser Caching? What is that?
  • How does Leverage Browser Caching in WordPress work?
  • Differences between server caching and browser caching
  • Leverage Browser Caching in WordPress
  • NGINX Server and Browser Caching
  • Leverage Browser Caching in WordPress using plugins
  • Use Yoast SEO to edit the .htaccess file
  • Caching third-party resources

Leverage Browser Caching? What do you mean by that?

For those who don’t know why you need to leverage browser caching, it’s best to explain it in simpler words.

Caching represents the amount of time that browsers locally store the cacheable resources available on a website.

These resources include images, JavaScript, CSS, and others. Whenever a person accesses the website, the cacheable resources which are stored on your computer are uploaded back. The loading speed of the website is thus improved visibly. This is the reason why people want to leverage browser caching in WordPress.

How does Leverage Browser Caching in WordPress work?

page speed svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww

When a person accesses a certain domain, there are multiple processes happening in the background. Everything that composes your WordPress website is transmitted to the user’s browser, making the site visible. These components of the website include content, images, stylesheets, scripts, and more. They must be moved from the website’s server to the user’s browser whenever it is required. The steps behind this process are:

  1. The visitor types a URL in his browser
  2. The browser generates a request to the server where your website is hosted (the HTTP request)
  3. The server puts all data together and sends it to the user. This is the step where users notice a slowdown. To prevent this slowdown, people can reduce the size of the scrips, optimize the image sizes and so on.
  4. Once the data is transmitted, the browser is finally able to display the website. The process repeats when visitors access other pages. The server requests can be very numerous at once, which can lead to low performance. This is why people need to optimize their website, to keep it fast.

Cache content is used in both web browsers and software applications. It is stored temporarily on your local disk. This data is called ‘ Web Cache’ or ‘HTTP Cache‘. Whenever you visit the same website, the browser will upload the information stored on your computer and download the content from the website.

In order to check whether your WordPress website leverages browser caching correctly, you need to use a specific tool. The most popular one is Google PageSpeed Insights. Find out if everything works correctly by typing in your site’s URL.

Then click Analyze and let the tool do its magic. PageSpeed ​​should tell you how your website scores in terms of mobile and desktop optimization. The score ranges from 0 to 100, and you will also get suggestions on how to improve your website further. One of the most common suggestions is to opt for browser caching in WordPress.

Hey, did you know data can be beautiful too?

wpDataTables can do it this way. There’s a good reason why this is the #1 WordPress plugin for creating responsive charts and graphs.

wpdt_example svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2FwwwA real example of wpDataTables in the wild

And it’s really easy to do something like this:

  1. You provide the table data
  2. Configurez-le et personnalisez-le
  3. Publiez-le dans un article ou une page

And it’s not just pretty, but also practical. You can make large tables with up to millions of rows, or you can use advanced filters and search, or you can go wild and make it editable.

“Yeah, but I just like Excel too much and there’s nothing like that on websites”. Yeah, there is. You can use conditional formatting like in Excel or Google Sheets.

Did I tell you you can create charts too with your data? And that’s only a small part. There are lots of other features for you.

Differences between server caching and browser caching

Any WordPress user should know more about server caching. This is a process that involves generating cached web pages for your website through the webserver. The steps above represent website caching, which is mainly on the server-side.

There are some ways in which you can improve the server caching system. The most recommended option would be updating headers on Apache. Using WordPress plugins would be the next step, and adding CDN follows it.

Leverage Browser Caching in WordPress

In order to leverage browser caching in WordPress, you need to use a bit of code. Don’t worry – it’s not as difficult as you may believe.

You just have to reach the .htaccess file, add a given piece of code and that’s it. Leveraging Browser Caching with the Htaccess file is the easiest and most effective method you should learn about.

The easiest and fastest way to make sure that your WordPress website is making the most out of both server-side and browser caching is to use a managed WordPress hosting, which pre-configures all the necessary settings for you.

Leverage browser caching in WordPress manually by doing these:

  1. Add Expires Headers
  2. Add Cache-Control Headers
  3. Turn ETags off

To do that, you need to follow the steps below:

  1. Access the website files

pl_file_manager_26 svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww

Start by logging in to your hosting account/cPanel. Navigate to the file manager. Here, you will find the website’s settings, where you need to Turn On the Hidden File option. Then, go to the website’s root directory and reach your .htaccess file.

It is usually located in /public_html/.htaccess. If the domain of your website is custom, you will find it under domainname/public_html/.htaccess. Right-click the file and edit it using the instructions you are given.

  1. Add the browser caching code in your .htaccess file

The next step is the simplest. Copy the code below and paste it at the end of your .htaccess file content. Don’t make any other changes in the file.

#Customize expires cache start – adjust the period according to your needs <IfModule mod_expires.c> FileETag MTime Size AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css application/xml application/xhtml+xml application/rss+xml application /javascript application/x-javascript ExpiresActive On ExpiresByType text/html “600 seconds access” ExpiresByType application/xhtml+xml “600 seconds access” ExpiresByType text/css “1 month access” ExpiresByType text/javascript “1 month access” ExpiresByType text /x-javascript “1 month access” ExpiresByType app/javascript “1 month access” ExpiresByType app/x-javascript “1 month access” ExpiresByType app/x-shockwave-flash “1 month access” ExpiresByType app/pdf “1 month access “ExpiresByType image/x-icon “accès 1 an” ExpiresByType image/jpg “accès 1 an” ExpiresByType image/jpeg “accès 1 an” ExpiresByType image/png “accès 1 an” ExpiresByType image/gif “accès 1 an” ” ExpiresDefault “access 1 month” </IfModule> #Expire la fin du cache

The settings included in the code above include a 600-second refresh/expiration time for HTML, and one month for CSS and JavaScript.

The purpose of this expiration period is to avoid having your visitors redownload the assets too often. If you perform changes in terms of assets more often, you can change the period according to your needs.

For people who want to leverage browser caching, altering the .htaccess file is the best option.

As you may see in the piece of code, images will expire after one year has passed. To add expires headers .htaccess, you need to change the file without damaging anything else.

However, some people don’t want to mess with their .htaccess file. If that is your situation, you can simply use a browser caching plugin. You will find out more about such plugins later in this article.

  1. Add cache-control headers via Apache

Copy the code below:

# BEGIN Cache-Control Headers <IfModule mod_expires.c> <IfModule mod_headers.c> <filesMatch “\.(ico|jpe?g|png|gif|swf)$”> Header append Cache-Control “public” </filesMatch > <filesMatch “\.(css)$”> En-tête ajouter Cache-Control “public” </filesMatch> <filesMatch “\.(js)$”> En-tête ajouter Cache-Control “privé” </filesMatch> <filesMatch ” \.(x?html?|php)$”> Header append Cache-Control “private, must-revalidate” </filesMatch> </IfModule> </IfModule>

Setting an expiration date or maximum age in HTTP headers is no longer necessary as it was already set in the previous step, which means you don’t need to repeat it here.

  1. Disable Etags

Etags stands for Entity Tags and refers to new versions of cached files. Since you have already set cache control headers, there is no need to use ETags, so you can disable them to improve load times. Add the following piece of code to the .htaccess file:

<IfModule mod_headers.c> Header unset ETag </IfModule> FileETag Aucun

Save the .htaccess file and you’re done!

NGINX server and browser caching

If your website uses NGINX, you’ll have to use other pieces of code because you won’t be able to find the .htaccess file. Again, it’s a very simple process that doesn’t require a lot of technical knowledge. Go to /etc/nginx/sites-enabled/default and paste this code there:

server { listen 80; server_name localhost; location / { root /usr/share/nginx/html; index index.html index.htm; } location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ { expires 365d; } location ~* \.(pdf)$ { expires 30d; } } Add cache control headers location (NGINX) ~* \.(jpg|jpeg|png|gif|ico|css|js)$ { expire 90d; add_header Cache-Control “public, without transformation”; }

Vous pouvez probablement dire que le délai d’expiration des fichiers image est fixé à 365 jours, soit l’équivalent d’un an. Les PDF expireront après seulement 30 jours. Vous pouvez personnaliser le code comme vous le souhaitez, comme dans le cas précédent.

Après avoir modifié NGINX, enregistrez le fichier et vous pouvez être assuré que vous avez activé la mise en cache du navigateur sur le serveur NGINX.

Tirez parti de la navigation dans WordPress à l’aide de plugins

Tweaking the .htaccess file where you don’t need it can ruin your entire website. Making one single mistake will lead to blank pages and errors, so it is perfectly understandable if you don’t want to alter the file yourself.

Luckily, there are plugins that can be useful, without you needing to learn how to enable Leverage Browser Caching in WordPress

manually. Installing a plugin can be done like this:

WP-leverage-plugin-1 WP-leverage-plugin-1

  1. Download the plugin – one example can be found here
  2. Navigate to Dashboard, Plugins and Add New
  3. Find “Leverage Browser Caching”
  4. Click Install Now
  5. Activate the plugin
  6. Test your website

There are other plugins you can use as well, and some of them are listed below. Choose them according to your requirements:

W3 Total Cache – WordPress plugin

W3 W3

Fixing Leverage Browser Caching in WordPress with the W3 Total Cache can be done by following the steps listed below:

  1. Download and install the W3 Total Cache WordPress plugin
  2. Navigate to General Settings and select Enable Browser Cache
  3. Click save and navigate to Browser Cache Settings (top of the page)
  4. Choose the cache headers available
  5. Set expires headers, cache-control, and ETag headers (based on the settings done before)
  6. Save all settings and refresh your website

WP Fastest Cache

wpfasset wpfasset

WP Fastest Cache is another plugin that you can use to enable browser caching in WordPress.

  1. Download and install the WP Fastest Cache.
  2. Go to plugin settings
  3. Select Browser Caching by checking the box
  4. Click on submit to apply the changes and that’s it

Cache Enabler – WordPress Cache

caching activator caching activator

This plugin comes with more features that you may find useful in the future: you can automate the cache cleaning process, or you can do it by hand, you can Purge the page manually, you can minify HTML and JavaScript, and many more. Pour nous, simply:

  1. Install the plugin and activate it
  2. Ir to setup
  3. Click Enable take advantage of browser caching

Use Yoast SEO to edit .htaccess archives

leaven leaven

You can also edit the .htaccess file in a safer method using the Yoast SEO plugin. The most used WordPress plugin and Yoast SEO. By using ise plugin you can edit .htaccess file easily. If you don’t have Yoast yet, you need to install and activate it beforehand. After that, you need:

  1. Access an SEO, then Tools.
  2. Navigate to the Archive Editor
  3. The .htaccess file will open in a text editor where you can paste the code snippets listed above
  4. Keep the cambios

After making the changes, you can use Google PageSpeed ​​​​Insights to verify if everything is OK after making the changes. If your website takes advantage of browser caching correctly, you’re good to go. Otherwise, you need to go through the process again and see what you missed.

Third party resource caching

After making all the changes described in this article, you can still get a bad score when testing your website speed with various tools. Google PageSpeed ​​​​Insights may reveal a bad score due to many third-party scripts or services running behind your website. These scripts do not have a long expiration time due to a multitude of reasons.

If you receive messages to take advantage of browser caching in WordPress after following all possible advice, there is not much you can do besides delete the scripts you don’t use. A maximum of three scripts should be enough for a website, so be sure to clean your list.

After making this change, everything should work fine, and your website load time is supposed to be as close to perfect as possible. In case of problems I found very specific and it has nothing to do with third party scripts, you should educate yourself about it and see what configuration causes the problem.

Final thoughts on how to take advantage of browser caching in WordPress

Please note that you may not notice the changes you make immediately after installing a plugin. The return motif is the CSS/Stylesheet archive. The browser cache you have already saved on your computer will prevent you from seeing the changes you have made. To properly view the website after making various changes, it is recommended that you visit the website using the incognito feature of your browser. Using this feature will not use cache resources and you should be able to see changes correctly.

At the end of the day, the method you choose to take advantage of browser caching is not relevant. The only thing that matters is seeing it in action. As long as Leverage Browser Caching in WordPress works as it’s supposed to, how it got there doesn’t matter. You can choose the method you are comfortable with and the result will be the same. Whether you decide to modify the .htaccess file or use a plugin, you’ll get better load times by turning on Take Advantage of Browser Caching.

If you are not reading the article below, you need to enable browser cached almacenamiento in WordPress, debe consultar ise sobre cómo accelerar WordPress .

We also wrote about some related topics like WordPress Database Plugin, WordPress Lazy Load Plugin, WordPress Cache Plugin Options and CDN Services.

  • WordPress

Google Google translator

Google Google Translate

Google Traduction


Video Leverage browser caching wordpress

Related Posts

Free chat room code for my website

Contents1 How to set up a free chat room on the website.2 3 comentarios2.1 Trackbacks/Pingbacks2.2 Submit a Comment Cancel reply3 How to Create a Chat Room Website…

Background image full screen css

Contents1 Cómo – Full Page Image1.1 Example1.2 Example2 CSS background image tamaño tutorial: how to codify a complete page background image3 Perfect Full Page Background Image3.1 Méthode CSS géniale,…

WordPress leverage browser caching

Contents1 Aproveche el almacenamiento in hidden del navegador1.1 Will it works for my website?1.2 Where are plugin options1.3 Some JavaScript files still display under Leverage Browser Caching1.4…

WordPress post to facebook page

Contents1 How to Automatically Post to Facebook from WordPress1.1 Download Now: How to Launch a WordPress Website [Free Guide + Checklist]1.2 1. Create an IFTTT account.1.3 2….

Download images from wordpress media library

Contents1 How to export your WordPress media library1.1 Download maintenant : How to launch a WordPress website [Free Guide + Checklist]1.2 How to export your WordPress media…

WordPress single post template

Contents1 How to Create Custom Unique Post Templates in WordPress2 Post Template Files2.1 author.php2.2 Fecha.php3 Handbook navigation4 How to Create Custom Single Post Templates in WordPress5 Video…