Critical CSS and Webpack: Automatically Minimize Render-Blocking CSS

Critical CSS and Webpack: Automatically Minimize Render-Blocking CSS

“Eliminate render-blocking JavaScript and CSS”. It’s the one Google Page Speed Insights suggestion that I always get stuck with.

When a web page is accessed, Google wants it to only load what’s useful for the initial view, and use idle time to load anything else. That way, the user can see the page as early as possible.

There are many things we can do to minimize render-blocking JavaScript e.g. code splitting, tree shaking, caching and so on.

But what about CSS? For this, we can minimize render-blocking by isolating the CSS needed for above-the-fold content (a.k.a. the critical CSS) and loading that first. We can then load the non-critical CSS afterwards.

Isolating critical CSS is something that can be done programmatically, and in this article I’ll show you how to delegate it to your Webpack pipeline.

What does render-blocking mean?

If a resource is “render-blocking”, it means the browser can’t display the page until the resource is downloaded or otherwise dealt with.

Typically, we will load our CSS in a render-blocking way by linking to our stylesheet in the head of the document, like this:

  <link rel="stylesheet" href="/style.css">
  <p>I can't be seen until style.css has been loaded!</p>

When this page is loaded by a web browser, it will read it from top to bottom. When the browser gets to the link tag, it will start downloading the stylesheet straight away, and will not render the page until it’s finished.

read more

4 Important Changes In Vue.js 2.4.0

4 Important Changes In Vue.js 2.4.0

Vue.js 2.4.0 has been released this week with an abundance of new features, fixes and optimisations.

In this article, I’ll give you a breakdown of four new features that I think are the most interesting:

  1. Server-side rendering async components
  2. Inheriting attributes in wrapper components
  3. Async component support For Webpack 3
  4. Preserving HTML comments in components

1. Server-Side Rendering Async Components

Before Vue 2.4.0, async components were not able to be server rendered; they were just ignored in the SSR output and left to the client to generate. This gave async components a significant downside, and fixing the issue allows for much better PWAs with Vue.

Async Components

Async components are really handy. If you’ve been following this blog I’ve been writing about them a lot lately. In a nutshell, they allow you to code-split your app so non-essential components (modals, tabs, below-the-fold content, other pages etc) can load after the initial page load, thus allowing a user to see the main page content quicker.

Let’s say you decided to load below-the-fold content asynchronously. Your main component might look like this:

  <div id="app">


import SyncComponent from './SyncComponent.vue';
const AsyncComponent = import('./AsyncComponent.vue');

export default {
  components: {

read more

3 Code Splitting Patterns For VueJS and Webpack

3 Code Splitting Patterns For VueJS and Webpack

Code splitting a single page app is a great way to improve its initial loading speed. Since a user doesn’t have to download all the code in one hit, they’ll be able to see and interact with the page sooner. This will improve UX, especially on mobile, and it’s a win for SEO, as Google penalises slow loading sites.

Last week I wrote about how to code split a Vue.js app with Webpack. Long story short, anything you wrap in a single file component can easily be code split, as Webpack can create a split point when it imports a module, and Vue is happy to load a component asynchronously.

I believe the hardest part of code splitting is not getting it to work, but knowing where and when to do it. I’d go as far as to say that code splitting needs to be an architectural consideration when designing your app.

In this article I’ll present three patterns for code splitting a Vue.js single page app:

  • By page
  • By page fold
  • By condition

1. By Page

Splitting your code by page is an obvious place to start. Take this simple app, which has three pages:

read more

Code Splitting With Vue.js And Webpack

Code Splitting With Vue.js And Webpack

One possible downside to bundling your single page app with Webpack is that you can end up with a really big bundle file, sometimes several megabytes in size!

Asset Size
bundle.main.js 1.36 MB 😞

The problem with this is that a user must download the whole file and run it before they can see anything on the screen. If the user is on a mobile device with a poor connection this process could take quite some time.

Code splitting is the idea that a bundle can be fragmented into smaller files allowing the user to only download what code they need, when they need it.

For example, looking at this simple web page, we can identify portions of the app that we don’t need on the initial load:

What if we delayed loading these parts of the code until after the initial render? It would allow a user to see and interact with the page much quicker.

In this article I’ll show you how Vue.js and Webpack can be used to split a single page app into more optimally sized files that can be dynamically loaded.

Async components

The key to code splitting a Vue.js app is async components. These are components where the component definition (including its template, data, methods etc) is loaded asynchronously.

read more

5 Great Talks From VueConf 2017, The First Vue.js Conference

5 Great Talks From VueConf 2017, The First Vue.js Conference

VueConf 2017, the first official Vue.js conference, took place over the last two days, June 22nd and 23rd.

The event was held in Wrocław (pronouned “vratslaw”, from what I can gather), which is a beautiful and historic city in the South-West of Poland. Around 300 people attended including many Polish locals, Europeans from surrounding countries like Germany and Hungary, and a number of adventerous developers from far away countries like the US, India and Australia (me).

The conference featured a keynote from Vue.js founder Evan You, and variety of interesting talks from Vue.js contributors, experts and advocates.

I think all attendees would agree that each and every talk of the conference was informative and inspirational, but in this article I’ll limit myself to just five talks to report on what you missed!

1. Evan You - The State of Vue 2017

VueConf 2017 kicked off at 9am with a keynote from Vue.js founder Evan You. His talk recapped the history of Vue, which began as a humble idea for a lightweight UI library way back in 2013. He told of how Vue gained unexpected attention on the front-page of Hacker News, and later a tweet from Laravel creator Taylor Otwell gave the project some serious traction.

read more