ThatJsDev

⚡ ThatJsDev's Speed Analysis (Lighthouse)

Published on June 20, 2020

TL;DR: it took about half a day to go from an abysmal 48 to a 100 Lighthouse score on my Nuxt.js blog.

![ThatJsDev - Site Speed Analysis](https://www.youtube.com/embed/5PPvNQSgMEM)

Since launch, I haven't paid much attention to the performance of my blog. I read this article by Addy Osmani which explains why website performance is important. How important is the role of javascript in the page rendering cycle? If you want to know The Cost of Javascrip - Read this article

In short, this article includes some best practices to reduce estimated input latency and improve the performance of the site. You will also find 3 crucial tips to keep in mind while using nuxt framework. Want to learn how the webpage is read by the browser?. Read my post titled "Getting Back To The Basics - How Browser Reads HTML, CSS, and JavaScript?"

  • [Improves Site Performance] defer Loading third party scripts has been a breeze when they are needed everywhere. Why do you need a deferred script? Firstly, scripts with defer never block the page. Secondly, scripts with defer always execute when the DOM is ready, but before the DOMContentLoaded event.

  • [Improves Site Performance] Page load speed can also be improved. Declare preload links in the HTML to instruct the browser to download key resources as soon as possible. Learn more https://web.dev/uses-rel-preload/

  • To improve the site's performance and prevent security vulnerabilities add rel="noreferrer" to each link identified in the Lighthouse report. Learn more here https://web.dev/external-anchors-use-rel-noopener/

  • HTTP/2 serves the page's resources faster and with fewer data moving over the wire. Learn more here https://web.dev/uses-http2/

  • Remove unused Javascript & CSS

  • Reduce server response times, by using cache

  • Displays images with aspect ratio

The following are some techniques I used to improve my blog (Nuxt app). Nuxt.js is able to generate a static version of your website with a special Webpack configuration. The biggest innovation of Nuxt is that it comes with its nuxt generate command. This command generates a completely static version of the website. It will generate HTML for every one of your routes and put it inside of its own file. It splits every page automatically in a JS bundle, you don't need to do anything to code-split your application, nuxt takes care of it.

  • Dynamic imports
    • This is one of the techniques you can use to deal with “high estimated input latency and time to be an interactive” issue.

GistArticle: () => import('~/components/GistArticle')

  • Removing full Lodash

    • A quick code scan showed I was only using 1 method of Lodash (cloneDeep is gold). So I ditched the full install and just installed the methods I actually used. Kudos to the Lodash people for supporting this.

  • asyncData Nuxt gives access to an asyncData method inside of your components you can use to fetch data and render it on the server-side. In nuxt.config.js you can generate routes using the following sample function

const routes = async function getAppRoutes() {
  // Fetch available posts and store them in a file
  let posts = [];

  const routes = [
    {route: '/about', payload: {}},
    {route: '/books', payload: {}},
    {route: '/newsletter', payload: {}},
  ];

  let { data } = await axios.get(API_ENPOINT_OF_THATJSDEV_POSTS, header);
  routes.push({route: '/', payload: data});
  posts = data;
  fs.writeFile(`${PATH_TO_CONTANT}/index.json`, JSON.stringify(posts), function(err, result) {
    if(err) console.log('error with index.json', err);
  });
  
  return routes;
};

In your landingPage.vue access all posts using asyncData

async asyncData ({ params, payload }) {
      if (payload) {
        return {gist: payload, isLoading: false};
      }
      const posts = await require(`${PATH_TO_CONTANT}/index.json`);
      return {posts, isLoading: false};
    }

--- Credits