Проверить скорость загрузки сайта можно онлайн-сервисами и расширениями. Влияет на поведенческий фактор. Пользователей раздражает долгая загрузка страницы. Они предпочитают перейти на следующий сайт из выдачи. Поисковики видят, что пользователь вернулся и перешел на следующий результат и снижают позицию долго загружающегося сайта в выдаче.
Разработчики компании «Веб-Фокус» проанализируют ваш сайт, распишут список рекомендаций и описание обнаруженных проблем по степени важности. Услуга тестирования включает:
- Поиск и оптимизацию блокирующих синхронных функций в скриптах
- Сжатие и объединение стилей, изображений и скриптов
- Сокращение количества HTTP запросов к серверу и отложенная (ленивая) загрузка файлов, не участвующих в рендере
- Подбор и перенос сайта на другой сервер
- Настройка кэширования
- Тестирование скорости на мобильных телефонах
Компания «Веб-Фокус» использует для тестов собственные алгоритмы, инструменты и онлайн-сервисы.
Оценить и оптимизировать скорость загрузки сайта помогает сервис от Гугла. PageSpeed Insights сочетает в себе оценку двух показателей. Первый—анализ синтетических тестов. Второй показатель — анализ полевых тестов. Синтетические (лабораторные) делаются вручную, полевые используют данные накопленные от пользователей. Выдает рейтинг от 0 до 100, рекомендации по ускорению, описание найденных проблем. Баллы собираются из шести метрик:
- Время закачки первого контента. Отчитывается от начала загрузки, до появления элемента.
- Время загрузки для взаимодействия.
- Индекс скорости загрузки.
- Совокупное время блокирования от первой отрисовки до загрузки.
- Рендеринг большого текста и тяжелой графики.
- Величина смещения контента при загрузке.
Существуют и другие онлайн-сервисы проверки быстродействия сайта. Инструменты, аналогично выдают оценку в виде рейтинга и рекомендаций по оптимизации.
Оптимальная скорость загрузки сайта – 2 секунды. При ранжировании страницы сайта в Google, бот анализирует быстродействие каждой страницы по отдельности, а не всего сайта целиком. Скорость необходимо сканировать периодически для каждой страницы, находящейся в индексе поисковиков и часто посещаемые страницы (личный кабинет, корзина).
Наши разработчики с опытом оказания услуг по ускорению скорости загрузки выделили ряд основных причин замедления сайта:
- Избыток графики и видео. Дизайнеры любят размещать анимации, эффекты, красивые видео, слайдеры. Оформление текста и некоторых блоков можно повторить на css, но сложные анимации, содержимое слайдеров с тяжеловесными картинками, повторить средствами верстки не получиться. Время загрузки графики, видео, скриптов отображается на вкладке Network панели DevTools. Картинки и видео рекомендуется сжимать перед размещением и оптимизировать. Графику можно подгружать после рендеринга
- Плагины, дополнения, скрипты замедляют приложение из-за конфликтов и плохого кода. Браузер работает только в одном потоке. При подключении скрипта к сайту, при наличии сложных вычислительных операций или циклов, блокируются все отрисовки, выполнение других скриптов, приложение перестает откликаться, пока не закончит синхронное вычисление. Избежать подвисания и медленную загрузку по причине выполнения сложных вычислительных операций помогают асинхронные операции. JavaScript предлагает встроенные методы отложенного вызова ресурсоемких вычислений — setTimeOut, Promise, Async/Await. Движок начинает выполнение скрипта регистрацией (инициализацией) всех вызываемых функций, потом выполняются все синхронные операции, затем, если нет никаких запланированных перерисовок и стек вызовов пустой, движок приступает к выполнению асинхронных операций. Они дают между выполнением скрипта отдышаться странице и выполнить возникшие перерисовки и срочные вычисления. Для ускорения приложения использование этих методов недостаточно. Нельзя добавлять на сайт десятки скриптов (библиотеки, фреймворки) одновременно и ожидать полную загрузку за 2-5 секунд. Каждый фреймворк и библиотека должны подбираться с умом, а не добавляться ради использования двух-трех функций
- HTTP используется при подключении скриптов, картинок, стилей, библиотек. Чем больше компонентов, тем медленнее приложение. Для сокращения количества HTTP запросов, используется перенос части запросов на веб-сокеты, объединение библиотек, нескольких логотипов в одну картинку (css-спрайты), отложенная, асинхронная загрузка дополнительных компонентов после полной загрузки страницы (LazyLoad)
- Удаленный хостинг от компьютера пользователя находится далеко. Желательно для региональных порталов брать хостинг в том же регионе. Трафик, идущий от пользователя передается провайдеру и проходит через множество узлов, пока не достигнет хостинга. Обратный ответ идет по тому же маршруту. Узнать географическое расположение хостинга можно у техподдержки. Сервер необходимо выбирать не только исходя из местоположения, но и в соответствии с задачами, которые он будет выполнять и нагрузкой. Включенное кэширование позволит клиентскому приложению не загружать все содержимое страницы при повторном посещении, сократит число обращений к серверу
От скорости работы ресурса зависит поведение пользователей, позиция в поисковой выдаче. На высоконагруженных приложениях скорость зависит от многих факторов и для вычисления необходимо проанализировать приложения конкурентов. Краткий гайд для самостоятельного ускорения:
- Сокращайте количество запросов. Перенесите некоторые файлы из базы данных в статичную загрузку, объедините css, js файлы, не перемешивая их с библиотеками и фреймворками, чтобы не было конфликтов пространства имен. Для этих целей существуют специальные сборщики модулей, объединяющие файлы, с возможностью гибко настраивать минификацию и объединение – Gulp, WebPack, Grant… Сборщики идут в пакете с некоторыми фреймворками (VUE, Angular, React…) и при сборке проекта фреймворк объединяет файлы самостоятельно
- Минификация необходима для уменьшения размера загружаемых файлов. Сжимайте скрипты и стили онлайн-инструментами или плагинами для текстового редактора и переместите скрипты в конец файла, перед закрывающим тегом (</body>)
- Сжимайте размер изображения, обрезайте лишнее и удаляйте метаданные. Если на картинке нет прозрачности, используйте jpg. Такой формат весит меньше, чем png и gif. Оптимизацию изображений, при отсутствии знаний фотошопа, делают онлайн-инструментами. Объединяйте логотипы, иконки соц-сетей в css-спрайты, используйте графику требуемого размера
- Подбирайте хостинг в зависимости от задач, которые будут реализовываться и с учетом географического расположения
Онлайн-сервисы помогают проверить скорость загрузки сайта, дают рекомендации, но без знаний в области веб-программирования самостоятельно ускорить приложение проблематично.