Повысьте производительность своего веб-сайта с помощью этих проверенных методов.
В моей последней компании мы преобразовали нашу старую громоздкую тесно связанную CMS в Jamstack — несвязанный список сервисов для улучшения управления контентом. Благодаря этому пути наш веб-сайт занял место в результатах поиска Google в пятерке лучших в своем домене/категории.
В этом путешествии мы периодически исследовали и выбирали лучшие инструменты и методы, чтобы улучшить работу нашей веб-страницы, измеряя наш успех с помощью Lighthouse Score.
Примечание. Lighthouse — это инструмент из браузера Chrome, который запускает несколько тестов вашего веб-сайта и сообщает о результатах в разных категориях.
Маяк разделил очки, прежде чем мы погрузимся в достижение большего количества очков. Давайте разберемся, как рассчитываются баллы маяков и как баллы взвешиваются по разным показателям.
Вот как весовые коэффициенты маяка распределяются по этим показателям. Узнайте подробнее об этих метриках, это хорошо оплачивается
Итак, вот список предпринятых нами инициатив, которые привели к положительным результатам в оценке Lighthouse. Я также упомяну, на какие показатели влияет реализация
ССР или ССГ
Это будет самый полезный шаг, который даст огромный скачок в вашем счете маяка. Кроме того, это необязательный шаг, если вы написали свой веб-сайт с использованием таких библиотек, как React, Vue или Angular и т. д.
Одностраничное приложение создает содержимое страницы один раз после ее инициализации, что занимает довольно много времени после загрузки страницы в браузере. поэтому он отобразит начальный пустой экран без содержимого, а затем закрасит весь экран. Google SEO накажет ваш сайт за отсутствие контента.
Большинство современных библиотек имеют поддержку рендеринга на стороне сервера. Установка и запуск вашего сервера с минимальными затратами или вообще без них займет несколько дней.
SSG похож на SSR, но он предварительно отображает все страницы и маршруты в статические файлы во время сборки и обслуживается по запросу клиента. Это намного быстрее по сравнению с SSR, поскольку во время запроса клиента не выполняются вызовы API. Чтобы узнать больше о подробном сравнении, прочитайте его в разделе SSR vs SSG.
Метрики: первая отрисовка содержимого, индекс скорости, так как DOM обрабатывается без ожидания, пока библиотека отрисует содержимое.
Сжатие изображений, специальные возможности
Качественное изображение на вашей веб-странице оказывает серьезное влияние на клиентскую сторону. Если изображение не оптимизировано для мобильных устройств, пользователь покинет сайт, так как для загрузки изображения требуется больше времени. Вы можете использовать некоторую скелетную или загрузочную анимацию, чтобы сообщить пользователю, что это будет временное исправление, но все же приведет к плохой оценке маяка.
Существует несколько сервисов, которые могут предоставить несколько версий вашего изображения разного качества и размера. (Оптимизация изображений с содержанием)
- Webp :преобразование изображения в формат webp, который лучше подходит как для сжатия с потерями, так и без потерь, имеет меньший размер по сравнению с PNG.
2. Адаптивное изображение. Используйте тег изображения с атрибутами srcset и sizes, которые были недавно добавлены для поддержки адаптивных изображений. Если у вас есть такое же изображение для мобильного разрешения, добавьте его, и браузер автоматически выберет лучшую версию.
<img srcset="elva-fairy-480w.jpg 480w,
elva-fairy-800w.jpg 800w"
sizes="(max-width: 600px) 480px,
800px"
src="elva-fairy-800w.jpg"
alt="Elva dressed as a fairy">
3. Размытие изображения:использование размытого изображения в качестве замены до загрузки исходного изображения — это метод, изначально использовавшийся в Facebook. (Ссылка на оригинальную статью https://engineering.fb.com/2015/08/06/android/the-technology-behind-preview-photos/). Создавайте изображения низкого качества во время сборки и убедитесь, что ваше приложение использует их во время начальной загрузки.
<image src="blurred.jpg">
<image src="original.jpg" style="display: none">
// JS
imageTagRef.onload(() => {
imageTagRef.style = "display: inline";
// Code to hide the blurred image.
})
4: Размер имеет значение. Определение размера вашего изображения повлияет на изменение размера макета. Поэтому постарайтесь заранее определить ширину и высоту секции, чтобы изображение могло заполнить пространство.
4. Альтернативный текст.Альтернативный текст для изображений повышает показатель доступности вашего сайта. Думайте не только о баллах, ваш контент может достичь более широкой аудитории с помощью небольшого шага, поскольку контент должен быть доступен для всех людей, и это является основным правом.
Если вы хотите узнать больше о специальных возможностях и шагах по реализации на своих веб-сайтах, не стесняйтесь Подписаться или оставлять комментарии под этой статьей.
Метрики: кумулятивное изменение макета, наибольшая отрисовка контента значительно повышают оценку, эти метрики имеют больший вес при распределении оценок.
Загрузка скрипта
Порядок загрузки скрипта будет самой простой реализацией с точки зрения кода.
<script defer src="react.js"></script> <script defer src="my-library.js"></script>
отложенный или асинхронный
deferзагружает ваш скрипт асинхронно, но выполняется только после завершения синтаксического анализа документа.
async загружает ваш скрипт асинхронно и сразу же выполняется.
Оба атрибута в теге script имеют схожие функции, за исключением того, что первый из них играет важную роль в оценке маяка.
Краткое пояснение: используйте defer, это улучшит первую содержательную отрисовку. Здесь было упомянуто несколько техник.
Одна из общих вещей, которую мы сделали вместе с откладыванием наших скриптов, — это также отсрочка сторонних скриптов, таких как тег Google. Поскольку помимо вашей платформы, все технические специалисты обычно используют Google Analytics вместе с несколькими сторонними библиотеками для отслеживания и измерения производительности веб-сайта и обнаружения пользователей. Эти сценарии иногда воздействуют на DOM и мешают дальнейшим изменениям макета.
Показатели: первая содержательная отрисовка, совокупное изменение макета.
Предварительно загрузить стили
Таблица стилей определяет размер макета для каждого раздела. Если ваши стили загружаются еще до анализа DOM, стили применяются на этапе анализа DOM (подробная статья).
<link rel="preload" href="my-styles.css">
Показатели: совокупное изменение макета.
Веб-компоненты
Причина, по которой я добавил эту инициативу в качестве последней, заключается в том, что она является самоуверенной и, вероятно, вам это действительно не нужно и может быть излишним для вашего технического стека. Но если у вас есть надлежащие ресурсы и долгосрочная стратегия для вашей CMS, то это будет правильный выбор.
Веб-компоненты — это набор API-интерфейсов веб-платформы, которые позволяют создавать новые настраиваемые многократно используемые инкапсулированные теги HTML для использования на веб-страницах и в веб-приложениях.
Я объяснил, как веб-компоненты работают под капотом, в моей предыдущей статье. Я не буду объяснять здесь плюсы и минусы, мы увидели возможность, и после долгих испытаний и итераций мы увидели, что страницы, обработанные с использованием веб-компонентов для CMS, имеют значительно более высокие оценки по сравнению с React или любыми js-фреймворками.
Следующий вопрос, который возникает, касается продуктивности разработчика и кривой обучения в веб-компонентах. Вам не нужно полагаться на собственный API, для решения этой проблемы существуют такие фреймворки, как Stenciljs, Svelte, и есть хорошая экосистема разработчиков вокруг него.
Заключение
Я настоятельно рекомендую начинать с самых простых инициатив и измерять свой балл маяка. Это бережливая стратегия, состоящая в том, чтобы убедить вашего коллегу или менеджера представить другие инициативы.
Есть несколько методов, которые я не упомянул здесь, которые не дали никаких улучшений, некоторые привели к отрицательным оценкам, если вы хотите узнать об этом больше, пожалуйста, оставьте комментарий, я напишу подробное описание в моей следующей статье.
