Раскрытие секретов SEO: введение окончательного руководства по скорости веб-сайта

  1. 1. Время - деньги
  2. 2. Всегда думайте о мобильных пользователях
  3. 3. Используйте GTMetrix
  4. 4. Используйте сжатие GZIP
  5. 5. Служите масштабированных изображений
  6. 6. Сожмите ваши изображения
  7. 7. Не заставляйте своих мобильных посетителей скачивать фотографии в формате Full HD!

Скорость имеет значение как для пользователей, так и для SEO: никто не хочет ждать загрузки сайта в течение нескольких секунд. Пользователи предпочли бы покинуть ваш сайт и перейти к конкуренту, чем тратить время на ожидание. Цитата «время - деньги» теперь так же верна, как и тогда, когда Бенджамин Франклин сказал это несколько веков назад. Время также имеет значение для Google. Скорость является одним из факторов рейтинга Google. При прочих равных условиях, чем быстрее сайт, тем выше рейтинг. И нет никого, кто будет утверждать, что быстрый сайт не является необходимостью в настоящее время. Вопрос в том, как сделать ваш сайт быстрее? Наш приглашенный автор в этой статье «Развертывание секретов SEO» - Томек Рудзки, руководитель отдела исследований и разработок компании Elephate, победитель в номинации «Лучшее малое агентство SEO» на церемонии European Search Awards 2018 года. Рудзи предлагает советы по ускорению вашего сайта и победе.

Это всеобъемлющее руководство по скорости веб-сайта состоит из трех статей. Прочитайте следующие посты здесь: Окончательное руководство по скорости веб-сайта - часть 2 а также Окончательное руководство по скорости веб-сайта - часть 3.

Прочитайте следующие посты здесь:   Окончательное руководство по скорости веб-сайта - часть 2   а также   Окончательное руководство по скорости веб-сайта - часть 3

Развертывание секретов SEO

Бесплатное изучение скорости страницы

1. Время - деньги

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

Вы можете сказать: «Хорошо, но меня не волнует Pinterest, BBC или Amazon; поговори со мной о моем бизнесе ». Google создал хороший инструмент, который рассчитывает влияние скорости на потенциальный доход , Я заполнил инструмент примерами: среднемесячные посетители 1 000 000, коэффициент конверсии 3,26%, средняя стоимость заказа 82 доллара.

Вы можете спросить: «Томек, почему вы выбрали эти данные: коэффициент конверсии 3,26, но не 1%, или 4%, или даже 10%?» Хорошо, я получил данные от Statista. Согласно их отчеты средняя стоимость заказов в Интернете в США в 4 квартале 2017 года (в долларах США) составила 82. Более того, средний коэффициент конверсии составил 3,26.

Кажется, снижение скорости загрузки страницы с 5 до 2,8 с может привести к увеличению дохода на 1,97 млн ​​долларов в год. Звучит хорошо!

Звучит хорошо

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

2. Всегда думайте о мобильных пользователях

По данным Statcounter, в феврале 2018 года более 55% пользователей подключались к Интернету через мобильный телефон или планшет - впечатляющая статистика!

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

  • убедитесь, что ваш сайт работает нормально на мобильном телефоне (например, если он реагирует)
  • сделать сайт очень быстро.

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

3. Используйте GTMetrix

Существует отличный инструмент, который говорит вам, что вы можете улучшить, чтобы сделать ваш сайт быстрее. Вы можете провести аудит любого сайта бесплатно. Вам не нужно быть владельцем веб-сайта, чтобы начать аудит (т.е. я проверял Giphy.com). Инструмент объединяет как данные, так и подсказки от Google PageSpeed ​​Insights и Yahoo Slow.

Это стоит вашего времени, чтобы пойти в https://gtmetrix.com/ и введите URL вашего сайта.

com/   и введите URL вашего сайта

Вы можете просмотреть список рекомендаций о том, как повысить скорость вашего сайта, нажав на вкладках «PageSpeed» или «YSlow».

Вы можете просмотреть список рекомендаций о том, как повысить скорость вашего сайта, нажав на вкладках «PageSpeed» или «YSlow»

На данный момент большая часть информации на этих вкладках может быть непонятной, поскольку она слишком техническая. Все в порядке. Рим не сразу строился. Я сделаю все возможное, чтобы вы начали. Есть интересный раздел под названием «Водопад», который показывает, когда именно ресурсы (файлы JS & CSS, файлы изображений) были загружены и загружены.

Я настоятельно рекомендую вам получить учетную запись GTMetrix (это бесплатно!). Зарегистрированные пользователи могут настроить тест и изменить местоположение браузера и сервера. Более того, войдя в систему, вы можете включить опцию «создать видео». Вариант видео отличный. Он показывает, как долго пользователям придется ждать, пока они смогут увидеть визуальные изменения на вашем сайте.

Но не сходите с ума с GTMetrix

Хотя GTMetrix - отличный инструмент, иногда его рекомендации могут привести вас к погоне за диким гусем. С GTMetrix все в порядке. Просто при оптимизации скорости не существует правила «один размер подходит всем» - что GTMetrix хорошо знает:

Просто при оптимизации скорости не существует правила «один размер подходит всем» - что GTMetrix хорошо знает:

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

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

Конечно, есть много инструментов, похожих на GTMetrix, таких как WebPageTest (который гораздо более мощный, чем GTMetrix). Однако я решил познакомить вас с GTMetrix по двум причинам:

  1. GTMetrix более удобен для пользователя
  2. WebPageTest не дает четких рекомендаций о том, что делать.

Я хотел бы упомянуть еще один интересный инструмент - Google Lighthouse (если вы используете Chrome, он у вас уже установлен). Камила Сподимек из Elephate написала отличную статью о Как SEO могут извлечь выгоду из показателей эффективности Google Lighthouse , Определенно хорошее чтение!

4. Используйте сжатие GZIP

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

Вы можете уменьшить размер ваших текстовых файлов (таких как HTML, SVG, CSS и JS), применяя сжатие GZIP. Довольно часто сжатие GZIP экономит 70-80% размера ресурса, не теряя никакой информации. Это действительно большое дело!

Визит https://checkgzipcompression.com/ чтобы проверить, сколько килобайт вы можете сэкономить (или уже сэкономили!) с помощью GZIP. В случае Searchmetrics.com, GZIP включен (это позволило сэкономить 83% размера страницы). Звучит хорошо!

Будьте осторожны, хотя! Иногда веб-мастера допускают ошибку и сжимают все статические файлы, включая JPEG, изображения PNG и PDF. Позвольте мне процитировать Документация для сети разработчиков Yahoo : «Файлы изображений и PDF не должны быть сжаты, потому что они уже сжаты. Попытка сжать их не только приводит к потере ресурсов процессора, но и потенциально может увеличить размер файла ».

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

5. Служите масштабированных изображений

Это факт, что сайт будет загружаться очень медленно (особенно на мобильных телефонах!) Из-за большого количества изображений.

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

Сначала поговорим о масштабировании изображений. Допустим, на странице есть десять миниатюр 220 × 220, но вы загрузили 800 × 800 изображений на сервер. Стоит ли предоставлять пользователям уже масштабированные изображения или заставлять браузер масштабировать их «на лету»?

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

6. Сожмите ваши изображения

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

Как правило, существует два типа сжатия изображений:

  • Без потерь (делает действительно хорошую работу, вы можете быть уверены, что качество не пострадает).
  • Lossy (обычно делает изображение более легким, но, как следует из названия: вы теряете часть качества).

© https://www.geckoandfly.com/23620/jpeg-compression-tool-batch-lossy-lossless-optimization

Возникает вопрос: какой тип сжатия лучше: без потерь или с потерями?

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

7. Не заставляйте своих мобильных посетителей скачивать фотографии в формате Full HD!

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

Давайте рассмотрим пример Elephate.com , У нас есть довольно большая фотография (2600 × 1463 пикселей) членов нашей компании в верхней части нашей домашней страницы (522 КБ)

com   ,  У нас есть довольно большая фотография (2600 × 1463 пикселей) членов нашей компании в верхней части нашей домашней страницы (522 КБ)

Это совершенно нормально для настольных компьютеров - они могут скачать его очень быстро. Но для мобильных пользователей мы используем параметры «srcset» в HTML. Благодаря реализации этого, мобильные пользователи просто загружают намного меньшую картинку (им не нужна большая), что положительно влияет на время загрузки страницы.

Благодаря реализации этого, мобильные пользователи просто загружают намного меньшую картинку (им не нужна большая), что положительно влияет на время загрузки страницы

Пользователи рабочего стола не пострадают, потому что они увидят фотографию в формате Full HD. Но мобильные пользователи действительно выиграют от этого.