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

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

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

Почему?

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

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

Шаг первый: Найдите текущую скорость загрузки страницы.

Google PageSpeed ​​Insights и GTMetrix — полезные инструменты для расчета скорости страницы. Оба перечисляют факторы, которые препятствуют скорости. Однако GTMetrix сообщает вам, сколько секунд требуется для загрузки вашей страницы.

Вставьте URL-адрес своего домена в GTMetrix и позвольте инструменту творить чудеса.

Через несколько секунд он заполнит числа и назначит вам оценку.

Он также будет отображать, сколько времени потребовалось для загрузки каждого элемента страницы. Например, как показано на изображении выше, загрузка FCP или First Colorful Paint заняла 5,5 секунды. Общее время загрузки страницы составляет ленивые 7,3 секунды!

Инструмент также составляет список предложений по увеличению скорости загрузки вашей страницы…

…и еще несколько советов:

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

Шаг второй: Оптимизируйте свой сайт, чтобы увеличить скорость загрузки страниц.

Советы по SEO-оптимизации изображений

Как уменьшить размер изображения?

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

Изображения обычно имеют огромные размеры! Они загружаются целую вечность.

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

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

• Сжатие изображения
• Обрезка изображений
• Изменение размера изображений

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

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

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

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

Отсюда есть два способа добиться большего сжатия.

1. Сжимайте изображения онлайн

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

2. Используйте плагины для сжатия изображений

Я не большой поклонник использования плагинов. Конечно, они облегчают работу, если вы не умеете программировать. Но они мешают существующему коду вашего сайта. Тем не менее, это вариант, который стоит рассмотреть.

Существует множество плагинов, которые могут помочь вам сжимать изображения; вы избалованы выбором. В любом случае, проверьте наличие галочки «Совместимо с вашей версией WordPress» перед использованием любого плагина.

Выберите между сжатием с потерями / без потерь

Сжатие может быть с потерями/без потерь. Он определяет, в какой степени вы сжимаете свои изображения.

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

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

Обрезать изображения

Это кажется очевидным методом уменьшения размера изображения — вы буквально уменьшаете размер изображения — но многие склонны его игнорировать.

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

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

Изменение размера изображений в MS Paint

Этот очевидно звучащий метод прячется у всех на виду.

1. Откройте изображение в MS Paint. Вы увидите возможность изменить размер.
2. Установите процент изменения размера, и теперь у вас есть версия, намного меньшая по размерам и размеру. Это экономит нагрузку на размер файла!

Ленивая загрузка изображений

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

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

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

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

Как внедрить ленивую загрузку на свой сайт?

Плагин a3 Lazy Load может помочь вам быстро реализовать ленивую загрузку.

Выберите подходящий шрифт.

Шрифт часто входит в компетенцию дизайна; это редко рассматривается как фактор производительности.

Но это влияет на размер страницы. Отчет от GTMetrix, рассмотренный ранее, показывает, что Font занимал наибольший размер после изображений.

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

Я использую Open Sans для своего веб-сайта, потому что мне не нужно придумывать свою бизнес-категорию. Если у вас творческий бизнес, вы можете пожертвовать скоростью страницы ради красоты. Кроме того, если вам нужен стильный шрифт, подчеркивающий индивидуальность вашего бренда, сделайте это. Бренд >> Скорость страницы.

Утрамбуйте код

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

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

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

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

И вот как я это сделал:

Минимизировать JS/CSS

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

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

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

Я использую плагин LiteSpeed ​​Cache для минимизации кода и кеша.

Шаг третий: подумайте о смене поставщика веб-хостинга.

Будет ли аэродинамический спортивный автомобиль работать на керосине? Неа.

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

Я не решался внести изменения в основном из-за неопределенности. Но я провел небольшое исследование и остановился на Hostinger, о чем не жалею.

Многие другие веб-хостинги сделают эту работу за вас. Решите, что вам подходит, исходя из вашего бюджета и местоположения.

Вот полное руководство по изменению веб-хостинга.

Шаг четвертый: используйте сеть распространения контента (CDN).

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

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

Уменьшенное расстояние способствует более быстрому обслуживанию вашей веб-страницы.

Я использую CDN Cloudflare, и он отлично зарекомендовал себя.

Шаг пятый (необязательно): используйте ускоренные мобильные страницы (AMP), чтобы увеличить скорость загрузки мобильных страниц.

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

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

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

Я написал подробное руководство о том, хотите ли вы внедрить AMP или нет.

Полученные результаты

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

Загружается за 1,2 секунды. Примерно в 6 раз больше.

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