Let's create a minified version using the UglifyJS tool, this is a five step process: I got a 404 page which means “not found”. I checked to make sure that there was no minified file available by visiting the link: Not to pick too much on Trader Joes but they also have a custom.js file on their website. Minification is sometimes called Uglify because it makes the JavaScript code look ugly! This website allows you to copy and paste your JavaScript into the box provided and hit Uglify. With that warning out of the way, let's look at how you can minify JavaScript. There are occasions where the minification can break the code and you need a way to get back the original. How to minify JavaScript With an Online Toolīefore we dive into how you can minify your JavaScript files with this online tool, make sure that you do a backup. WordPress plugins can slow down your website so be careful when installing a new one.ĬDNs do tend to be more expensive, if you are on a budget then we can look at some free options.They send your website around the world making it faster to load (TTFB). CDNs have many advantages beyond minifying files.Sometimes I am asked why is this better than a WordPress Plugin. This is the first option in the list because a CDN will speed up your website in many ways including your TTFB. To enable it, go to the speed section of the control panel. You can use their automatic minify JavaScript and CSS feature. If they are not then it will create a minified version and cache it in their CDN. This means they will read your JavaScript files and minify them if needed. Some CDNs will minify the JavaScript files for you “on-the-fly”. We are going to look at three common ways to minify JavaScript: Let's look at three ways you can do this. When this happens you will need to create one yourself. Unfortunately, you are not always lucky enough to have a minified version of the file. If you have 5 or 6 JavaScript files on your page the page speed improvement could be a few seconds. Now the same file goes from 278KB to 90.9KB, saving 188KB. To load the minified version all Trader Joes needs to do is change the URL from this: This is because JQuery CDN already has the minified version of the file. We can fix this and switch to the minified version. This is the developer version of the file, not the one you want to use on a production website. This is the URL:Īs the file is not minified it is large and comes in at 278KB. This means that the file will download fast but the file is not minified. The file is being loaded from the JQuery CDN. When looking at Trader Joes from Chrome we can inspect the network tab and see which files have downloaded. The smaller the JavaScript files on your website the faster they will load.Ī minified version of the file will be much quicker to load than the development version. The second version is to improve performance.Īnd it is this minified javascript you should always use on your website. ( function( e, t).īelieve it or not, this is the same code that acts in the same way. org / license sourceMappingURL=jquery-1.10.2.min.map
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |