Grzegorz Ziółkowski

Lighthouse report

Time to get interactive as a performance measure

—

by

Grzegorz
in ,

I have already published one post about Progressive Web Apps (PWA) a few months back. It looks like Google is investing a lot of efforts to make it a new standard of building websites. At the last Google I/O, there were a few announcements made related to making PWA a default feature in a few popular boilerplates and CLIs for libraries like React, Preact, Polymer or Vue. I recommend watching the following presentation by Addy Osmani:

HNPWA project

A new project called HNPWA was created to present Hacker News readers as Progressive Web Apps implemented with the different frameworks and libraries. The idea itself was influenced by TodoMVC project. All implementations are validated using Lighthouse tool from Google.

The PRPL pattern

The PRPL Pattern was created by Google and stands for:

  • Push critical resources for the initial URL route.
  • Render initial route.
  • Pre-cache remaining routes.
  • Lazy-load and create remaining routes on demand.

It translates into the following action items:

  • Use HTTP/2 server push to send CSS files or fonts as early as possible. Fallback solution would be to use link rel="dns-prefetch" and link rel="preload".
  • Getting the meaningful pixels on the screen as soon as possible.
  • Introducing an app shell to pre-cache static files, which improves the loading time for the returning visitors.
  • Enable code-splitting and preload async chunks.

Preact on production

This is a quite interesting idea. You can use Preact as a drop-in replacement for React on production to ship less code. They claim it works in 99% of cases, so you still need to tweak the existing code from time to time to make it compatible.

Further reading

 

%d