1. Что такое Google PageSpeed?
2. Какие элементы вы можете оценить и оптимизировать с помощью PageSpeed ​​Insights
3. 1. Оптимизация скорости мобильной страницы
4. 2. Сокращение времени отклика сервера
5. 3. Минимизация ресурсов, используемых на веб-страницах
6. 4. Предотвращение перенаправления целевых страниц
7. 5. Включение сжатия
8. 6. Сокращение CSS, HTML и JavaScript элементов
9. 7. Устранение блокировки рендеринга JavaScript
10. 8. Использование кэширования браузера
11. 9. Оптимизация изображений
12. 10. Использование сетей доставки контента
13. 11. Удаление строк запроса из статических ресурсов, если это возможно.
14. 12. Расширение кеша

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

Скорость страницы часто путают со скоростью сайта, то есть с какой скоростью образец веб-страницы просматривает сайт. Это просто другой способ сказать «время загрузки».

Это время загрузки действительно важно для обеспечения хорошего пользовательского опыта и обеспечения того, чтобы люди не покидали ваш сайт преждевременно: Google обнаружил, что 53% мобильных сайтов заброшены если время загрузки составляет 3 секунды или дольше. Для 47%, кто остался, мобильные сайты, которые загружаются за 5 секунд или меньше, получают в два раза больше дохода от мобильной рекламы, чем сайты со средним временем загрузки 19 секунд.

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

Что такое Google PageSpeed?

Google PageSpeed ​​- это набор инструментов, который может помочь вам оптимизировать производительность вашего сайта, при этом скорость страницы является основным атрибутом, который оптимизируется. Способы использования PageSpeed ​​зависят от того, как построен ваш сайт. PageSpeed ​​имеет несколько фильтров, которые могут оптимизировать скорость загрузки различных элементов сайта, таких как изображения, HTML и файлы Javascript. Например, PageSpeed ​​помогает уменьшить размер CSS-файлов, объединяя несколько файлов в один или увеличивая срок службы кэша.

PageSpeed ​​также работает с Google Analytics для отслеживания сообщений и другой активности сайта, так что вы можете измерить, как ваше новое время загрузки влияет на важные показатели, такие как показатели отказов и полезные нагрузки. PageSpeed ​​Insights является частью инструментария и помогает вам оптимизировать ваш сайт, присваивая оценку 1-100, а затем разбивая эту оценку на высокий, средний и низкий приоритеты с предложениями по улучшению.

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

Какие элементы вы можете оценить и оптимизировать с помощью PageSpeed ​​Insights

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

1. Оптимизация скорости мобильной страницы

Вы определенно хотите расставить приоритеты в исправлении своего мобильного опыта, поскольку Google по сути стал поисковой системой для мобильных устройств. Они дадут вам дополнительные очки к вашему счету, если ваш мобильный опыт будет быстрым. В качестве дополнительного бонуса, в большинстве случаев ваш счет на рабочем столе будет исправлен, если вы сначала исправите мобильный сайт!

2. Сокращение времени отклика сервера

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

3. Минимизация ресурсов, используемых на веб-страницах

Чем меньше ресурсов используют ваши веб-страницы, тем быстрее будут загружаться ваши страницы.

Чтобы получить более глубокий взгляд на то, как вы можете минимизировать HTML, вы можете использовать Расширение PageSpeed ​​Insights Chrome создать оптимизированную версию вашего HTML-кода. Затем вы можете проанализировать различия между вашим текущим HTML-кодом и версией PageSpeed ​​и перейти к правилу «Minify HTML», сохранив оптимизированный HTML-код, поэтому вам не нужно будет переписывать его вручную.

4. Предотвращение перенаправления целевых страниц

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

5. Включение сжатия

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

6. Сокращение CSS, HTML и JavaScript элементов

Сжатие само по себе не даст вам более желаемой скорости страницы, поэтому вам также нужно минимизировать ваши элементы CSS, HTML и Javascript.

Оптимизируйте свой код, удаляя ненужные символы (а также пробелы и запятые), комментарии, неиспользуемые части и форматирование, чтобы сократить время загрузки. Компрессор YUI рекомендуется Google и может использоваться как для Javascript, так и для CSS, но вы определенно хотите отдать приоритет критическим элементам CSS и упростить импорт. Вы можете отложить JavaScript до тех пор, пока не закончите сжимать CSS, но расставьте приоритеты встроенных элементов JavaScript.

7. Устранение блокировки рендеринга JavaScript

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

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

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

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

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

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

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

Когда вы сжимаете другие элементы с помощью Gzip или других инструментов, изображения не должны быть включены. Скорее, изображения имеют свой собственный процесс оптимизации так что качество сжатия не ухудшается процессом сжатия. Убедитесь, что изображения правильно сжаты в Photoshop и в оптимальном формате (JPEG для фотографий и PNG для простой графики с 16 цветами или меньше).

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

10. Использование сетей доставки контента

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

11. Удаление строк запроса из статических ресурсов, если это возможно.

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

12. Расширение кеша

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

Так как рекомендуется использовать кэширование браузера в течение года, этот фильтр перезаписывает заголовки HTTP, чтобы увеличить максимальный срок кэшируемых ресурсов до одного года (или 31 536 000 секунд).

Наличие оптимальной функциональности сайта с невероятно быстрым временем загрузки должно быть неотъемлемой частью вашей стратегии SEO. Ваша оценка PageSpeed ​​является отличным показателем для оценки эффективности вашего сайта и того, как вы можете его улучшить. 80 и выше - идеальный диапазон, к которому следует стремиться. Хотя 100 баллов не является невозможным, могут быть определенные аспекты дизайна вашего сайта и элементы, которые просто сделают это невозможным (например, невозможность устранить весь JavaScript-код, блокирующий рендеринг, если вы используете темы WordPress).

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