Score up lighthouse

Woohyun Jang
3 min readJul 16, 2022

--

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 contentEditable attribute
  • Any element with a taindex set 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@12

SEO

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

--

--