My Personal takeaways from 2 days #VelocityConf London

Last week I attended VelocityConf Europe, an international conference dedicated to building a stronger and faster web. With speakers from Google, Facebook, Twitter, the BBC and many others, the conference promised to be inspiring. Here are my takeaways after 2 days of awesomeness:

  1. Faster is (much) better
  2. Mobile, mobile, mobile
  3. Responsive design to the rescue
  4. Mobile + fast = difficult
  5. We are not there yet, but help is on the way
  6. Misc

Faster is (much) better

People do not like waiting. Research shows that business metrics start to go down once people experience a 500ms delay on a website. At a 1 second delay, their minds start to wander off and at a 10 second delay, people make a context switch and start doing something else, getting really frustrated in the process. This phenomenon is described as web stress. The same research indicates that these delays negatively impact the perception of your brand, product or service. Of course, speed is a relative thing, and when asked "how fast is fast enough", one of BBC speaker replied: "faster than the competition".

Mobile, mobile, mobile

The importance of mobile was an omnipresent theme at the conference. Even engineers at Facebook admitted that they were surprised with the speed at which mobile browsing is taking off and is replacing desktop browsing. With the increase in mobile browsing, mobile web stress is increasing too. Desktop browsing occurs in the relative comfort of the home or office environment, mobile browsing happens on the go, with users that are themselves on the move, wanting their information faster, on smaller screens.

It's clear that mobile presents tremendous opportunities, but comes with a lot of challenges: mobile is a scattered landscape, with a variety of operating systems and versions, different screen sizes and different capabilities in terms of features, CPU, memory. Last but not least, don't forget that "mobile" will very soon include not only tablets and smart phones, but also smart watches, glasses, to name but a few. It's an understatement to say that having your web site/app look good, performant and to the point under all these circumstances is challenging.

Responsive design to the rescue

Obviously, a lot of attention was given to responsive web design. Responsive web design aims to deliver the best possible viewing experience of a website without a user having to zoom, scroll or pan, and this over a broad range of devices. But, as a keynote from BBC illustrated, responsive web design goes much broader than having a dynamic website that auto adjusts to the user's screen real estate. One should design its web sites/apps mobile first, taking the broad variety of mobile devices and the broad variety of environments into account. Mobile users are on the go, and might temporarily lose connectivity while using your application. Can your web application handle offline?

Mobile + fast = difficult

In a talk that was both inspiring and sobering, Google's Ilya Grigorik gave a breakdown on why it's so difficult for your website to be fast on mobile devices. His talk illustrated that it is nearly impossible to stay within a 1000ms budget when it comes to mobile websites. Ilya gave lots of tips on how you can increase performance of your website, from using libraries like FastClick, to prefetching content and keeping a close eye on the critical browser path. Watch his whole presentation here and wonder what your site can deliver on a 1000ms budget.

We are not there yet, but help is on the way

A lot of effort and experimentation is being done to make the web and mobile web a faster, stronger place. There are new standards: the most popular image formats on the web (JPEG, GIF, PNG) are based on technologies that are 15 years (!!) old. Newer image standards like WebP (by Google) or JPEG-XR (by Microsoft) are being developed, and some browsers start to support these. These newer image formats can reduce the file size of images with 25 to 50%, thus reducing bandwidth bills and loading times. One word of caution though: support of these image formats is far from ubiquitous, as among others Facebook experienced, so use them wisely.

A simple, yet often overlooked technique to speed up your pages is to only load what you need. Are you sure you need all the Javascript you are loading? Are you sure you need it now? Are the images you load adapted to the device? There is no need to load a high res 3 MB image on a device that is not even close to retina. What about CSS? It's not uncommon that a significant amount of the CSS rules you load are not needed, especially when using frameworks like Bootstrap or Foundation. Just run an "Audit" in Chrome Developer Tools and you'll see that often 80+% of the CSS rules you serve, are not used (see screenshot). There is currently a GitHub project called UnCSS that aims to build a Grunt task to remove all unneeded CSS.

The HTML5 standards also offers support for responsive design and offline. There is ApplicationCache, a technology that instructs the browser to aggressively cache assets. Your web app can use localstorage or indexedDB to store content, so that when users are offline, they can continue for a while without having the browser to fetch new content.

You can optimize as much as you want, if you do not have the data to prove that you're improving anything, you might as well just don't bother. Therefore, use tools like webpagetest.org to capture before and after data to validate that what you change is actually improving. You can script Webpagetest.org to perform relatively complex browsing scenarios, let browsers in different locations all across the globe run the test and gather synthetic performance data. Use wpt-script to automate running the tests and graphing the results, and https://developers.google.com/speed/pagespeed/insights/ to gain insights on what to improve first. Last but not least, use Real User Monitoring (RUM) to gain insights in how real users experience your site and to do user research.

Misc

Last but not least I'd like to mention a couple of other gems I encountered: the HTTP Archive is a project that tracks how the web is built. It is a permanent repository of web performance information such as size of pages, failed requests, and technologies utilized. This performance information allows us to see trends in how the Web is built and provides a common data set from which to conduct web performance research. On http://bigqueri.es you can find example queries and discussions. Be sure to check out the video.

Becoming fast, and staying it, requires a team effort and DevOps culture: front and backend developers need to ensure their code runs as smooth and fast as possible, operations needs to tune servers and infrastructure and all need to work together around actionable metrics to guarantee an optimal user experience.

 

You can find videos from the keynotes here and speaker decks here.

Source: Sirris Blog

Share this post