Let's face it: it's 2020, and people hate waiting while your webpage is loading slowly. This means that, sadly, you’re losing potential users, or even worse, current customers. 😩
I had this problem often in the past and, more recently, some weeks before launching jorgeferreiro.com: The beta version was slow, and the overall user experience was affected by this issue.
> Google: 53% of mobile users abandon sites that take longer than 3 seconds to load.
In this post, I will present 8 ideas I learned for drastically decreasing the web page loading time that you can apply directly to your projects.
Load your CSS styles and JavaScript asynchronously (hack inside!)
By default, all your frontend files (CSS, JS, etc.) will be downloaded in a synchronous way, blocking the browser until the assets are downloaded and processed. However, we can change this behaviour with these two tips:
- Loading JavaScript asynchronously: It's very trivial with the
asynctag. - Asynchronous CSS: Browsers have no standard way to download CSS asynchronously, but a well-known hack 🙃 does the trick.
This is how it works: We tell the browser to invalidate style.css with media=none, which forces the browser to download the style in the background, but not render it. Then, once the page is loaded, we use JavaScript to restore the style media to a valid state.
For a more detailed explanation, check Loading CSS without blocking render by Keith Clark or this Stackoverflow thread.
Concatenate and group CSS and JavaScript files
Having many CSS and JS files in your web application may increase the loading time, since the browser makes one request per file (if not cached) and it blocks the rendering of the webpage until all scripts and styles have been downloaded and processed. Also, you’ll increase the workload of your server by performing more transactions.
To solve this, you can combine multiple files into one (or several) production file(s). I generally distribute the styles and JavaScript logic in my projects in this way:
- Vendors.js: Third party librarie (Jquery, Lodash, Moment.Js, Underscore, etc.)
- Core.js: Contains all the JavaScript logic of my web page.
- Vendors.css: Third party styles (normalize.css, animate.css, etc.)
- Main.css: Specific styles of the web application.
Minify your production assets
We can reduce the size of our files by applying minification techniques. This process works well in conjunction with the previous tip.
Here is a list of great tools you can use in your projects to minify the assets:
- To minify CSS: CSSnano.
- To minify JavaScript: UglifyJS2.
- To minify HTML: html-minifier (if you use Express.JS, HTML is compressed by default if you enable the production flag on your server).
Normally, on production projects, I use a tool to automate this process (in my case Gulp, using gulp-cssnano, gulp-minify, etc.). If you need a quick online minification, you can use minifier.org or websiteplanet.com (Thanks Alejandra for sharing it :))
Optimize and compress your images 📷
Images are normally the largest files in a web page. Actually, Images make up over 50% of the top 1000 websites’ total size (Http archive)
If your site contains many images, you can save disk space and bandwidth in your servers by optimizing them. Generally, you can reduce their size by applying compression (lossy or lossless), reducing their dimensions or removing redundant metadata.
Depending on the scenario, I use two approaches for optimizing images:
-
In large web projects, I use imagemin, which optimizes all the production images and reduces their size. I normally automate this process using Gulp.
-
When I need a quick solution, I use a mac application called imageOptim (also available via homebrew) or imagemagick (it has many more features such as resizing, blurring, etc.).
Lazy loading
When the page loads, all images are downloaded automatically. Sometimes, especially if your web page’s many images are not visible to the user until scrolling, it's wasteful to download all images at once.
That’s what Lazy loading does: it delays the download of images until necessary (often, when the images enter the user viewport). Here is a good post on this topic: “5 Brilliant Ways to Lazy Load Images”
Avoid GIFs
Don’t use GIFs, and use HTML5 videos instead. There are several sources such as Gifv by imgur or this post which explain good reasons GIFs are not adequate for modern websites.
Use SVG whenever you can
SVG files are generally smaller than other file formats, they scale automatically, and you can edit some of their properties directly in code. Find more reasons in “Why should you use svg”.
Image sprites
Use Image sprites: A collection of images in one single image. This is convenient because it allows you to download many images or icons in a single request. You can use Spritesmith or spritegen.
Don't forget to subscribe for more posts like this! 😊 www.ferreiro.me/newsletter
Thanks for reading!
–Jorge
