1. Что такое PageSpeed ​​Insights?
2. Решение WordPress
3. Merge Minify Обновить
4. Optimus
5. WP Super Cache
6. Использование кэширования в браузере
7. Скрипты для нижнего колонтитула
8. Disqus Условная нагрузка
9. Автор редакции SEOblog

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

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

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

Что такое PageSpeed ​​Insights?

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

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

PageSpeed ​​Insights анализирует сайт и дает ему оценку по 100-балльной шкале. Рейтинг представляет собой смесь лучших практик веб-разработчиков, политик Google и технических ограничений. Оценка ниже 50 является плохой; выше этого может быть лучший рейтинг. Вы вообще стреляете для чего-то выше 80.

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

• Время ответа сервера. Чем дольше ваш веб-сервер отвечает на входящий пинг, тем ниже будет ваш рейтинг. Улучшение этого, как правило, является вопросом перемещения веб-хостов, хотя; некоторые центры обработки данных работают медленнее, чем другие, и общий хостинг работает медленнее, чем выделенный.
• Рендеринг-блокирующие скрипты. Некоторые файлы JavaScript и CSS необходимо загрузить до завершения загрузки страницы. Как правило, решение состоит в том, чтобы применять эти стили или сценарии асинхронно, чтобы страница могла продолжать загрузку при одновременной загрузке сценариев.
• Кэширование браузера. Кэширование позволяет браузеру сохранять некоторые элементы страницы локально при загрузке страницы, поэтому, когда пользователь возвращается на страницу позже или переходит на другую страницу сайта, ему не нужно снова загружать файлы. Общие элементы, такие как общая таблица стилей или изображение логотипа, должны кэшироваться для увеличения скорости последующей загрузки.
• Оптимизация изображения. Улыбающиеся изображения могут сжимать размер файлов без видимой потери данных на этих изображениях. Ни один человеческий глаз не сможет увидеть разницу, но размер файлов может быть уменьшен на 10-50%. Это позволяет загружать их намного быстрее, что сокращает время загрузки.
• Перенаправление. Если вы перенаправляете пользователя с одного URL-адреса на другой, это перенаправление занимает много времени. Минимизация перенаправлений ускоряет загрузку.
• Общее сжатие файлов. Использование чего-то вроде сжатия GZip позволяет вашему серверу делать файлы намного меньше, поэтому они загружаются и распаковываются быстрее, чем загрузка несжатого файла.
• Минимизированный код Минификатор удалит лишнее форматирование и позиционирование из ваших HTML, CSS и файлов сценариев, сделав их намного меньше. Помните, что один пробел может не выглядеть для вас чем-то, но компьютер читает это как % 20 «То, что интервал, который не требуется для HTML-рендеринга, но полезен для чтения кода, на самом деле просто увеличивает размер файла с точки зрения компьютера.

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

Решение WordPress

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

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

К счастью, разработчики WordPress также осознают важность скорости. Многие современные плагины разработаны с учетом скорости, и есть еще больше плагинов, которые помогут вам ускорить ваш сайт. Вот некоторые из моих любимых.

Merge Minify Обновить

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

Что этот плагин делает именно то, что говорит название. Часть 1 это слияние. Любые файлы сценариев объединяются вместе, когда это возможно. То же самое касается CSS-файлов. Группы файлов для разных приложений сгруппированы вместе. Все, что загружается на страницу, группируется в один файл, все, что загружается независимо от страниц, группируется в другой, и так далее.

Часть 2 состоит в том, чтобы затем минимизировать эти сгруппированные файлы. Разбивая все ненужные пробелы и символы, удаляя комментарии, плагин делает все это. Он использует Minify для CSS и Closure для JavaScript, чтобы генерировать новые, более мелкие файлы. Когда пользователь заходит на вашу страницу, он загружает сжатые и уменьшенные файлы вместо всех отдельных сценариев.

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

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

Optimus

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

Изображения переполнены ненужными данными. Некоторые из них - метаданные, которые вам не нужны, когда вы делитесь ими в Интернете, например, автор оригинального файла, данные EXIF ​​фотографии и т. Д. Если вы хотите сохранить все это в неприкосновенности, вы можете сделать это, но, как правило, это бесполезно вне веб-сайта портфолио фотографа.

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

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

Дело в том, что вы можете выделить тонны этих цветовых вариаций и никогда не увидеть разницу в конечном изображении. Если два пикселя рядом друг с другом имеют небесно-голубой цвет, но один из них # 87ceeb, а другой - # 87ceec, они выглядят идентичными вашему невооруженному глазу. Я сомневаюсь, что вы даже сможете увидеть разницу между ними, если они будут рядом друг с другом, и вас увеличат, чтобы увидеть разделительную линию.

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

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

WP Super Cache

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

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

WP Super Cache генерирует статические HTML-файлы из ваших динамических страниц WordPress. Эти HTML-файлы затем кэшируются локально на вашем сервере, экономя вашему серверу время, необходимое для создания страницы на лету.

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

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

Использование кэширования в браузере просто отдает приоритет кэшированию в браузере и устанавливает более длительное время хранения для кэшированных файлов.

Скрипты для нижнего колонтитула

Ленивая загрузка - это процесс сообщения определенных файлов, обычно сценариев, о том, что они могут загружаться позже, когда они действительно нужны пользователю. Это предотвращает «ожидание рендеринга скриптов» там, в PageSpeed ​​Insights. Если остальная часть сайта продолжает загружаться до сценариев, он не ожидает сценариев и, следовательно, загружается быстрее. Поместить сценарии в нижний колонтитул - это простой способ сделать это в некотором смысле.

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

Disqus Условная нагрузка

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

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

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

Автор редакции SEOblog

Редакционная команда SEOblog готова поделиться современными, актуальными советами и ресурсами, независимо от того, являетесь ли вы новичком в SEO или были в нем много лет.

Похожие

Комментарии