April 9 is CSS Naked Day when some webmasters unlink their stylesheets so that the page is rendered using the default values. Reverting to the defaults should actually improve most hatmaker (as in mad style and no logical substance) websites, but it turns out lots of tweeking is actually required to pass Google’s lighthouse audits.
Some basic things that need to be set:
Font Size Lighthouse’s Document doesn’t use legible font sizes in it’s SEO (as opposed to Accessibility audit for some reason) is one of the most basic errors to avoid.
Historically, landmark elements were divs with ARIA landmark roles. Nowadays, flow content elements have Sectioning content elements.
The Living Standard has a Sections page which bundles body, article, section, nav, aside, h1…h6, hgroup, header, footer and address into this group. All these have their initial display value set to block.
For some reason not included here, but in Grouping content are main, search, blockquote…
Some elements in the spec are not recognised by lighthouse or tidy.
Mobile First Google’s mobile-friendly page now redirects to a page for its lighthouse testing tool.
This is the output I got as it built its report:
LH:status Auditing: Uses HTTPS +6ms LH:status Auditing: Has a `<meta name="viewport">` tag with `width` or `initial-scale` +34ms LH:status Auditing: First Contentful Paint +21ms LH:status Auditing: Largest Contentful Paint +194ms LH:status Auditing: First Meaningful Paint +36ms LH:status Auditing: Speed Index +31ms LH:status Auditing: Screenshot Thumbnails +918ms LH:status Auditing: Final Screenshot +2ms LH:status Auditing: Total Blocking Time +5ms LH:status Auditing: Max Potential First Input Delay +41ms LH:status Auditing: Cumulative Layout Shift +23ms LH:status Auditing: No browser errors logged to the console +6ms LH:status Auditing: Initial server response time was short +9ms LH:status Auditing: Time to Interactive +9ms LH:status Auditing: User Timing marks and measures +7ms LH:status Auditing: Avoid chaining critical requests +13ms LH:status Auditing: Avoid multiple page redirects +9ms LH:status Auditing: Web app manifest and service worker meet the installability requirements +13ms LH:status Auditing: Configured for a custom splash screen +24ms LH:status Auditing: Sets a theme color for the address bar.
Creating a basic skeleton At time of writing, this is a bit of a schlep because the recommended command
hugo new site whatever_name does not produce any basic layouts files to get a newbie started. So rather run
hugo new theme whatever_name which will produce themes/whatever_name. Then do
mv themes/whatever_name . rmdir themes then
cd whatever_name hugo server will bring up a simple Hugo site on http://localhost:1313 you can start altering to your taste.