Score up lighthouse

Performance

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 />

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

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 .

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 contentEditable attribute
  • Any element with a taindex set to a numeric value other than -1.

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>

<li> tags should be located inside of <ul> or <ol> tag.

Best Practices

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

SEO

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 ‘*’.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store