Create a page that enhances a Lighthouse Page Load Report

Feature Request
#1

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:

image

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:

image

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>
#2

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

1 Like
#3

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. :rofl:

2 Likes
#4

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.

1 Like
#5

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

1 Like
#6

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.

1 Like