Improving Render Performance

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

Transcript

1. Improving render performance @MPOram | @MaydenAcademy
2. @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
3. @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
4. @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
5. @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
6. @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”]
7. @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
8. @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
9. @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!
10. @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
11. @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
12. Thank you! ツ @MPOram | @MaydenAcademy