X

Email

You can send me an email to the following address:

Close comments

Speed up your website! – 8 practical tips for the frontend

Jorge Ferreiro - Published 11/8/2017

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.

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 async tag.

      <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.

      <link rel="stylesheet" href="style.css" media="none" onload="if(media!='all')media='all'" type='text/css'>
    
      <noscript>
          <!-- Fallback if JavaScript deactivated or not supported -->
          <link rel="stylesheet" href="style.css" type='text/css'>
      </noscript>
    

    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.


I hope this article has been useful to you! Do you have any comments or more tips? Just let me know in the feedback form, Tweet them to @jgferreiro or send me an email!

Don't forget to subscribe for more posts like this! 😊 www.ferreiro.me/newsletter

Thanks for reading!
–Jorge

Did you like my post?

Spread the knowledge with your community 😊