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

Speed up! Critical CSS to the rescue

Speed up! Critical CSS to the rescue

CSSConf Argentina, August 2016
https://youtu.be/VLobYS2ILpg

Comparative video: https://youtu.be/E8SSEa_vXoc

Ami Reynoso

August 24, 2016
Tweet

Other Decks in Programming

Transcript

  1. Hola! Hola! I’m Ami Reynoso I’m Ami Reynoso Frontend dev

    at Mercado Libre Frontend dev at Mercado Libre
  2. over my own needs as a developer USER FIRST Most

    importantly, and above all, I will put the needs of the over my own needs as a developer Most importantly, and above all, I will put the needs of the USER FIRST - A Front End Engineer’s Manifesto - A Front End Engineer’s Manifesto
  3. loads literally fast user perceives it loads fast FAST WEBSITE

    ? FAST WEBSITE ? loads literally fast user perceives it loads fast
  4. 1 NETWORK REQUEST NETWORK REQUEST 1 ~ 600 milliseconds ~

    600 milliseconds 2 SERVER RESPONSE 2 SERVER RESPONSE
  5. ➔ Bundle your assets up! ➔ Use resource hints ➔

    Don’t block the rendering path! ➔ Minify & gzip ➔ Bundle your assets up!
  6. ➔ Bundle your assets up! ➔ Use resource hints ➔

    Don’t block the rendering path! ➔ Minify & gzip ➔ Bundle your assets up! ➔ Use resource hints
  7. ➔ Bundle your assets up! ➔ Use resource hints ➔

    Don’t block the rendering path! ➔ Minify & gzip ➔ Bundle your assets up! ➔ Use resource hints ➔ Don’t block the rendering path!
  8. ➔ Bundle your assets up! ➔ Use resource hints ➔

    Don’t block the rendering path! ➔ Minify & gzip ➔ Bundle your assets up! ➔ Use resource hints ➔ Don’t block the rendering path! ➔ Minify & gzip
  9. ✔ Critical Rendering Path ✔ How to optimize it ✔

    Critical Rendering Path ✔ How to optimize it
  10. ✔ Critical Rendering Path ✔ How to optimize it CSS?

    ✔ Critical Rendering Path ✔ How to optimize it CSS?
  11. ✔ Critical Rendering Path ✔ How to optimize it CSS?

    User perception ✔ Critical Rendering Path ✔ How to optimize it CSS? User perception
  12. .my-awesome-header { background-color: #eee; font-size: 1.5em; color: #111; } .my-awesome-container

    { max-width: 90%; font-size: 1.2em; color: #333; } .my-awesome-title { font-size: 1.3em; font-weight: bold; }
  13. <head> <head> .my-awesome-header { background-color: #eee; font-size: 1.5em; color: #111;

    } .my-awesome-container { max-width: 90%; font-size: 1.2em; color: #333; } .my-awesome-title { font-size: 1.3em; font-weight: bold; }
  14. Javascript magic! But, what about the rest of my styles?

    But, what about the rest of my styles? Javascript magic!
  15. 2 BROWSER CACHE BROWSER CACHE 2 Store if user has

    styles! Store if user has styles!
  16. ➔ Loading script ➔ Resource hint: preload ➔ Check for

    cookie and store ➔ <noscript> fallback! ➔ Loading script
  17. window.addEventListener("load", function(event) { // create element var elem = document.createElement("link");

    // make it a stylesheet link elem.setAttribute("rel", "stylesheet"); elem.setAttribute("type", "text/css"); elem.setAttribute("href", "path/to/full/styles.css"); // append to head document.querySelector("head").appendChild(elem); });
  18. ➔ Loading script ➔ Resource hint: preload ➔ Check for

    cookie and store ➔ <noscript> fallback! ➔ Loading script ➔ Resource hint: preload
  19. ➔ Loading script ➔ Resource hint: preload ➔ Check for

    cookie and store ➔ <noscript> fallback! ➔ Loading script ➔ Resource hint: preload ➔ Check for cookie and store
  20. <?php if(isset($_COOKIE["css"]) && $_COOKIE["css"] = $version): ?> <link href="styles.<?php $version;

    ?>.css" rel="stylesheet"> <?php else : ?> <style> /* inlined Critical CSS */ </style> <script> var version = <?php $version; ?>; function cookie(key, value, expires) { … } if(!cookie("css") || cookie("css") !== version) { // load styles cookie("css", version); } </script> <?php endif; ?>
  21. ➔ Loading script ➔ Resource hint: preload ➔ Check for

    cookie and store ➔ <noscript> fallback! ➔ Loading script ➔ Resource hint: preload ➔ Check for cookie and store ➔ <noscript> fallback!
  22. <style> /* inline Critical CSS */ </style> <noscript> <link rel="stylesheet"

    type="text/css" href="path/to/full/styles.css"> </noscript>
  23. = =

  24. * even coming from a bad experience! awesome results! *

    awesome results! * * even coming from a bad experience!