Создавая веб-сайт для производства, вы хотели бы, чтобы у всего мира было отличное впечатление от его использования. Одним из лучших инструментов для этой цели является Lighthouse, инструмент для разработчиков Chrome, который анализирует, насколько ваш сайт отличается по разным показателям.

К сожалению, добиваться идеальной оценки Lighthouse непросто. Создавая свой сайт-портфолио, я начал со следующей оценки:

Но после нескольких простых шагов мне удалось повысить оценку в каждой категории до 90+.

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. Это, в свою очередь, означает более быструю загрузку, меньшее потребление данных и, следовательно, более быстрый сайт.

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

5. Используйте alt, aria-label и aria-labelledby

Эти теги помогают улучшить Доступность веб-сайта.

alt: атрибут alt – это атрибут HTML, используемый в документах HTML для указания альтернативного текста, который должен отображаться, когда элемент (обычно изображения) к которому он применяется, не может быть отрендерен.

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

aria-label: Атрибут aria-label используется для определения строки, обозначающей текущий элемент. Используйте его в случаях, когда текстовая метка не видна на экране.

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

aria-labelledby: аналогичен атрибуту aria-label, но его следует использовать, если есть видимый текст, помечающий элемент.

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

Подведение итогов

Мы применили несколько приемов, чтобы улучшить все аспекты Lighthouse Score для вашего веб-сайта. Используйте их на своем веб-сайте и наблюдайте волшебство перед своими глазами.

Желаем вам 100 отличных баллов для Lighthouse!

Согласно исследованиям, записывая свои цели ручкой и бумагой, вы повышаете вероятность их достижения на 21%–39%. Ознакомьтесь с этими блокнотами и журналами, чтобы облегчить путь к достижению своей мечты: https://www.amazon.com/Tapajyoti-Bose/e/B09VGDDHRR

Нужен фрилансер по фронтенд-разработке с самым высоким рейтингом, чтобы избавиться от проблем с разработкой? Свяжитесь со мной на Upwork

Хотите увидеть, над чем я работаю? Загляните на мой Персональный сайт и GitHub

Хотите подключиться? Свяжитесь со мной в LinkedIn

Первоначально опубликовано на https://dev.to 7 ноября 2021 г.