4 простых способа улучшить счет PageSpeed ​​Insights на WordPress

1. Основная четверка
2. Активировать сжатие
3. Для серверов Apache
4. Использование кэширования в браузере
5. Оптимизация изображений
6. Используйте наименьшие возможные размеры
7. Сжатие файлов изображений
8. Удалить блокировку рендера JavaScript
9. Вариант 1. Редактирование файла functions.php (только для WordPress)
10. Вариант 2: скачать плагин
11. Заключение

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

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

Теперь, когда у вас есть простое правило для определения приоритетности задач, моя цель - предоставить вам простое руководство по быстрому и эффективному повышению вашей оценки Google PageSpeed ​​Insights. Чтобы ограничить область применения, я решил сосредоточиться на решениях для сайтов WordPress (хотя некоторые из этих решений зависят от типа сервера, поэтому они не являются полностью исключительными для сайтов, созданных на WordPress).

Прежде чем мы углубимся в решения, я хочу рассказать о скорости страницы и о том, как она связана с SEO, а также с самой PageSpeed ​​Insights.

Во-первых, почему скорость страницы стала настолько важной для поисковой оптимизации? Ответ двоякий: пользовательский опыт (UX) и рост мобильного поиска. Становится все труднее различать то, что хорошо / плохо для UX, и то, что хорошо / плохо для SEO - они почти неразделимы.

Итак, вы можете сказать: «Хорошо, я понял. Скорость страницы, очевидно, является ключевым компонентом пользовательского опыта ». Но почему он, по мнению многих SEO, стал одним из ключевых компонентов SEO?

Один из возможных ответов таков: как показало Google в 2015 году, большинство их поисков происходит на мобильном устройстве. Очевидно, что значительная часть поисков на мобильных устройствах происходит в мобильных сетях. Эти мобильные сети, как известно, имеют меньшую пропускную способность, чем Wi-Fi или проводные соединения, что означает, что владельцы сайтов должны убедиться, что их сайт оптимизирован для всех уровней скорости интернет-соединения. Это делает больший акцент на скорости страницы.

Если вы когда-либо использовали PageSpeed ​​Insights, вы знаете, что существует довольно много факторов, которые могут повлиять на скорость загрузки страницы. Сайт может загружаться медленно, поскольку сервер, на котором он размещен, слишком долго реагирует на HTTP-запрос. Или, сайт может загружаться медленно, потому что у него есть один из этих безбожных слайдеров с изображениями и JavaScript.

Основная четверка

Чтобы создать лучшую комбинацию простоты и отдачи (подумайте о себе), я сварил список из 10 «Google». Правила скорости »До 4« Musts »: Активировать сжатие , Использование кэширования в браузере , Оптимизировать изображения , а также Удалить блокировку рендеринга JavaScript ,

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

Активировать сжатие

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

Есть два способа получить доступ к вашему файлу .htaccess в WordPress. Самый простой способ - через плагин Yoast (если вы используете его, что вам и нужно). Другой способ - через FTP или cPanel.

Чтобы найти файл .htaccess через Yoast, перейдите к плагину в меню администратора, затем перейдите в меню «Инструменты» и выберите «Редактор файлов» (второй пункт). Вы должны увидеть файл Robots.txt вверху экрана и прямо под ним файл .htaccess. В новой строке вставьте следующий код:

После сохранения изменений проверьте, включено ли сжатие GZIP с помощью Компрессионный инструмент Varvy's GZIP , Если этот код не работает, попробуйте выполнить одно из следующих действий в зависимости от типа сервера, с которым вы имеете дело. Чтобы определить тип сервера, используйте расширение BuiltWith для Chrome или Встроенный сайт ,

Для серверов Apache

Для серверов NGINX

Примечание. Этот код будет добавлен в файл конфигурации , а не в .htaccess.

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

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

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

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

Когда вы окажетесь в файле .htaccess, вставьте следующий код в новую строку:

Дважды проверьте, работает ли добавление этого кода, запустив тест PageSpeed ​​Insights.

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

Если вам интересно, что именно делает этот код, давайте разберем, что происходит с этой строкой:

ExpiresByType text / css "доступ 1 месяц"

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

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

Оптимизация изображений

Изображения часто являются «самыми тяжелыми» элементами на веб-странице с точки зрения размера файла. Для справки: типичная таблица стилей CSS может иметь размер файла чуть ниже 100 КБ, тогда как одно изображение с размерами 1000 × 1000 может легко достигнуть 1 МБ, что примерно в десять раз больше размера таблицы стилей CSS. И, если на вашей веб-странице есть несколько изображений, влияние на скорость страницы может быстро стать значительным.

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

Используйте наименьшие возможные размеры

Изображения выше показывают размер файла для одного и того же изображения при трех разных значениях ширины: 500px, 1000px и 2000px соответственно. Как вы можете видеть, загрузка изображения шириной 2000 пикселей, но отображаемого только на ширине 500 пикселей, может привести к почти четырехкратному увеличению размера файла.

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

Так, например, допустим, у вас есть изображение, которое имеет размер 800 × 800 в его естественном состоянии, но отображается в два раза меньше (400 × 400), когда оно отображается на веб-странице. Если нет причин делать это изображение доступным пользователям в полном размере 800 × 800, то уменьшите изображение в медиатеке WordPress до 400 × 400.

Дополнительный совет: формат файла также может быть фактором. Например, файлы JPEG, как правило, гораздо меньше, чем файлы PNG.

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

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

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

• Сжатие и оптимизация изображений Smush (также известный как WP Smush) - Этот простой в использовании плагин WordPress позволяет просматривать медиатеку и сжимать изображения, которые уже были загружены. Он также будет сжимать изображения по мере их загрузки.
• Другие инструменты. Существует множество других программ и веб-сайтов, которые предлагают сжатие изображений. Один из моих любимых Compressor.io ,

Примечание. Если вы вернетесь назад и сожмете изображения в предыдущем разделе, у вас останутся файлы размером 20, 52 и 123 КБ соответственно. Это делает изображения от 25% до 50% меньше.

Удалить блокировку рендера JavaScript

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

Прежде чем перейти к решениям, важно объяснить, что именно означает «удалить блокирующий рендеринг JavaScript».

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

В приведенном выше примере файлы JavaScript находятся внутри закрывающего тега head (</ head>). Это не идеально, поскольку большая часть реального содержимого страницы обычно идет после закрывающего заголовка.

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

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

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

Один из способов - добавить немного кода PHP в файл functions.php вашей темы WordPress. Другой способ - загрузить плагин, который позаботится об этом за вас.

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

Вариант 1. Редактирование файла functions.php (только для WordPress)

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

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

Шаг 1: Перейдите к редактору (в разделе Внешний вид) в меню администратора (см. Скриншот выше).

Шаг 2: Найдите «Функции тем» в списке файлов PHP справа (см. Скриншот выше).

Шаг 3: Прокрутите до самого конца файла functions.php и вставьте этот фрагмент кода (убедитесь, что вы не вставляете внутри другой функции):

Сверху вниз, этот код говорит в самом общем смысле: «Всякий раз, когда пользователь является кем-то, кроме администратора, откладывайте синтаксический анализ JavaScript». Часть «кроме администратора» важна, потому что откладывание JavaScript для пользователей в бэкэнд может заставить некоторые плагины не работать должным образом.

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

if (strpos ($ url, 'NAME_OF_FILE.js')) возвращает $ url;

NAME_OF_FILE следует заменить уникальной строкой символов, ведущей к расширению файла .js. Например, если у вас есть два файла JavaScript в двух отдельных папках, оканчивающихся на «jquery.js», но вы хотите указать только одну из них, разверните искомую строку, чтобы она была уникальной среди других.

Если вы пытаетесь нацелить два или более файлов с помощью этого кода, отформатируйте его следующим образом:

if (strpos ($ url, 'EXAMPLE1.js') || strpos ($ url, 'EXAMPLE2.js')) return $ url;

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

Вариант 2: скачать плагин

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

Заключение

Почти невозможно получить идеальный балл PageSpeed ​​Insights, но решение этих четырех легко исправимых проблем значительно приблизит вас. Что еще более важно, это приведет к заметным улучшениям фактического времени загрузки вашего сайта.

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

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

Похожие

Комментарии