Developers April 6, 2020

Finally got back to a PageSpeed of 100 on mobile

Jeremy Mauboussin @jeremymauboussin

Today I love Gatsbyjs more than ever. After some time with a Google PageSpeed score as low as 60 on mobile, I am finally back to 100 on both desktop and mobile.

The two recent tweaks are:

  • using typeface-montserrat for importing the font. I import it in the src/layouts/index.jsIt also sets the swap attribute which prevents the "Ensure text remains visible during webfont load" message in LightHouse.

  • using the same logic as gatsby-plugin-segment-js to differ the load of the live chat (third-party script) after the first scroll. This made a big difference to the score.

Both the marketing site and the web app (on a "app." subdomain) work with Gatsby.

My blog posts do not perform as well. They start with an embedded Youtube video which adds a lot of burdens. I currently use gatsby-remark-embedder. Any tip for that part?
anything

  1. 3

    Yeah chat widgets can be crazy one of our customers used hubspot and went from 37/100 to 87/100 after delaying it.

    For youtube i loaded it after a visitor clicked it.

  2. 1

    Hi Jeremy, thanks for sharing the delayed load trick! I'm also trying to speed up my Gatsby site's initial load, hope it will work out.

    Checkout this post on lazy loading youtube videos:
    https://css-tricks.com/lazy-load-embedded-youtube-videos/

    1. 1

      Thanks for the post!
      I have also been advised to use MDX with react-player with lazy loading.

  3. 1

    Hey Jeremy, that's awesome! Did you have any checklists or tools you used to figure out how to improve? What was your process for improving your page?

    1. 2

      Three reports provided me with excellent guidance:

      • Lighthouse ran from my laptop (Google Chrome in incognito mode to prevent extensions from interfering)
      • PageSpeed (from the Search Console) results are based on Lighthouse but still provided slightly different feedbacks.
      • GTMetrix also highlighted problems

      I look at the trace generated by the Lighthouse audit, but it generally does not help me much.

      When looking at the screenshots from the local Lighthouse audit, I saw that it stopped when the live chat finished loading.
      Moreover, the report also gave hints about scripts making the site slower. Those scripts were called and used by the chat tool.

      Most of the time, Lighthouse has a "Learn more" section for each highlighted problem. It points to an article that generally provides solutions to implement.

      Then there was much Googling to find out how to solve the issues. It helped to search the existing Gatsby plugins to find out what people have already done for related problems.

      There was also some trial and error to see how the score varied after applying the changes.

      I hope it helps.

  4. 1

    Awesome, great work! love reading how people make the web faster!