Аудит скорости сайта | Студия Флаг

Миша Радионов

Опубликовано: 28 Сен 2022

Вернуться в блог

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

В этой статье я расскажу о принципах загрузки страницы и трех инструментах, которые позволяют измерить скорость сайта: PageSpeed Insights, Lighthouse и DevTools Network.Также расскажу, из-за чего падает скорость загрузки страницы, и как ее оптимизировать. А если вы предпочитаете формат видео, то у меня для вас есть целая лекция на YouTube.

Принципы загрузки сайта

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

Клиенты являются обычными пользователями с подключенными к Интернету устройствами с любым из браузеров, например, Google Chrome).

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

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

Шаг 1.

Итак, мы хотим открыть страницу, поэтому наш строитель (клиент) просит заказчика дать ему чертеж для того, чтобы построить дом. Он отправляет HTTP-запрос на сервер, на конкретный домен. Затем строитель получает от заказчика HTTP-ответ, в котором содержится HTML-разметка. Так, мы получили условно чертеж нашего дома.

Шаг 2.

Анализ документа. Строитель изучает то, что прислал сервер, и понимает, что ему предстоит строить DOM. Да, у нас получилась игра слов. DOM (от англ. Document Object Model — «объектная модель документа») — это независящий от платформы и языка программный интерфейс, позволяющий программам и скриптам получить доступ к содержимому HTML-, XHTML- и XML-документов, а также изменять содержимое, структуру и оформление таких документов.

Шаг 3.

Получение статики. Статика — это файлы CSS и JS, картинки и шрифты, то, что не меняется на сайте. Для строителя важно понимать детали будущего проекта, цвет, вид и т.д. Строитель снова отправляет HTTP-запрос на сервер для получения СSS, медиафайлов, шрифтов и т.д. Сервер отвечает набором ответов со статикой.

После всех полученных данных строитель наконец может построить дом. Ура!

Теперь посмотрим на все более серьезным взглядом, проанализировав все шаги во времени.

1. Получение документа

2. Анализ документа

3. Параллельно со вторым шагом получаем статику

Схематично все выглядит таким образом:

Основные классы проблем

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

1. На первом шаге возможно медленное получение документа. Сервер не справляется с быстрым подсчетом информации, замедляя процесс отклика на запрос. Решением этой проблемы может быть оптимизация Backend-a, сервера, улучшение железа.

2. Медленный анализ документа. Для решения этой проблемы нужна оптимизация Frontend-a, или отказ от поддержки старых устройств.

3. Медленное получение статики. Оптимизация Frontend-a и увеличение скорости интернета помогут решить эти проблемы.

🍻 Кружками пива я отметил те проблемы, которые не зависят от программиста, поэтому он со спокойной душой может пойти пить пиво в ближайший бар 🙂

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

Для справки: полевые инструменты анализируют опыт реальных пользователей, а лабораторные имитируют загрузку страницы и анализируют ее.

Выглядит инстурмент подобным образом 👇

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

Вкладка DevTools Network более профессиональна по сравнению с другими двумя инструментами. Инструмент открывается в самом браузере и предоставляет детализированное описание каждой из метрик. Для получения дополнительных данных используйте вкладку Network, в которой содержится информация о количестве запросов, размере загружаемых данных, времени загрузки и т.д.

Основные метрики PageSpeed Insights и LightHouse

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

1. Performance — производительность (скорость). Позволяет узнать скорость загрузки сайта. Итоговый показатель зависит от времени загрузки интерактивных элементов, шрифтов и прочего контента, а также от времени блокировки и отрисовки стилей и рендеринга js.

2. Accessibility — доступность. Позволяет узнать, насколько удобен сайт, как воспринимается контент, и можно ли управлять интерфейсом и передвигаться по сайту без мыши.

3. Best Practices — проверяет безопасность сайта и использование современных стандартов веб-разработки.

4. SEO — помогает узнать, выполняется ли оптимизация сайта под поисковые системы.

5. Progressive Web App — позволяет проверить, подходит ли страница под стандарты прогрессивных web-приложений.

Каждый из показателей оценивается по шкале 100 баллов. Также для удобства оценка имеет цвет: зеленый — от 90 до 100 баллов, оранжевый — от 50 до 89 баллов, красный — ниже 49 баллов.

Контрольные метрики

1. First Contentful Paint (FCP)

Первая отрисовка контента — это время от момента отправки запроса на сервер до момента, когда браузер отображает первый пиксель контента на экране. Эта метрика критически важна, поскольку отображение контента (пусть даже минимальное) — это сигнал для пользователя о том, что сайт загружается. Если показатель FCP высокий, пользователь подумает, что сайт не реагирует, и уйдет.

2. First Input Delay (FID)

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

3. Largest Contentful Paint (LCP)

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

4. Cumulative Layout Shift (CLS)

Совокупное смещение макета — метрика, которая измеряет визуальную стабильность сайта и фиксирует сдвиги макета. Проще говоря, замеряет, не «дергается» ли сайт.

Возможности DevTools Network

Инструмент используют инженеры по тестированию, веб-разработчики и другие специалисты. Открыть DevTools из браузера Google Chrome можно тремя способами:

Сочетанием горячих клавиш: для Windows и Linux Ctrl + Shift + I, для macOS cmd + Shift + I.

В контекстном меню: на странице в любом месте кликнуть правой кнопкой мыши и выбрать «Просмотреть код». Главное — не путать с «Просмотр кода страницы», эта опция покажет исходный код вне DevTools.

Через меню браузера: в правом верхнем углу нажать на три точки, в меню выбрать раздел «Дополнительные инструменты» и далее «Инструменты разработчика».

Нас интересует конкретная вкладка Network. Перед нами открывается инструмент, в котором мы видим все HTTP-запросы на конкретной странице сайта. Разберем полезные столбцы в таблице запросов DevTools Network.

1. Имя. Имя файла или идентификатор ресурса.
2. Статус. Код состояния HTTP.
3. Тип. XHR — это AJAX. Media — аудио. Jpeg — изображения. Script, font — шрифт.
4. Инициатор. Объекты или процессы могут инициировать запросы.
5. Размер. Суммарный размер заголовков ответа плюс тело ответа, доставленное сервером.
6. Время. Общая продолжительность от начала запроса до получения последнего байта в ответе.
7. Waterfall. Визуальная разбивка активности каждого запроса.

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

1. Статус-код ответа: 200, 400, 500
2. Домен, на который идет запрос
3. Тип контента
4. Инициатор запроса (страница, скрипт)
5. Размер ответа и время ответа
6. Protocol. Используется HTTP версии 1,2 или 3
7. Scheme. Схема HTTP или HTTPS
8. Method. GET, POST и т.д.

Выделил эти столбцы красной рамкой на скриншоте ниже.

Теперь обратим внимание на столбец «Тип запроса». В DevTools Network есть несколько типов запросов.

1. XHR —Асинхронный AJAX запрос к серверу.
2. JS — JavaScript скрипты
3. CSS — стили CSS
4. Img — изображения
5. Media — видео
6. Font — шрифты
7. Doc — HTML-документы
8. WS — вебсокеты
9. WASM — скрипты нового языка Web Assembly
10. Manifest — манифесты сайта.Техническая информация про сайт.

DevTools.Network. Дополнительные фичи

— Дополнительные столбцы
— Поиск по названию
— Фильтрация и сортировка
— Preserve log. Позволяет не очищать список запросов при перезагрузке страницы.
— Красная кнопка записи. Позволяет включать и отключать добавление новых запросов для анализа.
— Throttling. Возможность указать нужную скорость загрузки.
— Disable Cache. Отключает кэш браузера, работает только при открытом DevTools.
— Блокирование сетевых запросов. Во время тестирования можно заблокировать трекеры, аналитику, виджеты социальных сетей или любые другие запросы.

Проблемы

Рассмотрим наиболее частые проблемы. Я разделил их на несколько типов для вашего удобства.

1. Проблемы с медиафайлами

Для того, чтобы отследить проблемы с медиафайлами, отфильтруем показатели по Img, либо Media, по времени и размеру.

💡 Продумывайте, какой формат изображения использовать. SVG — векторный формат используем для иконок, PNG, если есть прозрачность, JPEG для фотографий, WebP для продвинутого сжатия картинок без потерь в качестве. Формат WebP считается современным, он дает значительное улучшение производительности сайта, однако старые браузеры не поддерживают его.
💡 Размер картинки в среднем не должен превышать 250кб.
💡 Lazy load. Подход, когда картинки подгружаются только, когда пользователь дойдет до них. Сейчас это делается средствами браузера, необходимо только указать в верстке дополнительный атрибут loading co значением lazy.
💡 Не забывайте отслеживать «битые» картинки. Это означает, что картинка не может загрузиться и во вкладке Network будет подсвечиваться красным цветом.
💡 Для видео используйте два формата WEBM+mp4.
💡 Подробно расписал в инструкции по загрузке медиафайлов на сайт.

2. Проблемы с JS, CSS, шрифтами

Для шрифтов советуем использовать формат Woff2 и убирать неиспользуемые начертания шрифтов.

Также используйте вариативные шрифты, по этой теме у нас даже есть целое видео.

CSS, JS:

💡 вес не более 1 мб
💡 либо динамическое подключение компонентов Vue.js (видео)
💡 минификация для JS и CSS. Минимизация ресурсов означает удаление из HTML, JavaScript и CSS кода символов, которые не требуются для загрузки, например пробелы, разделители блоков и т.д.

3. Проблемы с внешними запросами

😖 Блокировки и различные фаерволы. Попробуйте зайти через VPN, чтобы выявить проблему.

😖 Не забывайте про Adblock. Зачастую он негативно влияет на отображение некоторых элементов.

😖 Проблемы с Ajax. Если запрос возвращает ошибку, то посмотрите код ответа, содержание и адрес ошибки, передаваемые параметры. Если запрос слишком тяжелый, то облегчите его и разбейте на части.

4. Проблемы со скоростью отдачи документа

Симптомы медленного бэка/сервера: долгий главный HTTP ответ.

Какие меры предпринять:

1. Оптимизация Backend-a.

👨‍💻 Работа с БД. Проектируйте базы данных руками, используйте индексы, устраняйте лишние запросы.
👨‍💻 Кэширование запросов к БД, HTML, статика (JS, шрифты и т.д.).
👨‍💻 Очереди. Отправка Email, запросы по API. Используйте фоновое выполнение долгих задач.

2. Оптимизация сервера

🛠 Ресурсы сервера. Посмотрите, на что тратятся ресурсы, добавьте RAM, ядра CPU.
🛠 Вертикальный способ. Возьмите сервер помощнее.
🛠 Горизонтальный способ. Возьмите еще один сервер и распределите по ним нагрузку. Для этого используйте Kubernetes.

3. Настройка сжатия. Проверьте, что файлы, которые отдает ваш сервер, сжимаются с помощью gzip. Это можно проверить в DevTools (вкладка Network).

Выводы

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

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

---

Последние записи блога

---

Please enable JavaScript to view the comments powered by Disqus.

Панель управления скоростью загрузки сайта | Центр Поддержки

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

Панель управления состоит из двух основных разделов. Первый раздел «Опыт реальных пользователей» показывает основные веб-параметры вашего сайта на основе того, что испытывают ваши посетители при загрузке страницы. Он взят из данных Wix и доступен для всех сайтов. Второй раздел «Моделирование Google PageSpeed» — это оценка эффективности вашего сайта с помощью Google PageSpeed Insights. На панели управления «Скорость загрузки сайта» также предлагаются советы по повышению производительности.

Как узнать скорость загрузки сайта в инструментах аналитики

1. Перейдите в раздел Аналитика и отчеты в панели управления сайтом.
2. Нажмите Скорость загрузки сайта.

Метрики, используемые для расчета скорости сайта

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

• Первая отрисовка контента (FCP): время, необходимое для отображения первого элемента контента на странице при загрузке сайта.
• Скорость отрисовки основного контента (LCP): время, необходимое для отображения на странице самого большого изображения или блока текста.
• Время ожидания до первого взаимодействия с контентом (FID): измеряет время от первого взаимодействия посетителя со страницей (нажатие, касание, прокрутка и т. д.) до тех пор, пока ваш браузер не обработает это взаимодействие.
• Совокупный сдвиг макета (CLS): измеряет все сдвиги макета за время существования страницы. Сдвиг макета происходит каждый раз, когда видимый элемент меняет свое положение во время загрузки страницы.

Скорость отрисовки основного контента, Время ожидания до первого взаимодействия с контентом и Совокупный сдвиг макета — это основные параметры сайта.

Макет панели управления Site Speed

Расчет скорости сайта в верхней части панели инструментов берется из Первой отрисовки контента (FCP) вашего сайта. Этот расчет также показывает, как ваш сайт работает по сравнению с другими в вашей категории.Если вы хотите обновить свою категорию, нажмите на нее.

В разделе Опыт реальных пользователей метки рядом с каждым показателем показывают, как этот конкретный Core Web Vital работает на вашем сайте. Метки показывают диапазон, определенный Google. Три возможных ярлыка: Хорошо, Удовлетворительно или Плохо. Наведите указатель мыши на метку, чтобы увидеть диапазон.В этом разделе также есть советы, которые помогут вам повысить производительность Core Web Vitals.

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

Понимание Google PageSpeed

В разделе моделирования PageSpeed отображаются оценки производительности Google Lighthouse, которые оценивают скорость вашего сайта в лабораторных условиях. Оценка может отличаться от того, что на самом деле испытывают ваши посетители, поскольку моделирование относится к недорогому устройству и медленной сети 4G. Оценка производительности составляет от 1 до 100, причем 100 — это наилучшая возможная оценка. Нажмите Повторить тест, чтобы запустить еще один тест скорости сайта, или Смотреть историю тестов, чтобы увидеть предыдущие тесты.  

Скорость страницы: что это такое и как это влияет на SEO

24 сен

24 сен

Содержание

Определение

Почему важна скорость страницы?

Некоторые из преимуществ инвестирования в скорость страницы:

Снижение показателя отказов

Увеличение числа посещений вашего веб-сайта людьми

Поисковые системы будут сканировать больше ваших веб-страниц

Как быстро должны загружаться ваши веб-страницы?

Что вызывает низкую скорость страницы?

Рекомендации по увеличению скорости страницы

Ошибки оптимизации изображений

Использование перенаправлений

Не использование кеша браузера

Неспособность оптимизировать веб-шрифты

Что сделать, чтобы повысить скорость страницы вашего веб-сайта

Минимизация запросов HTTP3 9000 CSS, HTML и JavaScript

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

Уменьшение количества перенаправлений

Удаление кода JavaScript, блокирующего рендеринг

Использовать кеш браузера

Сети доставки контента

Включить сжатие

Оптимизация скорости страницы для WordPress

Шаг первый: выбрать хороший хост 4: Сеть доставки контента

Шаг пятый: Оптимизация главной страницы

Оптимизация скорости страницы для Wix

Оптимизация изображений с сохранением качества

Ограничение использования анимации на странице

Шрифты

Приглушение тона в слайд-шоу и веб-эффектах

Очистите заголовок

Оптимизация скорости страницы для страницы Shopify

Используйте ускорение мобильных страниц (AMP)

Выбор темы запросы

Определение

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

 

Почему важна скорость страницы?

 

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

 

• Индекс средней скорости не должен превышать трех секунд
• Средний вес страницы не должен превышать 500 КБ
• Среднее количество запросов не должно превышать 50
• Среднее время для первого байта не должно превышать 1,5 секунды

Оптимизация производительности веб-сайта должна быть в центре внимания технологически превосходного веб-сайта. Скорость загрузки вашей веб-страницы будет определять успех вашего онлайн-бизнеса. На самом деле, невпечатляющая производительность веб-сайта, скорее всего, убьет прибыль вашего бизнеса, когда пользователь потеряет терпение из-за мучительного ожидания медленно загружающегося сайта. Согласно данным Aberdeen Group Research, веб-сайт с мгновенным откликом будет способствовать более высокой конверсии; Кроме того, каждая секундная задержка загрузки вашей страницы значительно снижает удовлетворенность пользователей примерно на 16 процентов. Это также уменьшит количество просмотров страниц примерно на 7 процентов.

 

Некоторые из преимуществ инвестирования в скорость страницы:

Снижение показателя отказов

После оптимизации веб-страницы для повышения скорости вы получите множество преимуществ, одним из которых является снижение показателя отказов, поскольку лишь несколько человек уходят сайт из-за нетерпения. Возможно, вы уже сталкивались с сайтами, которые очень долго загружаются. Данные Google показывают, что терпение большинства людей лопается через две секунды; поэтому Google призывает веб-разработчиков обеспечивать загрузку сайтов в течение одной секунды. Что угодно, даже всего 250 миллисекунд, может иметь большое значение для решения посетителя вашего сайта.

Увеличьте количество посещений вашего веб-сайта.

После сокращения времени загрузки вашей веб-страницы люди станут чаще посещать ваш веб-сайт. Отчет Kissmetrics показывает, что около 47 процентов людей ожидают, что веб-страница загрузится в течение 2 секунд, и около 40 процентов пользователей покинут ваш сайт, если страница не может загрузиться в течение этого времени. Еще 40 процентов, вероятно, уйдут, если ваша веб-страница не сможет загрузиться в течение 3 секунд.

 

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

Поисковые системы будут сканировать больше ваших веб-страниц

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

 

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

 

Как быстро должны загружаться ваши веб-страницы?

 

Все, что загружается медленнее, чем одно мгновение — 400 миллисекунд, — слишком медленно. Отчет, опубликованный инженерами Google, показал, что едва заметного времени загрузки веб-страницы в 0,4 секунды достаточно, чтобы заставить потенциального посетителя покинуть ваш сайт до того, как он полностью загрузится.

 

Время загрузки вашей страницы не должно превышать 100 миллисекунд. Это потому, что зрительная сенсорная память в вашем мозгу функционирует импульсами по 100 миллисекунд. Хранилище памяти должно очищаться каждые 0,1 секунды, потому что фоторецепторные клетки в ваших глазах должны передавать больше информации в затылочную долю.

 

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

 

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

 

Что вызывает низкую скорость страницы?

 

Медленные веб-страницы возникают по ряду причин. Вот некоторые из распространенных причин:

 

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

 

По данным KeyCDN, средняя веб-страница выросла на 317 % с примерно 702 КБ в 2010 году до более 3422 КБ в 2017 году. Это означает, что вы должны найти способы повысить скорость своей веб-страницы независимо от ее растущего размера.

 

Размер и вес страницы: шрифт и вес страницы играют важную роль в скорости страницы. По данным Google, вы должны поддерживать вес своих страниц ниже 500 КБ, хотя они обнаружили, что 70% проанализированных страниц имеют размер более 1 МБ, 36% — более 2 МБ и 12% — более 4 МБ.

 

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

 

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

 

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

 

Рекомендации по увеличению скорости страницы

 

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

 

Вот некоторые из ошибок:

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

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

Использование перенаправлений

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

Без использования кэша браузера

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

Неспособность оптимизировать веб-шрифты

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

 

Исследования показывают, что около 57% всех веб-сайтов теперь используют пользовательские шрифты. Это в значительной степени способствовало увеличению размера веб-страниц и, таким образом, стало важным фактором, определяющим скорость страницы вашего веб-сайта. На средней веб-странице шрифты составляли 123 КБ от размера страницы в 2016 году по сравнению с 2 КБ в 2010 году. Поскольку мобильные устройства становятся все более важными в электронной коммерции, использование шрифта размером 16 пикселей не только повысит скорость страницы вашего сайта. веб-сайт, но и сделать ваш сайт удобным для мобильных устройств.

 

 

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

 

Что нужно сделать, чтобы повысить скорость страницы вашего веб-сайта

 

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

Минимизация HTTP-запросов

Одной из ключевых областей повышения производительности веб-сайта является минимизация общего количества обращений туда и обратно, которое потребуется веб-браузеру для доступа к серверу. Браузер должен загрузить каждый файл на вашем веб-сайте, например, JavaScript, CSS или изображения. Сократив количество запросов, вы значительно улучшите скорость. Включение отдельного файла CSS для каждой части вашего сайта только увеличит время загрузки. Включите CSS на один лист и сделайте то же самое для HTML и JavaScript.

Сократите CSS, HTML и JavaScript

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

 

Ненужные строки могут содержать пробелы, перевод строки и символы комментариев. Вы можете удалить эти символы, не влияя на производительность вашего кода. Удалив их, вы уменьшите размер файла кода и данных, которые необходимо загрузить веб-браузеру. Если вы готовы свести к минимуму CSS, HTML и JavaScript, рассмотрите один из множества инструментов, доступных в Интернете.

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

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

 

Правильно форматируя и сжимая изображения (без потери их визуального качества или внешнего вида), вы сократите объем данных, которые пользователь должен загрузить, и создадите красиво оптимизированные изображения для вашего веб-сайта. Наш инструмент использует информацию о скорости страницы для выполнения этих проверок, поэтому рекомендации и инструменты Google являются лучшими источниками, чтобы убедиться, что они действительно могут пройти проверку 9.0003

Уменьшить количество переадресаций

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

Удаление кода JavaScript, блокирующего рендеринг

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

 

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

Использование кеша браузера

Около 40–50 процентов ежедневных посетителей вашего веб-сайта заходят с пустым кешем. Обеспечение высокой скорости загрузки для новых посетителей является частью отличного пользовательского опыта. И веб-серверы, и веб-браузеры допускают кэширование. Кэш хранит любые предыдущие запросы, такие как файлы CSS и JavaScript, изображения, веб-страницы и файлы cookie, в веб-браузере или на сервере пользователя. Хранение данных снижает пропускную способность и помогает повысить производительность вашего сайта.

 

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

Сети доставки контента

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

 

Сети доставки контента работают по-другому:

 

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

Включить сжатие

Сжатие файлов является важной частью повышения скорости загрузки страниц. Используйте такие приложения, как gzip, для сжатия файлов и уменьшения размеров файлов HTML, CSS и JavaScript. Сжимайте любой файл размером более 150 байт для повышения скорости загрузки. Кроме того, вам придется сжимать изображения в таких приложениях, как Photoshop, чтобы контролировать качество ваших изображений.

 

Оптимизация скорости страницы для WordPress

 

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

Шаг первый: Выберите хороший хостинг

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

Шаг второй: используйте упрощенную структуру

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

Шаг третий: Плагин кэширования

Для этого в WordPress есть бесплатные и простые в использовании плагины. Плагины кэширования, установленные на сайте WordPress, значительно увеличивают скорость загрузки. Одним из таких плагинов является W3 Total Cache. Установить и активировать его на WordPress очень просто. Как только вы активируете этот плагин, вы можете снова проверить скорость и заметить огромную разницу.

Шаг четвертый: Сеть доставки контента

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

Шаг пятый: Оптимизируйте домашнюю страницу

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

 

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

 

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

 

Оптимизация скорости страницы для Wix

 

Wix — это быстрый конструктор сайтов. Неоднократно это оказывалось полезным как для новичков, так и для профессионалов. Свобода, которую предлагает Wix, позволяет с легкостью настраивать страницы вашего сайта. Вам предоставляется возможность добавить больше видео и выбрать систему бронирования (в дополнение ко многим другим), что может повлиять на скорость страницы. Чтобы предотвратить некоторые ошибки, приводящие к замедлению страниц сайта Wix, выполните следующие действия:

Оптимизация изображений без потери качества.

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

 

Одним из таких инструментов является Facebook. Если вы уже загружаете высококачественную фотографию на Facebook, вы можете загрузить загруженное изображение со своей фотографии, и это даст вам оптимизированную фотографию, готовую для вашего сайта Wix. Любое изменение размера должно быть выполнено перед загрузкой для достижения наилучших результатов. Избегайте тяжелых фотографий, чтобы повысить скорость страницы.

 

 

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

Шрифты

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

Приглушите слайд-шоу и веб-эффекты

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

Наведите порядок в заголовке

Предприятия должны быть умными при настройке своего веб-сайта Wix. Легко увлечься свободой настройки своего сайта. Заголовок, например, должен быть простым. Логотипа и названия компании или слогана достаточно для описания. Добавление других элементов в заголовок является плохим дизайном и приводит к более медленной загрузке страницы.

 

Оптимизация скорости страницы для страницы Shopify

 

Запустить магазин Shopify очень просто. На самом деле, большинство статей обещают увеличение продаж с Shopify и продают идею с помощью простых инструкций. Мы ценим такие фрагменты информации в дополнение к быстро загружаемым страницам. Есть несколько вещей, которые можно сделать, чтобы увеличить их страницы магазина Shopify:

Используйте ускоренные мобильные страницы (AMP)

После использования таких инструментов анализа производительности, как PageSpeed ​​Insights, пришло время действовать. Многие пользователи Shopify используют свои телефоны и будут искать товары и совершать покупки с портативных устройств, поэтому любой бизнес на Shopify должен будет использовать AMP для быстрых страниц.

 

Приложения Shopify, такие как FireAmp, ускоряют работу страниц магазина на мобильных телефонах. Создание ускоренных мобильных страниц — это то, что нужно для вашего бизнеса Shopify.

Выбор темы

Установленная вами тема может определить все будущее вашего магазина. У оптимизированной темы нет проблем с загрузкой, потому что она содержит все файлы CSS и JavaScript в одной папке. С другой стороны, тема с несколькими файлами создает проблемы для страниц магазина. Эти файлы загружаются с блокировкой рендеринга, что влияет на скорость работы сайта. Чтобы избежать этой ошибки, вам потребуется использовать инструмент анализа PageSpeed ​​или любой другой инструмент производительности для проверки страницы предварительного просмотра темы. Тема с наивысшим рейтингом — это та, с которой вы должны пойти.

 

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

 

Используйте PageSpeed ​​Insight, чтобы сразу проверить, оптимизирована ли тема.

Начните управлять своими приложениями Shopify

Установка приложений повышает производительность и функциональность магазина. По мере того, как ваш интернет-магазин продолжает расти, растет и потребность в добавлении дополнительных приложений. Эти приложения поставляются со своими собственными файлами JavaScript, которые сами по себе не являются проблемой; однако они влияют на скорость загрузки, когда приложение не используется, загружаясь в фоновом режиме.

 

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

HTTP-запросы

HTTP-запросы Checker даст вам хорошее представление о количестве сделанных запросов. Комбинируя JavaScript, конвертируя изображения в base64, ограничивая социальные кнопки и используя спрайты CSS для изображений, вы гарантируете быструю загрузку страниц. Эти усилия сокращают количество HTTP-запросов и дают потрясающие результаты.

Page Speed ​​SEO Checker: огромное значение теста скорости страницы

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

 

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

Если вы хотите поговорить с гуру скорости страницы в WebFX, позвоните нам по телефону 888-601-5359! В противном случае продолжайте читать!

Дополнительное чтение: SEO-проверка на странице

Почему важно использовать SEO-проверку скорости страницы?

Скорость страницы является важным фактором SEO на странице, который может существенно повлиять на то, как пользователи взаимодействуют с вашим сайтом. Согласно Think with Google, рекомендуется, чтобы ваши страницы загружались в менее чем за 1,3 секунды.

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

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

Ищете универсальный инструмент SEO-аудита? Вы нашли это.

SEO Checker предоставляет данные по ключевым показателям, чтобы дать вам:

• Полную оценку SEO
• Класс содержания
• Анализ скорости сайта
• и более.

Введите действительный URL-адрес (например, webfx.com, www.webfx.com)

Что может сделать SEO-проверка скорости страницы?

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

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

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

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

Вы также получите информацию о том, в каком процентиле отображается ваш сайт для каждой метрики. Google также показывает вам лабораторные данные, которые включают в себя:

• FCP, или первую осмысленную краску, когда основной контент сайта виден на странице
• Индекс скорости
• Первый процессор простаивает
• Время до интерактива
• Максимальная потенциальная задержка первого входа

Вы можете узнать больше о каждой из этих метрик, щелкнув ссылку «узнать больше», указанную в тесте скорости страницы.

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

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

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

ДОПОЛНИТЕЛЬНАЯ ЧТЕНИЕ: Каково среднее время загрузки страницы?

Рекомендации по повышению скорости загрузки страниц для любого веб-сайта

Итак, как вы можете внедрить рекомендации по повышению скорости загрузки страниц на своем веб-сайте, чтобы успешно пройти нагрузочные тесты сайта? Продолжай читать!

1.

Минимизируйте код вашего сайта

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

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

2. Активируйте кэширование в браузере

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

Не говоря уже о том, что это очень просто настроить в файле .htaccess.

3. Оптимизация изображений сайта

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

Для этого можно использовать такой инструмент, как Kraken.

4. Внедрите CDN

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

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

5. Сократите количество переадресаций

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

Инструменты тестирования веб-сайтов, которые помогут вам сократить время загрузки страниц

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

1. PageSpeed ​​Insights от Google

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

2. Пингдом

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