Web Performance

View Github Repository Open presentation in a new window

mattpaulwilliamson

See all presentation from mattpaulwilliamson

Web Performance

0 0

WebPerformance

Presentation

On Github mattpaulwilliamson / WebPerformance

Web Performance

Good morning my names Matt. At little bit about me I studied graphic design. Companies I have worked for in the past are Kiddicare.com, Johnston Press who run local newspapers including Peterboroughtoday.com and play.com. Currently I work as a software engineer at comparethemarket. Can I have a show of hands if anyone here go who went to Deacons School? Today I am going to be talking about web performance.

Too many sites are too slow

- Lots of websites today are to slow.

This makes users angry

- And slow sites lead to a bad user experience

Speed matters?

Why does any of this matter. Walmart.com for every second of improvement they experienced a 2% conversion. - User negativity towards a brand, Tesco did some user testing on this and for one group they delivered a really fast experience and they got some positive feedback to the brand, then they throttled the website and the comments became more negative towards their brand.

User Perception

These numbers here are hard coded we have no control over them anything over 3 seconds is considered not to be working. "40% will abandon a web page if it takes more than three seconds to load" - Akamai Study

Performance + Great UX = Happy Users

So a fast website and a great user experience makes a happy user!

Set Goals

"Usable within 10 seconds on GPRS connections" - BBC News

"SpeedIndex under 1000" - Paul Irish

Load something useful first

Make sure you primary content are the first things on the page you do not want user attention focusing non primary content. Defer all non-essential content.

Test on a slow connection

Always text on slow connections by throttling. There are lots of tool to simulate slow connections and its useful to see how you site behaves on different speeds.
Go to tab. Google Page Speed insight use this tool to validate a build

Go to tab. WebpageTest is a tool written by Patrick Meenan he currently works at Google he built this tool around 2008 and again this is a great tool to use

Desktop Cable

One of the features WPT gives you is to be able to view a video of a website loading up and at different connection speeds, browsers and devices

Mobile 3G

Speed Index

Speed Index is an important metric as it measure the time all visible parts of the page are displayed. Its measured in milliseconds and is reliant on the screen size or viewport

Different ways to measure web performance

  • First view
    • This is the view of the page for someone who has never been to the site before (or has cleared their cache since their last visit)
  • Repeat view
    • This is the view of a page if a user goes only to the page, closes their browser, and then reopens the browser and goes only to that page again as the first page they hit on the site.
  • Flow view
    • This is the view of the page when a customer has previously visited at least one other page on the site.

Critical Rendering Path

  • It is lot's of work for a browser to deliver a fast experience
  • Optimising for performance we need to understanding what happens in when a browser when it receives the HTML, CSS, and JavaScript and renders them into pixels this is known as the critical rendering path
-The critical rendering path is the journey a browsers take to display a page. -Its important to understand whats happening in the browser to be able to optimise for it. -So what happens when the browser receives the HTML, CSS and JavaScript.

Constructing the Object Model

HTML markup is transformed into a Document Object Model (DOM)

1.HTML is converted into the Document Object Model.

CSS markup is transformed into a CSS Object Model (CSSOM)

2.CSS is converted into the CSS object Model.

Render-tree construction, Layout, and Paint

3.Combine DOM and CSSOM to build the Render Tree.

What about JavaScript?

  • Where JavaScript is placed within a document is important
  • JavaScript can modify the DOM and CSSOM
  • JavaScript execution is delayed until the CSSOM is ready
  • JavaScript blocks DOM construction unless explicitly declared as async
1.JavaScript placement in the page is important 2.JavaScript can modify both the DOM and CSSOM 3.CSSOM construction blocks JavaScript execution 4.JavaScript blocks DOM construction unless deferred or loading asynchronously

Things browsers can animate cheaply

Postition, Scale, Rotation and Opacity

CSS transforms and opacity animations are easy for the browser to handle

Layer Creation

Examples

This is called graphical hardware acceleration and uses the GPU (Graphics Processing Unit). Go to tab.

CSS animation top/left vs transform in slow-mo.

Here is short video on the left is an animation using the CPU and on the right an animation using the GPU.

Emulation

Go to tab.

Prototype

  • Rapid Prototype and Create a working front-end quickly
  • Your site will always look different from Photoshop
  • Responsive or Adaptive design changes everything

Some things coming up and already in use to help in performance gains

Task runners

Take advantage of task runners there are some great tools being produced to help with performance gains

Critical Path CSS Tool

Automate performance you can minify, combine, build image sprite, compress images and this way it becomes part of the build process and not a manual task you have to do each time you relase.

GZIP + CDN

GZIP you content on the server.

Use a CDN to deliver your content to users.

For text based files GZIP performs best and can compress a file in a range of 70 - 90 % of it original site. Use a CDN a content delivery network is basically lots of servers that can delivery content to users rapidly. At CTM we use Akamai who claim they are only ever a single hop away from 90% of internet users.

Picture element

Now is the W3C HTML specification, Firefox 33+ and Chrome 38+ support the picture element. This is the future of responsive images.

<picture> 
  <source media="(min-width: 45em)" srcset="large.jpg">
  <source media="(min-width: 32em)" srcset="med.jpg">
  <img src="small.jpg" alt="This is awsome!">
</picture>
The ability to serve up different images to different screens has now been standardised and it part of W3C specification.

will-change property

Hardware Acceleration - when certain operations such as 3D transforms are performed on an element on a page, that element is moved to its own layer. This allows it to render independently from the rest of the page and can be drawn on later.

Moving an element to a new layer is an expensive operation which can delay the start of a transform animation by a noticeable fraction of a second.

will-change: transform;
The will-change property informs the browser an element is going to change so it moves it to a new layer ready for animation.

Summary

  • Validate with PageSpeed Insights and WebPageTest
  • Test on a slow connection
  • Understand the critical rendering path
  • Only animate opacity and transform, avoid painting and layout changes
  • Use emulations and the real device