Perfect Score Page

Code Help HTML/CSS/JS
1

Question:
I’m struggling with making a Perfect score page, using Google’s Lighthouse API. I don’t want to watch a YouTube video as it feels like the coding aspect is gone. I’d much rather ask fellow developers directly.

I don’t currently have code as I just want to learn the basics of it from somebody. If you have time and are willing to help, I will appreciate it!

2

There are three things I find the most important when trying to get a perfect score:

  1. Performance
  2. Acessibility
  3. Best Pratices

Let’s take an approach about the first one: performance.
In the image below there are three things to consider:

It’s important to know what each part of this means and what solution is the most viable. For example, eliminate render block is doing something to prevent CSS from blocking rendering. You can use media queries to mark some CSS resources as non-render-blocking. Here’s an example:

<link href="style.css" rel="stylesheet" media="print" onload="this.media='all'">

media="print" marks the stylesheet as non-critical (since “print” stylesheets don’t block rendering), and onload="this.media='all'" changes it to be used for all media once it has loaded.

Accessibility would be using semantic HTML elements, associated labels in form elements and a good color contrast.

Best Pratices is the same as always:

  • Using https protocol
  • All links having rel=noopener
  • All libraries updated to the last version
  • All page content inside the <main> element

btw, rel=noopener prevents other pages from manipulating your page. For example:

<a href="https://example.com" target="_blank" rel="noopener">This is a safe Replit link</a>
1 Like
3

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.