Why is Version Number Necessary?
Lab: Automate Asset Versioning – Better Asset Versioning
Video Runtime: 16:30
Why is it necessary to have files versioned? Why? Why do we include a version number when we enqueue assets?
Often I see tutorials or plugins that remove the version number that WordPress appends to the end of the asset’s static URL, i.e. it removes the ?ver=1.0.0. But you never want to do that without a strategy to change the asset’s static URL every time it changes.
Demonstration of Making Changes Without Changing the Asset’s URL
Let’s start with a demonstration to show you what happens when the version number does not change but the file itself does. You will change the site’s header background color to #ccc. You can use any theme. In the video, I’m using the Genesis Sample theme, which is free to download.
When you change the background color but not the version number, the browser does not load the new file. Therefore, your changes are not being pushed out to the browser. Why?
Don’t Say Clear the Browser’s Cache
Never ever say: Clear the browser’s cache. Don’t do it. The browser is not receiving the new changes because it doesn’t know that you changed it. This is a problem.
Clearing the cache is NOT a feasible strategy. Why? Because every single person who has already visited the website has a cached (stored) version of the asset file. It’s not feasible to tell all of the previous visitors to clear their browser’s cache.
Instead, the asset’s URL needs to change. Once it does, then the browser will request the new file.
Why didn’t the browser show the changes you made in the stylesheet? Why? Why did you have to change the version number to make it show in the browser?
Explaining How the Browsers Work with Assets
When the browser reads an asset reference in the HTML, it first looks in its local cache to see if it has already stored away that file. If yes, then it loads it from its cache.
If no, then it requests the file from the web server. It then has to download the file from the web server. It loads it into its cache.
Why? On the first visit, the browser has to load all of the assets. But the next time the user visits the same website, the asset files do not need to be downloaded again (unless they changed). That makes the web page render faster.
By Default, WordPress Appends a URL Query
By default, WordPress appends a URL query parameter, i.e. ?ver=1.0.0. For example, for the stylesheet, it’s URL might be:
http://sandbox.dev/wp-content/themes/genesis-sample/style.css?ver=2.4.4
That URL has the version number, which makes it different from version 2.4.5.
When you enqueue, you specify the version number. That number is what is appended. If you don’t specify one, then WordPress sets it to its version number.
How Do You Get the Browser to Download New Assets?
1) Clear the browser’s cache
But that’s a really bad strategy and it’s not feasible.
2) Change the URL
Appending the version number as a URL query key/value parameter changes the URL. If you’re using a CDN, they specify a different static URL with every new file. If you strip out the URL query and then move it to inline within the static URL, that changes the asset’s URL.
The point is: the version number is necessary to trigger that the asset file is new. The browser will load it WHEN the URL is different.
Your functions are bloated. Put them on a diet. Think "skinny" and "as few lines as possible."
Episodes
Total Lab Runtime: 02:27:07
- 1 Lab Introductionfree 11:19
- 2 Why is Version Number Necessary?free 16:30
- 3 Version Numbering Schemepro 06:47
- 4 Forget Hard Coding Version Numberpro 15:02
- 5 Forget Hard Coding - Grab Stylesheet's Versionpro 05:19
- 6 Forget Hard Coding - Genesispro 05:17
- 7 Load the Theme's Minified Stylesheetpro 10:23
- 8 Strategy Session: Minified or Full for Theme Versionpro 12:25
- 9 Load the Minified Stylesheet in Genesispro 05:04
- 10 Refactor to Improve Our Codepro 11:20
- 11 Applying It to Scriptspro 18:14
- 12 Apply it to Scripts - Genesispro 09:13
- 13 Convert into Utility File - for Reusepro 14:30
- 14 Wrap it Upfree 05:44
