Увеличиваем скорость загрузки страниц с помощью сервиса Page Speed Insights

Увеличиваем скорость загрузки страниц с помощью сервиса Page Speed Insights

Сегодня в интернете система Page Insights является комплексным инструментом, позволяющим определить производительность ресурса и выбрать эффективный способ оптимизации интернет-страницы. Его можно использовать как при работе с ноутбуком, так и с телефоном. С помощью этого сервиса нельзя посмотреть скорость открытия сайта. Зато он упрощает анализ динамики отрисовки страниц сайта в используемом для работы браузере.

В процессе анализа учитывается ряд факторов, которые не зависят от вида соединения, например, CSS, конфигурация используемого сервера и так далее.

Главные преимущества ресурса – простота применения и быстродействие.

  • 1. Проверяем скорость загрузки сайта
  • 2. Описание системы
  • 3. Оценка скорости загрузки сайта и варианты продвижения
  • 4. Как улучшить скорость загрузки сайта (рекомендации)
  • 5. Улучшение скорости загрузки сайта на wordpress

Проверяем скорость загрузки сайта

Для получения детальной отчетности о производительности пользователь должен зайти на официальную страницу ресурса https://developers.google.com/speed/pagespeed/insights/ и вставить в поисковую строку «ввести URL» ссылку на сайт, который нужно исследовать. Далее, следует кликнуть по ссылке «Анализ».

Выдача результатов после подготовки занимает максимум минуту. Пользователи тут же могут выяснить, нужна ли ему оптимизация или проверить эффективность используемого для продвижения интернет-страницы алгоритма.

Описание системы

У отчетности по загрузке интернет-страницы имеется не только графическая, но и цифровая составляющая (как для компьютера, так и для телефона).

Параметр «скорость интернет-страницы» показывает динамику с момента отрисовки опубликованного материала (единица ее измерения — секунды) до инициализации используемого интерфейса после загрузки для последующей работы с ним.

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

  1. Slow – медленная скорость (цвет маркировки – красный).
  2. Average или нормальная скорость (для ее обозначения используется оранжевый цвет).
  3. Fast или быстрая скорость (отображается зеленым цветом).

График распределения скорости позволяет выявить наличие проблемных областей с медленной загрузкой для последующего принятия мер.

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

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

Кроме того, системой используется шкала (100-балльная), с помощью которой оцениваются интернет-ресурсы по скорости выдачи информации на заданный запрос. А также оценивается быстрота загрузки искомого сайта. Можно выделить 3 интервала скорости загрузки.

  1. Низкая – до 59 баллов.
  2. Средняя – от 60 до 79 баллов.
  3. Хорошая – от 80 до 100 баллов.

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

Оценка скорости загрузки сайта и варианты продвижения

Система Google используется примерно 200 различных факторов, позволяющих определить рейтинг интернет-страницы. Самым важным среди них являются ключевые фразы в начале используемого тега, по-другому называемыми title, релевантность опубликованного материала пользовательским запросам, расположение ключевиков и быстрота загрузки.

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

Как улучшить скорость загрузки сайта (рекомендации)

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

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

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

Еще один вариант – перенос части кода в HTML-разметку. Лучше доверить это профессионалу, в противном случае функционал интернет-страницы будет работать некорректно.

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

Еще один эффективный метод, позволяющий увеличить скорость, с которой загружается интернет-страница – сжатие изображений (оптимизация размера). Можно это сделать и с применением редактора Adobe Photoshop.

Улучшение скорости загрузки сайта на wordpress

Улучшаем скорость загрузки с помощью связки плагинов Autoptimize (оптимизация CSS, JS, HTML и изображений) и WP Super Cache (настройка кеширования). Такая рекомендация подойдет для сайтов, применяющих шаблон WordPress. В статьях подробно описана настройка плагинов. В моем случае удалось улучшить скорость загрузки примерно на 30%. Еще желательно использовать проверенный хостинг и обновить версию php на хостинге до последней – это улучшит скорость работы и повысит безопасность сайта.

Как увеличить скорость загрузки сайта по Google PageSpeed и не только

SEO оптимизация скорости загрузки сайта

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

Улитка, черепаха, «тормоз» … Это невинные слова, которые пользователи могут сказать о медленном сайте — и эти слова никто не хотел бы услышать. Воспитанные пользователи могут ничего не сказать, но все равно пойдут с Вашего сайта к конкурентам.

Неудобный для пользователей, не достоин выдачи выше, чем на сотую странице … Эти сложные эпитеты принадлежат «искусственному интеллекту» — то есть, вот что Google думает о сайте с плохой скоростью.

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

Лучшие инструменты для тестирования и оптимизации скорости загрузки сайта

1. Google Page Speed Insights

Можете не верить, но Google — вовсе не бездушная машина. Он может быть строгим в своих «предпочтениях» по поисковой выдачи, но предлагает инструменты для улучшения производительности сайта (которая считается одним из важных факторов поисковой оптимизации). Google Page Speed Insights сканирует ваш сайт, сообщает вам время его загрузки, находит слабые места, тормозящие его работу, и предлагает возможности для решения этих проблем. Менее чем через минуту вы получаете полезные советы, как повысить скорость сайта. Эти советы классифицированы по важности.

Еще один сервис, работающий по технологии Google pagespeed Insights

2. YAHOO’S YSLOW

Yahoooo! Поехали! Ваш сайт может работать быстрее, если вы воспользуетесь советами еще одного поискового гиганта. YAHOO’S YSLOW оценивает продуктивность и стремительность загрузки собственного сайта на основе перечня критериев Yahoo, влияют на то, насколько медленным или быстрым сайт является для посетителей. Этот простой в использовании инструмент выставляет оценки на основе этих критериев и дает советы по улучшению. Чтобы у вас была лучшая картина, информация предоставляется в виде графиков и диаграмм, а также классифицируется по важности.

3. Page Scoring

Избавьтесь вещей, которые замедляют ваш сайт! Вот один из самых простых онлайн-инструментов для определения скорости сайта — Page Scoring. Он сканирует ваш сайт и сообщает вам, как быстро он загружается со всеми HTML, CSS и Js-файлами, связанные с запросом пользователя. Он также дает вам ссылки на эти файлы и показывает в точности, сколько времени «выдается» на загрузку конкретных файлов и контента. Это дает вам прекрасную возможность узнать в общем о возможности производительности вашего сайта — от времени ответа веб-сервера в список файлов элементов страниц, «воруют» скорость загрузки.

4. Pingdom

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

Читайте также:  Сохранение паролей в браузере Opera

5. GTmetrix

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

6. Web Page Test

Если вы используете Web Page Test, много важных деталей относительно загрузки каждого элемента вашего сайта могут быть представлены в каскадных диаграммах и с удобными скриншотами. Вы получите оценки производительности сайта и список рекомендации по оптимизации в порядке важности. Одна из классных особенностей Web Page Test — то, что вы можете выбрать страны, по которым вы хотите провести проверку производительности сайта.

7. Monitis

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

8. PR-CY.ru

Данный сервис оценивает быстроту загрузки сайта, а также дает рекомендации по её улучшению

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

Как увеличить скорость загрузки сайта?

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

Определение причины медленной загрузки сайта – первый шаг решения проблемы

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

Для оценки скорости сайта и получения рекомендаций по ее увеличению лучше всего использовать дополнения для Фаерфокса или Хрома Page Speed. Также для этой цели можно использовать онлайн-сервисы оптимизации скорости описанные выше.

Методы ускорения загрузки сайта

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

Один из них – это оптимизация модулей и компонентов сайта.

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

Объединить CSS и JS

Еще один эффективный способ – объединить внешние файлы CSS или скрипты JS. Благодаря этому уменьшается общее число загружаемых объектов и количество запросов к серверу. Еще эти же файлы можно сжать с помощью Gzip.

Ускорение сайта методом оптимизации изображений

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

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

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

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

Лично я оптимизировал сайт seovedenie.ru с помощью сервиса Google Page Speed Insights. После некоторых манипуляций я достиг заветных 100 баллов из 100 возможных. В результате оптимизации скорость сайта увеличилась на порядок во всех сервисах описанных выше.

Набирайте скорость, держитесь крепче … и хорошего полета!

Оптимизация PageSpeed Insights до 100 очков

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

5 секунд — то время, которое пользователь готов подождать для полной загрузки. Все то, что больше, — фатально. Он просто перейдет к вашим конкурентам.

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

Вывод однозначен: нужна оптимизация скорости загрузки сайта. Но как именно ускорить загрузку сайта на любых устройствах?

Спросите в Google, у него есть для этого решение — используйте PageSpeed Insights. Этот инструмент не только анализирует страницы, но и предлагает эффективные решения для повышения скорости.

Сократить время ответа сервера

Есть такой термин — Time To First Byte. Так называют интервал времени до получения после отправки запроса со стороны посетителя самого первого байта.

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

Необходимо проверить TTFB? В таком случае используйте PageSpeed Insights. После завершения инструментом анализа проверить информацию можно в блоке под названием «Сократите время от сервера».

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

Уменьшение веса изображений

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

Но как именно это можно сделать? Алгоритм следующий:

  • сначала все фотографии сожмите. В этом случае помогут специальные бесплатные инструменты (например, TinyPNG или, как вариант, Compressor.io). В отдельных случаях удается получить до 80% сжатие. При этом потери качества не будет;
  • размер постарайтесь уменьшить до предельно возможного.

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

Отличным функционалом обладает сайт https://squoosh.app/. Здесь буквально в 2-3 клика можно уменьшить вес фото на 70-80%, не теряя высокое качество изображения.

Так же, прочитайте статью про оптимизацию картинок для сайта.

Сокращение кода CSS и JavaScript

Среди рекомендаций Google — сокращение CSS и JavaScript.

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

Все перечисленные нежелательные элементы вполне способны увеличить объем CSS и JavaScript вдвое как на примере, приведенном ниже.

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

Решить данную задачу можно достаточно быстро. Для этого установите специальный инструментарий под названием Gulpjs.

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

Данный инструментарий сокращает размер файла буквально в несколько раз. Более детальная информация — отражена в справочниках Google.

Сокращение html-кода

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

Помимо того, после сокращения визуально код напоминает вязкую кашу. В ней разобраться проблематично. Но можно упростить себе задание, используя какой-нибудь плагин. К примеру, WP-HTML-Compression.

Оптимизируем загрузку видимого контента

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

Читайте также:  Восстанавливаем удаленные письма на Яндекс.Почте

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

Такой функционал особо полезен на тех ресурсах, где очень много картинок. Lazy loading повышает их производительность. И это — веский аргумент в пользу ее использования.

Существуют несколько типов ленивой загрузки:

  • Скроллинг — контент, который не попал в видимую зону, постепенно загружается после того, как пользователем страница прокручивается;
  • Клик — контент загружается при нажатии специальной ссылки «Подробнее»;
  • Фоновый режим — посетитель оставил открытым загруженный ранее документ. В этом случае можно в фоновом режиме загрузить изображение большого формата.

Существует несколько решений для ленивой загрузки. Среди наиболее распространенных — следующие:

  • стандартный lazy loading и David Walsh — упрощенная версия такого скрипта предусматривает замену в теге img атрибута src на data-src;
  • ленивая загрузка с так называемым прогрессивным улучшением — JS используется в качестве улучшения для типичных HTML и CSS;
  • плагин blazy.js на простом JS — этот скрипт «весит» совсем немного, он обеспечивает асинхронную загрузку, обеспечивает работу сразу с несколькими фото с целью экономии запросов;
  • плагин Lazy Load XT jQuery — упрощенная версия предназначена именно для отложенной загрузки;
    Craig Buckler

Включаем кеширование браузера

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

CDN — в переводе звучит как «сеть доставки контента». Это множество серверов со специализированным программным обеспечением. Их задача — ускорить доставку конечному пользователю контента.

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

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

Но и эту проблему вполне можно решить. Как именно? Замените счетчики изображениями, которые сможете сохранять, используя CDN.

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

Google код Analytics меняет нечасто. В основном, за год несколько раз. Именно поэтому создать можно специальный скрипт. Раз в сутки он будет проверять Analytics на наличие каких-либо зменений. Важно: новый код загрузиться лишь в том случае, когда изменения будут обнаружены. Соответственно, вы сможете хранить JavaScript код Analytics, не скачивая его постоянно при обращении к серверам Google.

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

Удаляем код JavaScript и CSS, блокирующий отображение

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

Для WordPress отличным решением ситуации способен стать плагин Autoptimize. Откройте настройки, удалите возле “Force JavaScript in Head” галочку и затем поставьте ее для “Inline all CSS.”

Включаем сжатие на сервере

Включить сжатие сможете непосредственно в соответственных настройках сервера. В том случае, когда сомневаетесь, как правильно это сделать, или вообще не знаете, обращайтесь непосредственно к сисадминистратору с просьбой подключить GZIP сжатие. Подробнее читайте в заметке «зачем вообще нужно gzip сжатие».

Если у вас ISP-менеджер, то делается это легко, в настройках www-домена.

Оптимизируем под мобильные устройства

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

Заключение

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

Как ускорить сайт WordPress для Google PageSpeed

Просмотров: 1 223

Как ускорить сайт WordPress для Google PageSpeed Insights с показателями 100/100? Сегодня я хочу поделиться с вами некоторыми советами которые помогут вам набрать 100/100 баллов в Google PageSpeed ​​Insights на вашем сайте WordPress. Или, по крайней мере, приблизить к этому показателю ваш веб-сайт ВордПресс.

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

Западный SEO-консультант Ник Лерой (Nick Leroy) рассказал, что много внимания уделял скорости загрузки сайтов своих клиентов, а его собственный сайт на WordPress был довольно медленный. Чтобы не быть сапожником без сапог, он решил начать работу по ускорению ресурса. В итоге он сумел добиться максимальной скорости загрузки 100 в Google Page Speed Insights для десктопной версии сайта NickLeRoy.com. Мобильную версию удалось ускорить до 89.

Все владельцы веб-ресурсов могут значительно увеличить скорость загрузки страниц сайта на ВордПресс, считает Ник и рассказывает, как это сделать. 100/100 с помощью WordPress (возможно?).

Как ускорить сайт на WordPress?

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

Прежде чем приступить к ускорению своего ресурса, Ник Лерой решил понять, с чем предстоит работать. Так как сайт построен на CMS WordPress, были проанализированы следующие области:

  • Хостинг,
  • Тема WordPress,
  • Плагины ВордПресс,
  • Изображения,
  • Ресурсы.
    На основе проверки был составлен список того, что можно улучшить. Затем Ник приступил к внедрению изменений.

Проблема: хостинг и TTFB

Первое, что бросалось в глаза при поверхностном анализе — большое время до получения первого байта после отправки запроса со стороны клиента (Time To First Byte или TTFB) для всех страниц сайта: от 1,5 до 2 секунд. И это было просто время, которое необходимо для первоначального соединения со страницей без ее загрузки.

Помимо этого были и другие проблемы, связанные с хостингом: отсутствие HTTP/2 setup/configured (проблему можно было бы исправить, используя CDN), отсутствие кэширования и т.п. Общий хостинг на Hostgator не способствовал достижению цели увеличения скорости загрузки сайта.

Решение: смена хостинг-провайдера

В качестве альтернативы существующему хостингу были выбраны два провайдера: FlyWheel и Kinsta. Оба провайдера:

  1. Предлагали услуги хостинга специально для WordPress-сайтов,
  2. Относительно доступны по цене ($25-30 в месяц),
  3. Предлагали решения для кэширования на сервере,
  4. Имели встроенную технологию CDN,
  5. Предлагали бесплатный SSL-сертификат (и протокол HTTP/2).

В итоге было решено остановиться на хостинге FlyWheel. Этот провайдер был немного дешевле и предоставлял локальные решения для разработки новых сайтов на WordPress.

После некоторых раздумий Ник Лерой решил создать новый сайт NickLeRoy.com. И вот, почему.

Проблема: оптимизация тем, плагинов, изображений, ресурсов

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

Тема WordPress

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

В результате многие темы содержат большое количество не нужного функционала.

Плагины ВордПресс

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

Читайте также:  Как отключить вибрацию на iPhone

Изображения

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

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

Ресурсы

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

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

Решение: создание нового сайта

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

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

  • Чистая установка WordPress на Local by Flywheel с чистой базой данных и кодом,
  • Установка облегченной темы,
  • Установка конструктора страниц Elementor, чтобы сайт выглядел так же, как изначально, но загружался быстрее,
  • Перестройка всего сайта,
  • Оптимизация изображений с помощью imageOptim. Для этого все картинки были загружены в папку wp-content/uploads, пропущены через сервис imageOptim, и выложены обратно на сайт. Суммарное сжатие составило около 90% по сравнению с исходным размером файлов,
  • установка Autoptimize и Async Javascript, что позволило объединить JS и CSS и уменьшить / удалить блокировку рендеринга.

После реализации описанных выше действий сайт был перемещен из локальной среды разработки в промежуточную. Затем специалисты настроили SSL и HTTP/2 и после тестирования обновили DNS.

Результаты

Скорость загрузки страниц в Google Page Speed оценивалась с помощью сервиса SanityCheck.io. На скриншоте видно, как после внесения всех изменений улучшились показатели для мобильной версии сайта (синяя линия) и для десктопной (черная линия).

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

  1. Отказаться от Google Fonts и полностью перейти на системные шрифты или загрузить Google Fonts на сервер,
  2. Удалить из верхней части страницы код CSS и Inline,
  3. Оптимизировать файлы JS / CSS,
  4. Установить стороннюю CDN (например, CloudFlare) или использовать сторонний сервис для оптимизации изображений, например, в формате WebP,
  5. Улучшить кэширование для ресурсов.

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

В заключение

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

PageSpeed Insights: как ускорить загрузку сайта с его помощью

Поделиться этим постом

Согласно исследованиям Google длительность загрузки страниц до 10 секунд увеличивает показатель отказов на 123%. Это серьёзный повод задуматься над оптимизацией этого показателя. Google рекомендует использовать сервис по измерению скорости загрузки РageSpeed Insights, который даёт рекомендации по улучшению этого показателя. Об инструменте и его функциях я расскажу в посте.

1. Что такое PageSpeed Insights, и в чём его польза

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

Инструмент показывает результаты для мобильных и десктопных устройств и анализирует страницу по таким параметрам:

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

Ниже идёт перечень советов по улучшению скорости загрузки.

После проверки необязательно спешить выполнять все рекомендации Page Speed Insights. Некоторые из них способны навредить сайту. Например, изменение в JavaScript может существенно повлиять на отображение рабочих элементов. Не нужно гнаться за высокой оценкой сервиса, важнее оптимизировать страницу для удобства посетителей и хорошего ранжирования. Например, скорость загрузки сайта Google Developers для мобильных устройств получила среднюю оценку.

2. Как проверить показатели в PageSpeed Insights

Для проверки скорости загрузки страницы введите её адрес в строку и нажмите на кнопку «Анализировать».

Посмотреть советы по ускорению загрузки вы можете в разделе «Возможности», где нужно кликнуть на интересующий показатель.

Чтобы не проверять каждую страницу по отдельности, загрузите список URL в Netpeak Checker и на боковой панели отметьте параметры в разделе «Google PageSpeed Insights».

Нажмите на «Старт», чтобы запустить анализ, и по окончании ознакомьтесь с показателями в основной таблице.

3. Как улучшить показатели загрузки сайта

При низких показателях в сервисе PageSpeed Insights можно действовать по-разному:

  1. Полностью следовать советам данного инструмента и добиться высокой оценки.
  2. Совмещать рекомендации и стандартные методы увеличения скорости загрузки с привлечением сторонних сервисов для более глубокого анализа.

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

  • Сжатие изображений. Все картинки на сайте можно преобразовать в форматы JPEG 2000, JPEG XR WebP, а также уменьшить их размер при помощи онлайн-инструментов. Например, TinyPng или Compressor.io.
  • Оптимизация Javascript и CSS. Сократить код можно с помощью CSSCompressor и YUI Compressor либо вручную.
  • Использование кэширования — сохранения копий страниц сайта в кэше браузеров пользователей. При следующем посещении загрузится копия из кэш-памяти браузера, и это значительно увеличит скорость отображения контента. Для настройки кэширования нужно добавить код в файл .htaccess на сервере Apache (для Nginx не сработает):

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

  • Использование Gzip-сжатия на сервере. Чтобы не создавать дополнительную нагрузку на сервер, рекомендуется использовать статическое сжатие. Оно заключается в загрузке уже заархивированных файлов с данными на сервер, который будет выдавать их из архивов при запросе браузера.
  • Асинхронная загрузка CSS. В этом случае сначала загружается текст, после него — CSS-стили. Один из способов внедрения асинхронной загрузки — добавление атрибута rel=”preload” на страницы сайта:

    Узнать показатели скорости загрузки можно при помощи Netpeak Spider, который анализирует параметры загрузки контента и ответ сервера. Для проверки необходимо:

      Отметить параметры «Время ответа сервера» и «Время загрузки контента» на боковой панели.

  • Ввести URL сайта в адресной строке и начать сканирование.
  • По окончании сканирования вы увидите нужные показатели в основной таблице с результатами анализа. URL в таблице можно фильтровать по скорости ответа от большей к меньшей и наоборот.

    Чтобы посмотреть URL, на которых найдены ошибка «Большое время ответа сервера», перейдите в отчёт по ошибкам и кликните по названию ошибки.

    Также вы можете отправить отдельные URL на анализ в Google PageSpeed. Для этого щёлкните по URL правой кнопкой мыши и выберите пункт «Открыть URL в сервисе» → «Google PageSpeed».

    Подводим итоги

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

    При низкой оценке сервиса стоит детально изучить скорость загрузки страниц, проанализировав её с помощью других сервисов и краулеров, например, Netpeak Spider. Увеличить скорость можно стандартными методами: с помощью сжатия изображений, таблицы стилей CSS, данных Javascript, путем кэширования страниц и загрузки на сервер заархивированных данных (Gzip).