Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Improving Render Performance

Mike Oram
September 08, 2020

Improving Render Performance

A short (~10min) lightening talk for PHPSW about improving web page rendering speed

Mike Oram

September 08, 2020
Tweet

More Decks by Mike Oram

Other Decks in Programming

Transcript

  1. @MPOram | @MaydenAcademy 1. Mobile vs Desktop first • Default

    (non-media query) CSS will render quicker • Use the approach that will have the biggest impact on your users • More breakpoints = slower CSS ◦ More overriding = more computation
  2. @MPOram | @MaydenAcademy 2. Reduce re-paints • Some CSS properties

    force a repaint during the render process • Screens can generally only repaint every 16ms • Properties that can* cause a repaint: ◦ CSS Grid ◦ Flexbox ◦ Width/Height ◦ Transform ◦ Margin ◦ Position *varies between browser/version
  3. @MPOram | @MaydenAcademy 3. Simplify your HTML structure • Avoid

    unnecessary HTML • More complex/nested structures take longer to parse and render • Be mindful of libraries/frameworks that require/use additional HTML elements • Bootstrap is a particularly notorious offender
  4. @MPOram | @MaydenAcademy 4. Use modern layout techniques • Float

    for layouts are still very common, but are actually a hack • Flexbox & CSS Grid are designed for layouts • Use Flexbox within individual components e.g header, footer, nav, calendar • Use Grid for page layout/structure
  5. @MPOram | @MaydenAcademy 5. Improve your selectors • Reduce the

    length of your CSS selectors • IDs are the quickest selectors but careful of the precedence issue • Avoid HTML structure dependant selectors such as +,>,~ . • Avoid attribute selectors: [type=”text”]
  6. @MPOram | @MaydenAcademy 6. Limit Google fonts • Limit/reduce the

    amount of non-standard fonts • When using a Google font, you may know the letters required in advance • For a specific heading or your a company name • You can reduce the amount of data loaded by specifying those letters in the link tag href: https://fonts.googleapis.com/css?family=Inconsolata&text=Example
  7. @MPOram | @MaydenAcademy 7. Avoid/reduce slow CSS • Some CSS

    properties are harder to render than others • Properties that can be slower to render: ◦ border-radius ◦ box-shadow ◦ opacity ◦ filter ◦ transform • Using calc to compute CSS values can also slow rendering
  8. @MPOram | @MaydenAcademy 8. Optimize animations • Some properties are

    slower to animate than others: ◦ opacity ◦ transform ◦ gradients • When applying animations that dont run on page load, tell the browser: .element { will-change: opacity, width; } • Only use will-change for slow/laggy animations, don’t pre-optimize!
  9. @MPOram | @MaydenAcademy 9. Focus on the fold • Downloading

    and parsing CSS blocks the page rendering • Load the CSS and HTML above the fold first • Load the rest of your applications CSS after the “fold” HTML • Use content-visibility: auto; to skip rendering elements until they are visible • New in Chrome 85, coming to Firefox, no negative impacts
  10. @MPOram | @MaydenAcademy 10. Do everything else first • Optimize

    your images: https://squoosh.app/ • Reduce HTTP requests • Cache all the things! • Watch my LinkedIn Learning course on “Improving Front End Performance” coming out next month Shameless plug