SEO Guide: WPO и скорость загрузки

1. Определение WPO
2. Почему так важно улучшить скорость загрузки сайта?
3. TTFB (время до первого байта)
4. Количество и размер HTTP-запросов к серверу
5. Как я могу уменьшить количество http запросов?
6. GZIP или сжатие Deflate
7. Сжатие изображений
8. Кеш браузера для статических ресурсов
9. Другие факторы, которые могут повлиять на скорость загрузки
10. Географическое расположение сервера
11. Бонус-трек: плагины и инструменты

Чтение: 10 минут.

Уровень сложности:

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

Определение WPO

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

Почему так важно улучшить скорость загрузки сайта?

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

• Люди будут гораздо меньше посещать веб-сайты, которые на 250 миллисекунд медленнее, чем их конкуренты.
• Пользователи будут готовы ждать просмотра видео, но не результата поиска.
• 40% пользователей покидают страницу, загрузка которой занимает более 3 секунд.
• Для Amazon задержка в 0,1 секунды означает потерю 1,6 миллиарда долларов.

(Источники: http://www.nytimes.com и https://www.fastcompany.com)

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

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

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

TTFB (время до первого байта)

Метрика TTFB измеряет время, которое требуется браузеру для получения первого байта ответа от веб-сервера.

Существует несколько инструментов, предоставляющих такую ​​информацию, например GTmetrix или Web Page Test. В обоих случаях мы можем указать, из какого браузера и какой страны отправлять запрос.

В тесте веб-страницы:

(Делаем запрос из Paris / Chrome для дома веб-ES): 0,53 с

В GTmetrix:

(Делая запрос из Канады / Firefox для дома веб-ES): 1.1s

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

Есть три фундаментальных фактора, которые влияют на TTFB :

• Время, необходимое для распространения запроса по сети на веб-сервер ( подождите, я пойду ).
• Время, которое требуется веб-серверу для обработки запроса и генерации ответа ( подождите, пока он найдет то, что я хочу вам показать ).
• Время, необходимое серверу для передачи этого ответа через сеть в браузер ( подождите, я вернусь ).

Рекомендуется, чтобы время первого байта не превышало 500 миллисекунд . Фактически, последние исследования показывают, что страницы, расположенные в верхней части рейтинга SERP, имеют ttfb ниже, чем 300 мс.

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

Рекомендованным решением является использование CDN (сетей доставки контента): они являются сетями доставки контента, чтобы пользователь мог получать контент или информацию с сервера, расположенного ближе к его географической области.

Количество и размер HTTP-запросов к серверу

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

Как я могу уменьшить количество http запросов?

• Чтобы уменьшить количество запросов , мы можем объединить файлы Javascript и CSS:
  • Объединение всех CSS в одной таблице стилей ( больше информации ).
  • Объедините ресурсы Javascript или загрузите асинхронно, чтобы улучшить отображение страницы.

• Чтобы минимизировать размер CSS- ресурсов , в JavaScript мы можем использовать такие инструменты, как JSMI o Закрытие Complier, предназначенное для устранения символов или лишних пробелов. Кроме того, для минимизации HTML существует расширение Page Speed ​​для Chrome, которое генерирует оптимизированную версию вашего HTML-кода.

СОВЕТЫ!

• Вставьте CSS в область <head> . В отношении оптимизации CSS мы рекомендуем эта статья от нашего партнера Агуртзане 😉

<style type = "test / css"> КОД СТИЛЕЙ CSS </ style>

• Файлы Javascript в конце (перед тегом </ body>) или выполняют асинхронную загрузку.

<script async type = "text / javascript" src = "script.js"> </ script>

GZIP или сжатие Deflate

Один из наиболее полезных способов уменьшить время отклика сервера - включить метод Gzip или Deflate . Таким образом, мы улучшим время загрузки, так как при сжатии исходного кода в Интернете запрос будет доставлен до конечного пункта назначения. Для реализации этого метода сжатия в файл .htaccess необходимо добавить следующие строки (с учетом типа сервера).

Для сервера Apache

<ifModule mod_gzip.c> mod_gzip_on Да mod_gzip_dechunk Да файл mod_gzip_item_include. (html? | txt | css | js | php | pl) $ mod_gzip_item_include обработчик ^ cgi-скрипт . * mod_gzip_item_exclude mime ^ image /.* mod_gzip_item_exclude rspheader ^ Содержимое-кодировка:. * gzip. * </ ifModule>

Для сервера Nginx

AddOutputFilterByType DEFLATE текст / обычный AddOutputFilterByType DEFLATE текст / html AddOutputFilterByType DEFLATE текст / XML AddOutputFilterByType DEFLATE текст / CSS AddOutputFilterByType DEFLATE приложения / XML AddOutputFilterByType DEFLATE приложение / XHTML + XML AddOutputFilterByType DEFLATE приложение / RSS + XML AddOutputFilterByType DEFLATE приложение / JavaScript AddOutputFilterByType DEFLATE приложение / x- Javascript

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

Сжатие изображений

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

Что касается оптимального веса изображений, рекомендуется, чтобы они не превышали 300 КБ или 500 КБ в исключительных случаях. Инструмент тестирования веб-страниц включает в себя модуль для анализа изображений в Интернете и степени его оптимизации: https://webspeedtest.cloudinary.com

Существует ряд рекомендаций, направленных на достижение адекватной оптимизации изображений :

• Отрегулируйте размер каждого изображения до фактического размера и, таким образом, не позволяйте браузеру изменять размер изображения. Для этого желательно отрегулировать размер каждого изображения до реального размера, указав высоту и ширину.
• Упростите цветовую палитру вторичных или менее актуальных изображений.
• Используйте формат jpg или png , совместимый со всеми браузерами.
• Оптимизируйте изображения с помощью таких инструментов, как Веб ресайзер или это
• Используйте CSS-спрайты объединить небольшие изображения в одно изображение, чтобы веб-страница могла отображать их намного быстрее.

Кеш браузера для статических ресурсов

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

Есть два способа кеширования ресурсов:

• Задать значение Expires (минимум одна неделя, максимум один год): указывает браузеру дату истечения срока действия или прекращения действия ресурса.
• Cache-Control: используется для указания периода, в течение которого браузер может использовать кэшированный ресурс, не проверяя, доступна ли новая версия на веб-сервере.

Эта последняя опция позволяет вам иметь более контролируемые исправления.

Другие факторы, которые могут повлиять на скорость загрузки

Включить Keep Alive

Это метод, который позволяет одному и тому же TCP-соединению взаимодействовать с сервером, а не открывать его по одному для каждого запроса. Это связь между браузером и сервером, которая говорит: « Эй, вы можете взять более одного файла одновременно».

Он включен в заголовок http через файл .htaccess.

Географическое расположение сервера

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

Бонус-трек: плагины и инструменты

Плагины для WordPress

• Smush it: этот плагин служит для уменьшения размера изображений без потери качества.
• WP-Minify: уменьшите размер файлов CSS и JS

Полезные инструменты для анализа скорости загрузки моего веба

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

В следующей части руководства мы поговорим о том, как проводить аудит других важных технических аспектов, таких как индексация, прослеживаемость и т. Д. Мы ждем вас! 🙂

Похожие

Комментарии