Score up lighthouse
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
[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.
maximum-scale more than
[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.
- Any element with the
- 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
List items (
<li>) are not contained within
<ol> parent elements.
<li> tags should be located inside of
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@12
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
You can set the information about allowing or disallowing URIs by User-agent.
The pattern of URIs starts with ‘/’ or ‘*’.
next/image | Next.js
Note: This is API documentation for the Image Component and Image Optimization. For a feature overview and usage…
Preloading responsive images
Starting in Chrome 73, link rel="preload" and responsive images can be combined in order to load images faster. This…