Мониторинг производительности и работоспособности веб-сайта: советы и рекомендации

Настройка и запуск веб-сайта или проекта электронной коммерции — это здорово, однако ваша работа еще далека от завершения, когда ваш сайт запущен и работает.

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

Давайте обратим внимание на гипотетический, идеальный сценарий, при котором все веб-сайты в мире функционируют, как должны. Знаете ли вы, что, помимо стремительного роста удовлетворенности пользователей, мы также будем способствовать улучшению окружающей среды?

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

Согласно калькулятору углерода веб-сайта, веб-сайты имеют углеродный след, а средняя страница веб-сайта выделяет 0,5 грамма углекислого газа за просмотр. Это просто медиана.

Если посмотреть на среднее значение, которое также учитывает веб-сайты с высоким уровнем загрязнения, это число достигает 0,9 грамма.

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

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

С появлением быстрых и простых конструкторов веб-сайтов создание веб-сайтов стало доступно каждому. Все, что вам нужно сделать, это зарегистрироваться, выбрать домен, выбрать шаблон и вуаля! У вас есть сайт за считанные секунды.

Однако многие владельцы веб-сайтов игнорируют тот факт, что создание веб-сайта — это только первый шаг. Надлежащее поддержание производительности и мониторинг работоспособности также имеют решающее значение.

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

Аспекты для мониторинга для высокой оценки работоспособности веб-сайта

Основные веб-жизненные показатели

Изображение от автора, октябрь 2022 г.

Статистика Google PageSpeed

Первые показатели, которые вы должны учитывать при проведении тестирования производительности, — это ваши основные веб-жизненные показатели. Эти показатели производительности показывают скорость, стабильность и отзывчивость, помогая вам оценить качество взаимодействия с пользователем на вашем веб-сайте.

Несколько инструментов отслеживают ваши основные веб-жизненные показатели, но многие владельцы веб-сайтов тяготеют к простому инструменту: Google PageSpeed ​​Insights.

После ввода вашего URL-адреса в инструмент вам будет представлен отчет, показывающий, прошли ли вы тест Core Web Vitals, а также любые другие аспекты, за которыми вам нужно следить. Вот три ключевых показателя, которые вы увидите:

Самая большая содержательная краска (LCP)

Стремитесь набрать 2,5 секунды или меньше .

Если ваша оценка превышает 2,5 секунды, это может указывать на следующее: ваш сервер отстает, время загрузки ресурсов не соответствует номиналу, у вас много кодов JavaScript и CSS, блокирующих рендеринг, или рендеринг на стороне клиента медленный.

Задержка первого ввода (FID)

Стремитесь к счету 100 миллисекунд или меньше .

Если ваша оценка превышает это время, вам может потребоваться уменьшить влияние стороннего кода, сократить время выполнения JavaScript, свести к минимуму работу основного потока, сохранить небольшие размеры передачи и небольшое количество запросов.

Совокупный сдвиг макета (CLS)

Стремитесь к счету 0,1 или меньше .

Если ваша оценка превышает это значение, вы можете избежать случайных сдвигов макета, включив атрибуты размера в свой визуальный и видеоконтент (или зарезервировав место с помощью полей соотношения сторон CSS). Избегайте дублирования контента и будьте внимательны при анимации переходов.

Блокировщики скорости страницы

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

• Неиспользуемый код JavaScript и CSS.
• Рендеринг, блокирующий код JavaScript и CSS.
• Неминимизированный код JavaScript и CSS.
• Большие размеры файлов изображений (подробнее об этом ниже).
• Слишком много цепочек переадресации.

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

Другим вариантом может быть включение ранних подсказок, которые сообщают браузеру в ответе HTTP-сервера, какие ресурсы он должен начать загружать, используя «время на обдумывание сервера», тем самым ускоряя загрузку страницы.

Чтобы протестировать свой сайт:

1. Перейдите на https://pagespeed.web.dev/
2. Введите URL-адрес страницы, которую вы хотите отсканировать.

Я бы порекомендовал сначала выбрать домашнюю страницу.

Еще одним удобным инструментом является WebPageTest.org, который также показывает ваши основные веб-жизненные показатели и другие показатели, которые могут помочь вам значительно улучшить производительность и здоровье вашего веб-сайта. Кроме того, это бесплатно!

Просто вставьте URL-адрес страницы в поле поиска, показанное на сайте, и он проведет полный тест из местоположения по умолчанию.

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

WebPageTest покажет вам, где именно находится ваш веб-сайт с точки зрения производительности и что может его замедлить, с помощью сводки производительности, состоящей из четырех ключевых разделов: «Возможности и эксперименты», «Наблюдаемые показатели», «Измерения реальных пользователей» и «Индивидуальные прогоны».

Изображение от автора, октябрь 2022 г.

В UCRAFT мы используем комбинацию таких инструментов, как PageSpeed ​​Insights, Chrome Dev Tools, WebPageTest и некоторых других, чтобы получить четкое представление о том, над чем нам нужно работать, когда речь идет о производительности нашего веб-сайта, особенно с учетом того, что индустрия SaaS уже высокая конкуренция.

Элементы дизайна

Скриншот от автора, октябрь 2022 г.

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

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

Правильно — пришло время привлечь команду дизайнеров.

Оптимизация изображения

Изображения хороши, но они могут замедлить работу вашего сайта, если их размер не соответствует размеру. Обязательно изменяйте размер изображений и избегайте загрузки гигантских файлов, если они не будут отображаться полностью.

Аналогичным образом сжимайте изображения и пробуйте различные типы файлов, такие как WebP, JPEG 2000 и JPEG XR, вместо того, чтобы выбирать более тяжелые файлы JPEG или PNG.

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

Почти все браузеры, включая Chrome, Safari и Firefox, поддерживают атрибут loading=”lazy” для <img> или <iframe>, который указывает браузеру загружать их, когда пользователь приближается к ним.

Убедитесь, что вы не лениво загружаете изображения в верхней части страницы, так как это ухудшит показатель LCP вашей страницы, и Google рекомендует использовать атрибут fetchpriority="high" для изображений в верхней части страницы, чтобы улучшить LCP.

Если вы используете этот атрибут, не нужно предварительно загружать изображения. Вы должны либо предварительно загрузить, либо установить атрибут «fetchpriority» для изображений в верхней части страницы.

Кроме того, используйте преимущество отзывчивости атрибута «srcset», чтобы загружать изображения правильного размера в зависимости от размера экрана, и избегайте загрузки избыточно больших изображений на маленьких экранах. Это значительно поможет улучшить оценку LCP.

Шрифты

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

Переключите внешние шрифты на более веб-безопасные шрифты и попробуйте шрифты Google, если они размещены через CDN Google.

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

Обязательно предварительно загрузите шрифты.

Анимации/дополнительные функции

Само собой разумеется: не переусердствуйте с анимацией, видео, спецэффектами, слайдерами и другими причудливыми элементами.

Приятно включать некоторые интерактивные элементы здесь и там, но перенасыщение вашего веб-сайта слишком большим количеством движущихся «вещей» может раздражать как пользователей, так и ваши серверы.

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

Решение PWA для мобильной оптимизации

Почему бы не пойти по пути оптимизации для мобильных устройств и не превратить свой мобильный сайт в прогрессивное веб-приложение (PWA)?

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

Дополнительные показатели технической эффективности

Время безотказной работы

Время работы показывает, насколько хорошо работает ваш сайт.

Если ваш веб-сайт часто дает сбой или не работает, это повлияет на ваш пользовательский опыт, рейтинг Google и, следовательно, на ваш доход.

Если возможно, стремитесь к тому, чтобы время безотказной работы составляло 99,999%, и протестируйте свой веб-сайт из разных мест.

Инструменты для мониторинга работоспособности:

• СтатусТорт.
• Пингдом.
• Лучшее время безотказной работы.
• Аптаймробот.

Производительность базы данных

Если вы проверили основы, но ваш веб-сайт по-прежнему медленно отвечает, это может быть связано с низкой производительностью базы данных.

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

Как только вы это сделаете, приступайте к оптимизации! Вы можете использовать такие инструменты, как Blackfire.io, чтобы легко выявлять узкие места и находить решения на основе точных данных.

Аппаратное обеспечение веб-сервера

Ваш веб-сайт может зависать, если место на диске заполнено файлами журналов, изображениями, видео и записями базы данных. Обязательно регулярно контролируйте загрузку вашего центрального процессора (ЦП), особенно после того, как вы внедрили обновления или изменения дизайна.

Такие инструменты, как New Relic, могут помочь вам улучшить весь стек за счет эффективного мониторинга и отладки.

Видимость в поиске

Многие метрики, рассмотренные выше, уже оказывают значительное влияние на видимость в поиске.

Поэтому, когда вы запускаете страницы своего веб-сайта с помощью Google PageSpeed ​​Insights и оптимизируете их, вы также делаете важные вещи для своего SEO.

Вы также можете выбрать инструменты для сканирования веб-сайтов, такие как Semrush или Sitechecker.pro, Screaming Frog, DeepCrawl или любой другой инструмент, который лучше всего соответствует вашим потребностям.

Сканеры веб-сайтов помогают найти все типы проблем, например:

• Битые ссылки.
• Сломанные изображения.
• Мониторинг основных веб-показателей.
• Цепочки переадресации.
• Ошибки структурированных данных.
• Неиндексированные страницы.
• Отсутствуют заголовки и метаописания.
• Смешанное содержание.

Убедитесь, что у вас все готово, когда дело доходит до следующих моментов:

• XML-карта сайта . Убедитесь, что ваша карта сайта отформатирована правильно, и проверьте, необходимо ли вносить какие-либо обновления, и повторно отправьте карту сайта через Google Search Console.
• Robots.txt — убедитесь, что вы используете файл robots.txt для своих веб-страниц (HTML, PDF или любые другие немедийные форматы, которые могут читать поисковые системы), чтобы лучше управлять сканирующим трафиком, особенно если вы подозреваете, что ваш сервер может быть перегружен запросы от поискового робота Google.

Безопасность веб-сайта и кэширование

Получите свой SSL-сертификат!

Здоровый сайт — это безопасный сайт.

Даже если ваш сайт загружается вовремя и получает оценку 100/100, пользователи (или поисковые системы) не будут доверять вашему сайту, если он не начинается с https://.

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

Получение SSL-сертификата не является особенно сложным процессом, но может занять много времени, если делать это вручную.

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

Рассмотрите возможность использования CDN

Сети доставки контента (CDN) — это распределенные серверы, работающие в унисон для быстрой доставки интернет-контента.

Другими словами, CDN — это инструмент, который повышает производительность вашего веб-сайта, сохраняя его содержимое на серверах, близких к пользователям, независимо от их географического положения. Это также известно как кэширование.

Если у вас глобальное присутствие, CDN просто необходим! Это увеличит скорость загрузки вашей страницы, снизит затраты на пропускную способность, распределит ваш трафик (уменьшив вероятность того, что ваш сайт выйдет из строя) и повысит безопасность с помощью таких функций, как смягчение последствий DDoS.

Ведущими игроками в отрасли являются Cloudflare, Amazon Cloudfront и Google Cloud CDN. Однако есть много других вариантов, поэтому проведите исследование и выберите лучший CDN для вашего веб-сайта и бизнес-требований.

Настройка брандмауэра веб-приложений

Брандмауэр веб-приложений (WAF) защищает веб-приложения, отфильтровывая подозрительный HTTP-трафик. Он направлен на защиту приложений от таких атак, как:

• Межсайтовая подделка.
• Межсайтовый скриптинг (XSS).
• Включение файла.
• SQL-инъекция.

Ниже приведен список самых популярных и надежных брандмауэров для веб-приложений:

• CloudFlare WAF.
• Брандмауэр GoDaddy.
• Майкрософт Азур.

Или, если вы используете WordPress, вы можете рассмотреть возможность установки таких плагинов, как:

• WordFence.
• Сукури.
• Комплексная безопасность (AIOS).

Вердикт

Это обертка! Как вы можете заметить, производительность и работоспособность веб-сайта зависят от различных аспектов.

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

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

И не забывайте о своем SSL-сертификате и кэшировании.

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

Не забывайте оптимизировать изображения, избегайте тяжелых шрифтов и умеренно используйте анимацию.

Дополнительные ресурсы:

• Как использовать отчет Chrome UX для повышения производительности вашего сайта
• 6 советов по повышению эффективности контекстно-медийной сети Google
• Продвинутое техническое SEO: полное руководство

Рекомендуемое изображение: JulsIst/Shutterstock