Create a page that enhances a Lighthouse Page Load Report

ben · February 8, 2024, 4:56am

It would be great to get a bit more support for this request. Please vote!

This is the code that Wappler produces:

<!doctype html>
<html>

<head>
  <base href="/">
  <meta charset="UTF-8">
  <title>Untitled Document</title>

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="/bootstrap/5/css/bootstrap.min.css" />
  <link rel="stylesheet" href="/css/style.css" />

  <script src="/dmxAppConnect/dmxAppConnect.js"></script>
  <script src="/dmxAppConnect/dmxRouting/dmxRouting.js" defer></script>
</head>

<body is="dmx-app" id="junk">
  <div is="dmx-view" id="content">
    <%- await include(content, locals); %>
  </div>
  <script src="/bootstrap/5/js/bootstrap.bundle.min.js"></script>
</body>

</html>

Lighthouse reports:

If this were to change to:

<!doctype html>
<html lang="en">

<head>
  <base href="/">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="Project Description">
  <title>Untitled Document</title>

  <link rel="preload" as="script" href="/dmxAppConnect/dmxAppConnect.js">
  <link rel="preload" as="style" href="/bootstrap/5/css/bootstrap.min.css" onload="this.onload=null;this.rel='stylesheet'">
  <link rel="preload" as="style" href="/css/style.css" onload="this.onload=null;this.rel='stylesheet'">

  <script src="/dmxAppConnect/dmxAppConnect.js"></script>
  <script src="/dmxAppConnect/dmxRouting/dmxRouting.js" defer></script>
</head>

<body is="dmx-app" id="main">

  <div is="dmx-view" id="content">
    <%- await include(content, locals); %>
  </div>

  <script src="/bootstrap/5/js/bootstrap.bundle.min.js"></script>
</body>

</html>

Lighthouse reports:

This would give the newly created project a better optimization chance.

But, while we are at it, to assist in getting a footer to the bottom of the page add the following classes:

<body is="dmx-app" id="main" class="d-flex flex-column min-vh-100">

  <div is="dmx-view" id="content" class="flex-grow-1">
    <%- await include(content, locals); %>
  </div>

Even if there is no footer, these additions will not harm the layout.

Lastly, I have often wondered why there is a choice to apply the App Root to the BODY or the HTML tag? Why not just apply it to the HTML tag and be done with it?

If there is no reason behind this, then the final code would look like:

<!doctype html>
<html lang="en" is="dmx-app">

<head>
  <base href="/">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="Project Description">
  <title>Untitled Document</title>

  <link rel="preload" as="script" href="/dmxAppConnect/dmxAppConnect.js">
  <link rel="preload" as="style" href="/bootstrap/5/css/bootstrap.min.css" onload="this.onload=null;this.rel='stylesheet'">
  <link rel="preload" as="style" href="/css/style.css" onload="this.onload=null;this.rel='stylesheet'">

  <script src="/dmxAppConnect/dmxAppConnect.js"></script>
  <script src="/dmxAppConnect/dmxRouting/dmxRouting.js" defer></script>
</head>

<body id="main" class="d-flex flex-column min-vh-100">

  <div is="dmx-view" id="content" class="flex-grow-1">
    <%- await include(content, locals); %>
  </div>

  <script src="/bootstrap/5/js/bootstrap.bundle.min.js"></script>
</body>

</html>

Update:

It would be beneficial for assistive technology to rename the DIV tag to MAIN. This would eliminate having to declare role="main"

The final version would now be:

<!doctype html>
<html is="dmx-app" lang="en">

<head>
  <base href="/">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="Project Description">
  <title>Untitled Document</title>

  <link rel="preload" as="script" href="/dmxAppConnect/dmxAppConnect.js">
  <link rel="preload" as="style" href="/bootstrap/5/css/bootstrap.min.css" onload="this.onload=null;this.rel='stylesheet'">
  <link rel="preload" as="style" href="/css/style.css" onload="this.onload=null;this.rel='stylesheet'">

  <script src="/dmxAppConnect/dmxAppConnect.js"></script>
  <script src="/dmxAppConnect/dmxRouting/dmxRouting.js" defer></script>
</head>

<body id="main" class="d-flex flex-column min-vh-100">

  <main is="dmx-view" id="content" class="flex-grow-1">
    <%- await include(content, locals); %>
  </main>

  <script src="/bootstrap/5/js/bootstrap.bundle.min.js"></script>
</body>

</html>

Hyperbytes · February 8, 2024, 5:13am

That is a pretty amazing boost from such a simple change.

ben · February 8, 2024, 5:29am

Yeh! And my next step is to grow stuff that I can put in my pipe. The tax on tobacco makes smoking a wealth hazard. The health warnings should be replaced accordingly.

Hyperbytes · February 8, 2024, 6:05am

Wife and I stopped smoking 20 years ago (we were both heavy smokers), at current prices we estimate savings of around £250,000 as a result.

sitestreet · February 8, 2024, 8:54am

This is impressive. I hope it’s something that can easily be implemented in Wappler.

guptast · February 8, 2024, 9:16am

Hi Ben, thank you for sharing these tips to improve the speed and performance of websites. Hopefully these will be simple to implement for an excellent outcome.

ben · May 22, 2024, 1:41pm

Bump! Please vote

George · May 22, 2024, 2:02pm

Hey Ben - what is this for a wizardry ? Preload and then discard but make it stylesheet ... hmm

Any articles explaining this?

Btw I ran numerous lighthouse tests and just the preload didn't helped much - the results were also different on each run ...

Cheese · May 22, 2024, 2:25pm

Lighthouse doesn't know if it is coming or going most days. Lighthouse scores need to be taken with a giant pinch of salt. Also it doesn't take to account any host settings (Redis etc) or external configurations such as Cloudflare proxying and caching rules. If you then run Google Page Speed Insights you'll get an altogether different score...

@ben sorry my friend but Lighthouse is, how can one put it... Indecisive at best, and a totally false representation at worst (especially the speed score).

ben · May 22, 2024, 10:02pm

From Defer non-critical CSS | Articles | web.dev

ben · May 22, 2024, 10:35pm

I totally agree

TLTR: It hurts no one to use the results from Lighthouse to improve the site; the site can only benefit.

Lighthouse is so close at hand when I open the site in my web browser. I do take the results with a pinch of salt. But at the same time, it helps me to eliminate mistakes that I make while developing a site - performance, accessibility, best practices and SEO.

How often have I forgotten to add the alt attribute to an image (accessibility)? How often have I not sized the image properly (page speed)? And so, the list goes on.

Lighthouse gives me an indication of what I need to improve.

And do not forget that Core Web Vitals (LCP, FID, CLS) not only affect SEO, but they also do a decent job of quantifying user experience.

Cheese · May 22, 2024, 10:46pm

This I will agree with aside from Performance (if I do five tests I get five different results).
Lighthouse representation of performance is like asking Mystic Meg for a horoscope reading of your website.

patrick · May 23, 2024, 9:18am

You shouldn't use the preload hack on critical css, the preload will load the stylesheet async and you then inject the css when it finished loading. Big change that the page loaded before the css is loaded and you then get an unstyled page untill the css finished loading.

To prevent FAUC you need to load the critical css the normal way (or have it inline) and you can defer all the remaining css.

George · May 23, 2024, 9:39am

Also preloading the dmxAppConnect.js does not make any sense because it has to be loaded first and this is done by the script tag anyway, so actually the preload does nothing, well it only reports positively in Lighthouse - but that is a false positive.

Note that the name 'preload' in when using in the link tags above - actually means delay the load - and not do the load first .... and that is why it should be used only on non critical resources as Patrick explained above.

Cheese · May 24, 2024, 6:32pm

Great resource for all things speedy...