The Lighthouse Test is not a tool to make a general statement about the quality of a website programming. Lighthouse rather tries to map a metric for the usability of a page from the user's point of view. This includes accessibility, best practices, SEO and of course performance.
The answer to this is relatively simple: the site must first and foremost work and you must be able to get to the information you need quickly.
No more and no less.
The content contains messages and buttons that are displayed in the respective event.
Messages and buttons are defined with an
id, these are set to
display: none; by default via CSS.
The messages are elements that are displayed for the relevant events.
Initially, all IDs are set to
display: none;, so no message is visible.
When an event is triggered, the relevant message is displayed via the ID using the style attribute
|User Browser is not supported by |
|User hardware (number of processor & RAM) are not sufficient.|
|Connection speed is too low.|
<!-- initial --> <div id="nuxt-speedkit__message__unsupported-browser"> Your browser is not supported! </div> <!-- active --> <div id="nuxt-speedkit__message__unsupported-browser" style="display: block;"> Your browser is not supported! </div>
The buttons are interaction elements for the user with which he can make his choice at the relevant event.
Initially, all IDs except for
nuxt-speedkit__button__init-nojs are set to
When an event is triggered, the relevant button is displayed via the ID using the style attribute
More information under Force App initialization or Font load
Force initialization (App, Font)
For Unsupported-Browser and Insufficient Hardware events, an
onclick event must also be set with the
In the event, the global variable
__NUXT_SPEEDKIT_FONT_INIT__ must be set to
|If set, only the fonts are initialised.|
<button id="nuxt-speedkit__button__init-font" onclick="window.__NUXT_SPEEDKIT_FONT_INIT__ = true;" >…</button> <button id="nuxt-speedkit__button__init-app" onclick="window.__NUXT_SPEEDKIT_AUTO_INIT__ = true;" >…</button>
<label for="nuxt-speedkit__speedkit-layer__close"> Close Layer </label>
The layer can be closed via a
for attribute with the