Читайте нас в телеграм:

Верстальщик от бога

Самый большой канал по верстке в телеграм

Программист от бога

Божественный юмор о программистах

Тестировщик от бога

Божественный канал о тестировании

АйТи собес

Логический задачи с айтишных собеседований

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

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

Мне было любопытно, какие приемы разработчики используют для оптимизации своих блогов и портфолио, чтобы улучшить пользовательский опыт. Я довольно много внимания уделяю оптимизации, поэтому я решил разобраться, существуют ли какие-то способы оптимизировать веб-страницу, вроде уменьшения общего веса проекта, использования сервиса 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
  • Удалите неиспользуемые зависимости
  • Вовремя обновляйте зависимости

Читайте также

Обсуждение

ОСТАВЬТЕ ОТВЕТ

Пожалуйста, введите ваш комментарий!
пожалуйста, введите ваше имя здесь

читайте нас в телеграм

Верстальщик от бога

Самый большой канал по верстке в телеграм

Программист от бога

Божественный юмор о программистах

Тестировщик от бога

Божественный канал о тестировании

АйТи собес

Логические задачи на собеседованиях в IT

Фронтендер от бога

Божественный канал о тестировании

Mobile Dev Lib

Популярное

10 опенсорсных инструментов в помощь разработчику

Так как людей в ИТ все еще не хватает, и не только в США, нагрузка на одного разработчика остается большой. Невозможные дедлайны, задачи по продуктивности не учитывающие наличие лишь 24 часов в сутках, и при этом они хотят, чтобы ни одного бага. Что поможет разработчику в этой потогонке? Опыт говорит, что помогут хорошие инструменты.

Как войти в Java в 2021 году

Советы преподавателя как войти в Java в 2021 году. Что почитать по Java, как найти галеру, книжки по Java, competitive programming

Выбираем между React и Angular

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