Как ускорить загрузку вашего веб-сайта

Скорость загрузки сайта крайне важна как для поисковой оптимизации, так и для пользователей. Мы перевели статью о технологиях и приемах, позволяющих ускорить загрузку ваших веб-страниц.

Мне было любопытно, какие приемы разработчики используют для оптимизации своих блогов и портфолио, чтобы улучшить пользовательский опыт. Я довольно много внимания уделяю оптимизации, поэтому я решил разобраться, существуют ли какие-то способы оптимизировать веб-страницу, вроде уменьшения общего веса проекта, использования сервиса Google Fonts, использование разных сборок для environment разработки и production environment, или же собственноручное подключение шрифтов.

Результат не заставил себя долго ждать: http://ogzhanolguncu.com. Рассмотрим оценку оптимизации этого сайта.

Как видите, сайт действительно оптимизирован. Разберем пошагово, как достичь такого результата.

Шрифты

Web Safe шрифты

Если вы нацелены на максимальную производительность, вам стоит выбрать один из Web Safe шрифтов. Под Web Safe я подразумеваю:

Arial (sans-serif)
Verdana (sans-serif)
Helvetica (sans-serif)
Tahoma (sans-serif)
Trebuchet MS (sans-serif)
Times New Roman (serif)
Georgia (serif)
Garamond (serif)
Courier New (monospace)
Brush Script MT (cursive)

Эти шрифты самые доступные для пользователей, поскольку они предустановлены на компьютере почти у всех.

Font Display

@font-face {
  font-family: ExampleFont;
  src: url(/path/to/fonts/examplefont.woff) format('woff'), url(/path/to/fonts/examplefont.eot)
      format('eot');
  font-weight: 400;
  font-style: normal;
  font-display: optional;
  unicode-range: U+0020-007F, U+0100-017F;
}

font-display сильно влияет на количество сдвигов страницы из-за рендера (CLS) и, конечно, на производительность. Поэтому стоит использовать optional для производительности и swap для уменьшения CLS.

Поддерживается всеми современными браузерами.

Unicode Ranges

Если вы укажете unicode-ranges, браузеры скачают только необходимые символы (т.е. те, которые будут использованы). Мы ведь не используем арабские, греческие символы, иврит, и т.д. Обязательно указывайте unicode-ranges, если вы не используете перечисленные символы.

Поддерживается всеми современными браузерами.

Прелоадинг

<link
  href="/fonts/Avenir-Roman.ttf"
  as="font"
  type="font/ttf"
  rel="preload"
  crossorigin="anonymous"
/>

Значение preload означает, что вам понадобится этот шрифт сразу после загрузки, поэтому необходимо загрузить его в первую очередь, еще до того, как браузер отрендерил страницу, и только потом загружать остальные. Следовательно, preload не блокирует рендер страницы и улучшает общую производительность.

Google Fonts

<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
  rel="stylesheet"
/>

При использовании Google Fonts, всегда сначала используйте preconnect, тогда браузер начнет новое соединение между отправителем и получателем, чтобы ускорить этот процесс, таким образом улучшая пользовательский опыт наших веб-сайтов и скорость загрузки. И не забудьте выбрать только те font-weight шрифтов, которые вам нужны, потому что чем больше разных font-weight, тем больше размер скачиваемых файлов, поэтому подходите к этому с умом.

Изображения

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

Используйте сервис TinyPng для сжатия изображений без потери качества.

Используйте альтернативные библиотеки и фреймворки

Поскольку этот веб-сайт написан на React, единственным способом уменьшить вес сборки было использование Preact – альтернативы для React, весящей всего 3kB.

Если вы используете сборщик Webpack, как и я, вам необходимо выполнить следующие шаги для перехода на Preact. К слову, я использую Preact для production версии.

Во-первых, установите Preact: yarn add preact
Затем настройте ваш Webpack сборщик, как показано ниже

webpack: (config, { dev, isServer }) => {
    if (!dev && !isServer) {
      Object.assign(config.resolve.alias, {
        react: 'preact/compat',
        'react-dom/test-utils': 'preact/test-utils',
        'react-dom': 'preact/compat',
      });
    }
    return config;
  },

Помимо этого всего, вы еще можете анализировать ваши пакеты с помощью Google Lighthouse (встроенный в Chrome Devtools инструмент). Этот инструмент предлагает альтернативные библиотеки к тем, которые вы уже используете, причем с меньшим весом.

Неиспользуемые зависимости

Пройдитесь по вашим зависимостям в package.json, найдите и удалите неиспользуемые. Несмотря на то, что они не используются, они будут попадать в финальную сборку, таким образом ее вес будет увеличен. Поэтому страница будет грузиться дольше.

Своевременное обновление зависимостей

Своевременное обновление зависимостей на первый взгляд может показаться необязательным, но зачастую разработчики улучшают свои библиотеки, причем как с точки зрения производительности, так и размера. К примеру, ядро 10-й версии Next.js стало весить на 16% меньше. Кроме этого, разработчики добавили встроенный компонент для изображений. До этого мне приходилось использовать внешнюю библиотеку, чтобы работать с изображениями. Я избавился от нее, как только перешел на Next.js 10.

Заключение

Используйте Web Safe шрифты
Указывайте preload при подключении шрифтов
Используйте preconnect при работе с Google Fonts
Используйте font-display: optional или font-display: swap для производительности и CLS
С помощью unicode-range загружайте только необходимые символы
Не включайте в файл подключения Google Fonts неиспользуемые font-weight
Сжимайте изображения
Пользуйтесь меньшими альтернативными библиотеками для вашей production сборки, к примеру, Preact
Удалите неиспользуемые зависимости
Вовремя обновляйте зависимости