web performance

with CSS Grid, PWA
...and a few other things

Sheldon Led

Not all brazilians
careers.smartbox.com
Dublin CSS Meetup @sheldonled

web performance

Cache

Compressing (Gzip)

Bundling

Less requests as possible

Minification

Time to First Byte

Stephen Gundee - Twiter
Browser - Critical Rendreing Path

Image taken from @jaffathecake slides (video: https://vimeo.com/254947206)

Browser - Critical Rendreing Path meme

Mobile First

Very powerfull browsers

Less powerfull CPUs

Less reliable connection

Not plugged in

Less memory

Perceived Performance

Focus on most visible content (AKA above the fold)

Lazy-loading

Images

Fonts

Styles

Javascript

Paul Irish - How Users Perceive the Speed of The Web

Video: How Users Perceive the Speed of The Web (2015): Paul Irish

Render Blockers

CSS & JS

Write Less Javascript

Staltz tweet performance

Native > libs

You might not need jQuery

Remove dead code

Refactoring

use CSS for layout & animations

Flexbox

Solves the problem of equalizing height on dynamic contents

Grid

Positioning different shapes of content in 2d

Grid - Support down to IE10


-ms-grid-columns Specifies the width of each grid column within the Grid. Each column is delimited using a space
-ms-grid-rows Specifies the height of each grid row within the Grid. Each row is delimited using a space
-ms-grid-column Specifies in which column of the grid to place the Grid item
-ms-grid-row Specifies in which row of the grid to place the Grid item
-ms-grid-column-span Specifies the number of columns of the Grid that the Grid item spans. Default value is "1"
-ms-grid-row-span Specifies the number of rows of the Grid that the Grid item spans. Default value is "1"
Masonry JS plugin

Progressive Web Apps

PWA

  • Service Worker (cache/offline)
  • Push Notifications (engaging users)
  • Add to Home Screen (1st class citizen)
  • HTTPS

Service Worker

FIRE

Fast

Integrated

Reliable

Engaging

It's a daily progress

“Improving performance is a Journey. Lots of small changes can lead to Big gains”
Addy Osmani - Fast By Default: Modern Loading Best Practices

Conclusion

  • Remove Unecessary JS
    • Don't use JS libs/frameworks unless needed
    • No need of JS for layout
    • remove dead code
  • Delay loading non-critical JS
    • lazy-load strategy
    • Code split
    • Service Workers for cache strategy
  • Use something else
    • Use Flexbox for equalizing div heights
    • Use Grid for positioning different shapes of content in 2d

THANKS

Blog post: How web performance, CSS Grid and PWA are related

www.sheldonled.com