Speed up your website! – 8 practical tips for the frontend
Some useful tips, ready to apply to your projects, personal website or blog, that will boost your loading time and improve the overall user experience
Let's face it: it's 2017, 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 www.ferreiro.me: 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.
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:
<script src="/scripts/main.js" async=”true”></script>
Asynchronous CSS: Browsers have no standard way to download CSS asynchronously, but a well-known hack 🙃 does the trick.
For a more detailed explanation, check Loading CSS without blocking render by Keith Clark or this Stackoverflow thread.
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.
- Vendors.js: Third party librarie (Jquery, Lodash, Moment.Js, Underscore, etc.)
- 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 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 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”
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”.
Don't forget to subscribe for more posts like this! 😊 www.ferreiro.me/newsletter
Thanks for reading!