На странице SEO: веб-сайт и скорость страницы

1. Как правильно проанализировать ваш сайт на скорость сайта?
2. Сжатие Gzip
3. Уменьшить HTTP-запросы
4. Премиум DNS
5. Быстрее Хостинг
6. Оптимизируйте свои изображения
7. CDN-х
8. Использование кэширования в браузере
9. Оптимизация базы данных
10. Объединить ресурсы
11. Предварительная выборка DNS
12. HTTPS / SSL
13. Будь умным в вещах

Прежде чем мы начнем, здесь есть аудио введение в эту часть руководства, надеюсь, вам понравится!

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

Это еще один аспект SEO на странице что у Google есть записано говоря, что это официальный фактор рейтинга. Большинство пользователей раздражаются, если загрузка сайта занимает 2 или более секунд. Медленная страница не только разочарует ваших посетителей, но и может лишить робота-робота сканировать ваш сайт. Если робот Google должен ждать и ждать загрузки страницы, он может просто уйти и повторить попытку позже. При этом крайне важно, чтобы ваши страницы загружались за 2 секунды или меньше. Это непростая задача, с современными плагинами, фреймворками и виджетами легко перенести ваш сайт с помощью всевозможных дополнений. Добавить в высоком разрешении видео и изображений, и его легко добавить много размера на страницу. А когда есть большая страница, обычно есть медленная страница.

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

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

Если вы являетесь пользователем WordPress, мы написали подробное руководство по скорость сайта для WordPress ,

Как правильно проанализировать ваш сайт на скорость сайта?

Когда вы думаете об оптимизации скорости сайта, на самом деле есть два основных аспекта: общая скорость вашего сайта (например, хостинг, CDN, dns, SSL) и скорость вашей страницы (изображения, скрипты, плагины и т. Д.). Если вы действительно хотите обновить свою игру на странице, вам нужно запустить тест скорости на каждой странице вашего сайта. Хотя это может быть невозможно для крупных сайтов eCom, вы можете сделать 1 страницу или продукт в каждой категории.

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

• скорость DNS
• скорость сервера
• размер страницы
• количество запросов
• внешние ресурсы

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

Сжатие Gzip

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

На большинстве веб-сайтов это так же просто, как добавить несколько строк кода в ваш файл .htaccess:

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

Если вы используете nginx, попробуйте это для сжатия gzip:

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

Уменьшить HTTP-запросы

Чем меньше ваш браузер запрашивает у сервера что-то, тем быстрее это будет. Давайте рассмотрим этот сценарий:

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

Если вы проводите тест скорости на любом веб-сайте, первое, что вы увидите, это «количество запросов». Запрос может быть почти любым:

• картинка
• файл CSS
• HTML-файл
• шрифт
• внешние ресурсы
• так далее

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

Помните, что одна крошечная строка кода, ссылающаяся на внешний сайт или скрипт, может привести к смерти вашего сайта. На моем личном веб-сайте patrickcoombe.com в настоящее время я наблюдаю очень высокое время загрузки. Причина по которой? На моей домашней странице загружено видео 4Mb +!

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

Премиум DNS

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

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

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

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

Если вы ищете поставщика «премиум DNS», вот несколько советов, которые мы использовали в прошлом:

• Cloudflare
• Путь Амазонки 53
• Namecheap Премиум DNS

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

Быстрее Хостинг

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

Изображение, иллюстрирующее пример веб-сайта на общем веб-сервере и всех соседних доменах.

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

По крайней мере, обновите свой сайт до VPS, где у вас есть большой кусок сервера вместо крошечного куска.

Если вы ищете рекомендации хостинг-провайдеров, вот хостинг-провайдеры, которых мы рекомендуем больше всего:

• Google Cloud
• Amazon Cloud
• Жидкая паутина
• Rackspace
• Цифровой океан

Есть некоторые люди, которые строить гипотезу что использование Google Cloud может дать вам дополнительный импульс. Это не одна из тех теорий «если я использую AdWords, я получу поддержку SEO», которая не имеет под собой никаких оснований, у этой теории есть больше оснований для поддержки. Дело в том, что у Google Cloud есть смехотворно быстрые серверы с огромным охватом, тоннами «краевых узлов» в их CDN, новым оборудованием и одними из лучших инженеров на планете. В любом случае, я бы не стал класть все ваши яйца в эту корзину, но я определенно вижу, что все больше и больше SEO ищут Google Cloud для своего хостинг-провайдера.

Если вы ищете полностью управляемое решение, вы можете проверить WPEngine. Я не использовал их лично, но знаю много людей, которые имеют. Если вы собираетесь окунуться в мир облачного хостинга с помощью Google или Amazon, будьте готовы к огромной кривой обучения. Хотя у них действительно хорошие веб-интерфейсы, по умолчанию не установлена ​​cPanel.

Оптимизируйте свои изображения

Если вы плохо справляетесь с Photoshop, не волнуйтесь, есть несколько вариантов. Как минимум, запустите все ваши изображения через Tinypng перед загрузкой с вашего сервера. В этом примере вы можете видеть, как изображение размером более 21 КБ сократилось на 65% до 17 КБ. Представьте себе, если бы все так делали, насколько бы быстрее была сеть.

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

Размер ваших изображений правильно

Нередко можно найти сайты, которые используют ужасные практики при использовании изображений. В дополнение к сжатию ваших изображений, убедитесь, что вы используете правильный размер. Не используйте изображение размером 3000 × 3000 пикселей, когда подойдет размер миниатюры. Мы часто видим это на сайтах WordPress. Мы найдем фоновые изображения, которые можно выложить на квадраты размером 25 пикселей, но вместо этого они будут иметь размер 1000 пикселей. Или фотография в небольшом div, которая должна быть

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

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

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

SVG и WebP

Если вы можете, начните думать о реализации ваших изображений как SVG и WebP, когда это возможно. WebP - это новый формат изображений, разработанный частично людьми из Google , Это должно быть подсказкой, вы должны его использовать. Со своего сайта они утверждают, что изображения с потерями в WebP в среднем на 26% меньше, чем PNG.

CDN-х

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

Есть много провайдеров CDN там. Например, наш веб-сайт использует MaxCDN, в то время как многие другие веб-сайты используют Amazon или других провайдеров.

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

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

При первом посещении веб-сайта вам необходимо загрузить весь этот контент с сервера. Когда вы вернетесь и зайдете во второй раз, у вашего браузера будет много кэшированных изображений и контента на вашем веб-сайте. Используя кэширование в браузере, вы по сути инструктируете Google о том, как вы хотите, чтобы он кэшировал файлы на вашем сервере. Вот пример кода, который вы можете добавить на сервер Linux / Apache для включения кэширования. Эти значения могут быть изменены в зависимости от ваших потребностей:

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

Как и большинство аспектов скорости работы веб-сайта, для кэширования существует «премиум-аддон». Amazon ElastiCache, Cloudflare и Akamai предлагают дополнительные дополнения для кэширования веб-сайтов. Глубже всего кролика мы идем.

Оптимизация базы данных

Если ваш веб-сайт использует базу данных, есть вероятность, что в ней есть дополнительный «пух». Если у вас есть некоторый опыт работы с вашей базой данных, зайдите туда и начните удалять / оптимизировать. Если вы не найдете кого-то, кто это делает. Если вы являетесь пользователем WordPress, есть несколько плагинов, мой личный фаворит - «WP Optimize», вы в основном запускаете его, и он избавляется от всего лишнего, что вам не нужно, и оптимизирует все остальное.

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

• спам комментарии
• опубликовать ревизии
• потерянный контент
• удаленный плагин мусора

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

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

• Google Cloud SQL
• Amazon RDS
• Rackspace

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

Объединить ресурсы

Многие руководства по скорости сайта рекомендуют комбинировать файлы CSS или JavaScript, но есть и много других вещей, которые вы можете комбинировать, такие как изображения (спрайты) и многое другое. Комбинируя ресурсы, вы загружаете намного меньше контента и минимизируете свои HTTP-запросы.

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

Предварительная выборка DNS

Еще один небольшой фрагмент, который вы можете добавить на свой сайт, это дополнение rel = ”dns-prefetch”. По сути, это выполняет поиск DNS перед загрузкой страницы, что может помочь ускорить загрузку страницы.

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

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

HTTPS / SSL

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

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

Дело в том, что он может так же легко замедлить ваш сайт, как и ускорить его, так что знайте это.

Будь умным в вещах

Не ломайте свой сайт с помощью безумных плагинов, которые загружают 5 стилей. Всегда взвешивайте плюсы и минусы новых аддонов. Всегда задавайте вопрос: «Мне это действительно нужно» или «Можно ли это сделать с помощью нескольких строк кода вместо плагина?»

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

On-Page SEO Руководство Содержание

Похожие

Комментарии