Чтобы сайт летал: 5 способов прокачать рейтинг в Google Lighthouse

При создании сайта важно, чтобы он отвечал современным стандартам и требованиям пользователя, поэтому, чтобы узнать сильные и слабые стороны ресурса, используются специальные инструменты. Добиться идеальных показателей непросто, но есть способы их поднять. Давайте рассмотрим некоторые из них на примере инструмента от Google под названием Lighthouse.

Описанные ниже методы принадлежат веб-разработчику Тападжьоти Бозе. По его словам, следуя им он смог поднять рейтинг своего сайта-портфолио в каждой категории до 90+ баллов.

Рейтинг сайта в Lightouse до и после методик Бозе

Вот как ему это удалось. 

1. Отзывчивые изображения и художественное оформление

Чаще всего изображения используются так: 

<img src="link-to-image">

Но есть более эффективные способы использовать изображения: 

<!-- Responsive images -->
<img
    srcSet="link-to-img 480w, link-to-img@2x 720w, link-to-img@3x 960w"
    sizes="(max-width: 1200px) 480px, (max-width: 2560px) 720px, 960px"
    src="imgUrl@3x"
>

<!-- Art Direction -->
<picture>
    <source media="(max-width: 1200px)" srcSet="link-to-img">
    <source media="(max-width: 2560px)" srcSet="link-to-img@2x">
    <source media="(min-width: 2560px)" srcSet="link-to-imgl@3x">
    <img src="link-to-img@3x">
</picture>

Так браузер будет загружать только наиболее подходящие по размеру изображения. 

Больше об отзывчивых изображениях и художественном оформлении можно почитать в документации MDN. 

2. Рендеринг на стороне сервера и ленивая загрузка 

Автор сделал портфолио на React и загрузил с помощью «create-react-app», но так как ванильный React вычисляется на стороне клиента, это ухудшает производительность и SEO ресурса. Если переписать сайт на Next.js, показатели Lighthouse значительно вырастут, заметил Бозе. 

Ленивая загрузка — это способ оптимизации скорости работы сайта, который подразумевает отказ от загрузки всего контента на странице, если в этом нет необходимости. Ее использование не сайте обеспечивает огромный прирост производительности при первоначальной загрузке сайта. Реализовать этот способ в приложениях на базе React можно так: 

import React, { lazy, Suspense } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

function Component() {
  return (
    <div>
      <Suspense
          // fallback will be displayed while the lazy component loads
          fallback={<div>Loading...</div>}
      >
        <LazyComponent />
      </Suspense>
    </div>
  );
}

3. Минификация ресурсов 

Минификация JavaScript и CSS положительно сказывается на производительности. Она уменьшает размер загружаемых файлов, а также чистит неиспользуемый код. 

Для минификации подойдет инструмент Webpack. Он минимизирует JavaScript по умолчанию в производственной среде. Для других ресурсов, например CSS, можно использовать плагины, например «css-minimizer-webpack-plugin». Вот как его подключить: 

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
    ],
  },
};

4. Сжатие изображений 

Форматы изображений нового поколения, такие как WebP, сжимаются лучше, чем PNG или JPEG. Это в свою очередь означает более быструю загрузку, меньшее потребление данных и более быстрое функционирование сайта. 

WebP сжимается более чем в 5 раз больше чем JPEG

Вместо растровых изображений можно использовать файлы векторной графики формата SVG, которые также повышают производительность. 

5. Использование тегов 

Теги помогают повысить доступность веб-контента. 

• alt — атрибут HTML, используемый для указания альтернативного текста, который должен быть отображен, когда элемент, к которому он применяется, не может быть отображен;

<img src="link-to-img" alt="image-description">

• aria-label. Используется для определения строки, которая маркирует текущий элемент. Следует применять, когда текстовая метка не видна на экране.

<button aria-label="Close" onclick="dialog.close()">
    X
</button>

• aria-labelledby. По аналогии с предыдущим тегом используется, только если есть текст, маркирующий элемент.

<div role="dialog" aria-labelledby="dialog-header">
    <h2 id="dialog-header">Choose a File</h2>
    <!-- ... Dialog contents -->
</div>

Вот и все. Желаем вам 100 очков в Lighthouse!