Score up lighthouse
Performance
Preload Largest Contentful Paint image
In general, we are using image e lazy loading for rendering optimization.
But if a critical image occupies a large area on the first rendered page, do not use lazy loading and preload it. It should be shown to users ASAP.
Put this tag in the <head> tag.
<link rel="preload" as="image" href="your-image.png">It notifies a browser that the image is essential. So the browser loads the image before reading the <img> tag that uses the image.
Using Next.js, set the priority property on the Image component.
<Image priority />Serve images that are appropriately-sized to save cellular data and improve load time.
This is as the title says. Images larger than the maximum size that can be <img> elements are not required.
If you are using the Image component in Next.js, and the layout property is settled as responsive or fill, you should set the sizes property.
It is the maximum width of the <img> element. The default value is 100vw .
Accessibility
[user-scalable="no"] is used in the <meta name="viewport"> element or the [maximum-scale] attribute is less than 5
Users with low vision use the zoom feature on the browser. user-scalable="no" parameter disables zoom on a web page. The maximum-scale parameter limits the amount the user can zoom.
set the user-scalable as "yes” and maximum-scale more than 5 .
[aria-hidden="true"] elements contain focusable descendants
Assistive technologies like screen readers won’t read the focusable element in
aria-hidden="true" element. But keyboard users are able to navigate to it. It can be confused.
There are focusable elements.
<a><area><audito controls><button><iframe><input><select><summary><textarea><video controls>- Any element with the
contentEditableattribute - Any element with a
taindexset to a numeric value other than -1.
Buttons do not have an accessible name
Buttons should have an accessible name. If the button has an icon only, it has to aria-label attribute.
<button aria-label="search">
<svg>...</svg>
</button>List items (<li>) are not contained within <ul> or <ol> parent elements.
<li> tags should be located inside of <ul> or <ol> tag.
Best Practices
Includes front-end Javascript Libraries with known security vulnerabilities
Some third-party scripts may contain known security vulnerabilities that are easily identified and expoited by attackers.
Next.js version 11 has some vulnerabilities. upgrade the version to 12.
$ yarn add next@12SEO
robots.txt is not valid
A robots.txt file tells search engine crawlers which URLs the crawler can access on your site. Set the router to return this file on /robots.txt path.
You can set the information about allowing or disallowing URIs by User-agent.
The pattern of URIs starts with ‘/’ or ‘*’.
Refs.