Front Trends 2014 - My favorite talks

Posted by

fronttrendsdm

Front Trends 2014, the front-end conference in Warsaw, has finished and it is time to recap what I found particularly interesting.

There were many interesting talks at Front Trends and, as you would expect from any front-end conference, many of them were related to Javascript frameworks and Node. While they are also interesting and useful, my favorite talks were about CSS refactoring and web page load speed – I guess I am weird that way.

Slaying the Dragon: Refactoring CSS for Maintainability

Alicia Liu gave a very interesting talk about CSS refactoring. I found this very interesting because this is something I have studied a bit on my own, maybe not from a refactoring point of view, but at least what the optimal end result should look like.

Knowing how to create that optimal CSS structure from scratch is one thing, getting there by refactoring a completely messed up code base is quite different. Anyone who has attempted this type of refactoring will understand why Liu named her talk “Slaying the Dragon”. It is not an easy job and that's why I really liked her talk.

Liu gave many good tips on this type of refactoring. The first thing you need to do is to make sure all new code is good code. Then you need to slowly fix your existing code. Since the code is in production and still evolving and growing, you need to do it one component at a time. If you want you can temporarily add an “-old” suffix to your old selectors for the component you are working on. This will make it easier to see when you have completely moved this component into the new and better structure.

Breaking News at 1000ms

My favorite talk came from Patrick Hamann. Patrick is a senior client-side developer at the Guardian. He is currently working on engineering their new web platform – where they have set the ambitious goal of having all pages load in less than one second.

Hamann showed that while the user expect a website to load in about two seconds, most websites load much slower than this. Most websites forces you to wait for large CSS and Javascript files before it even thinks about rendering any content. Meanwhile you are stuck looking at a blank page.

When you visit a page there is always a reason for it, there is some content that you want. For the Guardian this is news. Hamann told us about a lot of clever tricks that they use in order to increase the perceived speed of their website. The faster the user can get to the content, the better.

Many things can block page load and with the web as it exists today, the biggest problem is waiting for scripts and stylesheets loaded in the header. It is already an established standard to asynchronously load javascript at the bottom of your page, but The Guardian plans to take this one step further: Only sending you exactly what you need to render the main content, and then ajax in other components and asynchronously load any Javascript and CSS.

Forcing the browser to render the page without any CSS is a terrible idea as it will look ugly. To fix this the Guardian will send the most essential styles, those needed to render the main content, inline in the header. This cuts down on the amount of CSS the browser first needs to download, but more importantly is that it saves a HTTP request that would otherwise block page rendering.

On top of all this, Hamann explains, they are using localStorage to cache a lot of these resources. He also explained that other companies such as Google take this another step further by setting a cookie when CSS is cached, so that the inline CSS doesn't have to be sent again.

I loved this talk and I can only briefly explain some of his points in this small blog post, so if you ever get the chance you should go listen to Patrick Hamann speak about website loading speed.

Comments