Website Performance

Chris Botman @botman Website performance More than just downloading less

About me (@botman) • Web and Android developer at Humaan
• I learned my first HTML making a homepage for a virtual frog

• DT took us through what web performance is and
why it matters • But how do you achieve your budget? E.g. a 2 second load time • Reducing download size helps but only goes so far • Part 1: Controlling how a page loads • Part 2: Tips and tools for easy wins, such as http/2 Introduction

Part 1: Controlling how a page loads

How a page loads

If you look at Chrome Dev Tools network tab, there
are two vertical lines: What is ‘loaded’ anyway? DOMContentLoaded body onload

• Browsers want to display content as soon as possible
• Resulted in the “flash of unstyled content” Why two ‘load’ events? Source

• So browsers wait for everything that could affect initial
display to load • That point is our DOMContentLoaded event • The goal isn’t to load everything in 2 seconds, it’s to have content displayed The solution...

• When and how you load assets determines when the
browser will first display content • Assets that must load before the page displays are ‘render blocking’ • This is a big deal. Loading lots of JavaScript or fonts can take seconds, while the page remains blank. What it all means

What blocks rendering? • The HTML document itself • Inline
CSS and JavaScript • CSS files, unless media query indicates the stylesheet is not required • Javascript files, unless marked as async • HTML images do not block rendering, CSS background images…?

Render blocking example - network graph A) site.css and font.css
block B) font.css loaded after DOMContentLoaded

Render blocking example - visual A) site.css and font.css block
B) font.css loaded after DOMContentLoaded 1.2s 1.4s 1.6s 1.8s 2.0s 1.2s 1.4s 1.6s 1.8s 2.0s

How to reduce render blocking (technically)? Load essential content first
and use caching. For example: • Split CSS into files by media query • Delay loading styles that do not impact initial display. E.g. jQuery UI widget stuff. • Most JavaScript is not needed initially. Mark it async.

Difficulties reducing render blocking • CMS and framework behaviour (E.g.
WordPress) • CSS that includes external resources (fonts, other sheets). • JavaScript dependencies (because the load order matters). E.g. jQuery plug-ins often assume jQuery is already loaded. • Web fonts...

Web fonts require special consideration Options: • Load fonts ASAP
(in <head>) • Cache if possible/allowed • Compare font services. Local > remote • Design for flicker using similar native fonts Single web font requiring 2 requests, render blocking for almost 2 seconds

Critical path rendering

• A page is not simply “loaded/not loaded” • Identify
page goals • Remove render blocking to show critical content fast • Simple example: Your client is a plumber and the main goal of their website is to drive phone enquiries… What’s critical? Critical path rendering

Simple example Critical: • Basic layout and styles • The
phone number Not critical: • jQuery • Hero image slider • A little person at the bottom of the page talking about their services

Advanced example The Guardian separated site content into three groups:
Core content Essential HTML and CSS, usable non- JavaScript-enhanced experience Enhancement JavaScript, geolocation, touch support, enhanced CSS, web fonts, images, widgets Leftovers Analytics, advertising, third-party content

The Guardian’s network graph

Should Fix: above-the-fold

Should Fix: above-the-fold • If you use Google PageSpeed, you
might have seen this message. • Don’t even style the whole page in your critical path, just give us enough CSS inline (that’s the key) to display above-the-fold. • Page displays as soon as the HTML is loaded, not a single resource is fetched. It will be fast. • There are times this might not be appropriate. For example, if people could use anchors to jump to a lower section.

There are tools to automate this, though mileage will vary.
Automatically generating ‘above the fold’ CSS

Example: Perth Device Lab above-the-fold CSS Above-the-fold CSS: Full CSS:

Example: Perth Device Lab above-the-fold CSS End of part 1

Part 2: Tips and tools for easy wins

Some background • Gut feeling some sites weren’t as fast
as they could be ◦ Kinda thought it was a hosting issue... ▪ But maybe it was our chops... • Or maybe it was actually image compression... ◦ Or maybe… ...So we made a plan.

Measuring performance

Measuring performance Exactly what DT said: • PageSpeed Insights -
Highlights issues and probably gives insight to what Google look for regarding SEO and performance • Chrome developer tools, especially the Network tab • WebPagetest - Dev tools run on a remote computer. Easier to analyse results.

Wayward redirect • Caching and redirects are not visible. Easy
to miss things. • Here’s our top level nav. “About” links to /about • But /about was set to redirect to /about/

We combined a 301 moved permanently header with a directive
to never cache it. Oops. At least we cached the redirect?

What affects performance?

Lots of things We documented everything could think of, and
it still probably isn’t complete → Not all equal in impact or effort.

Focus on these easy wins and patterns Server & backend:
• Gzip • PHP 7 • Configuration & plugins (caching etc) for common platforms (E.g. WordPress) • Optimal cache-control policy • http/2 Post launch: • CloudFlare CDN • Full page caching (Varnish, Section.io, etc) Implementation: • Critical path rendering • Build pipeline: compressing JS/CSS/images • Build pipeline: concatenation (non http/2) • Images: resizing, lazy load, responsive resolution, low-res placeholders, WebP • UX: Respond quickly to input • Lighter alternatives to third-party JS libraries

http/2

What is http/2? • New, faster version of http protocol.
Backward compatible, most non-web people will never know it’s a thing. • No connection overhead for each file you request from a given domain after the first one. This makes a big difference. • Without a connection penalty, you care only about the amount of data you fetch, not the number of files. • No need to concatenate all your CSS and JavaScript into single files!

http vs http/2 Proof: httpvshttps.com • “Each test loads 360
unique, non-cached images (0.62 MB total).” • That’s really handy when you’re thinking about critical path, as you don’t need to concatenate assets, so less downloading, more from cache, etc.

http/2 support Remember, it’s backward compatible. But these browsers will
benefit:

Can you use http/2? • Only works over HTTPS. But
Let’s Encrypt is free. • http/2 must be supported by the web server. • Many hosts haven’t enabled it. VPS more likely. • Tip: In Chrome network tab, enable Protocol column

Tip: CloudFlare supports http/2 http http/2 At 2 seconds At
3 seconds Literally searching for “http://” and replacing with “https://” reduced load time by 1 second.

More easy wins

Gzip • Web server plug-in that ‘zips’ network data •
Available with most web hosts • Needs to be enabled! (.htaccess or equivalent) • Shrinks HTML, CSS, JS files up to ~80%

WebP • New image format • Replaces JPEG and PNG
(i.e. lossy and lossless) • But about 25% smaller filesize than either • A bit of .htaccess (or equivalent) and a build script makes this seamless

PHP 7 • Using PHP 5.6, a simple WordPress page
takes around 500ms to generate. • Swapping to PHP 7 reduced the time to under 200ms.

What not to ‘optimise’

• Most performance benefits come from easy-wins and patterns •
Don’t make your job harder stressing about saving keystrokes, or using one less DOM element to construct a page. • Doing that adds complexity (obscurity), slow you downs, makes maintenance harder, and you’re guessing it will make a difference. What not to ‘optimise’ End of part 2

Summary

Summary • Know your browser: understand render blocking and critical
paths • Know your tools: play with WebPagetest and Chrome network tool • Focus on easy wins to make huge improvements without spending more time per build • Adopt HTTP/2 now. Optimise asset pipeline later • Recommend reading The Smashing mag case study and Google’s guide to website performance

Thank you Questions? Chris Botman Twitter: @botman

Website Performance

Website Performance

Other Decks in Technology

Featured

Transcript