Pagespeed page speed unavailable почему

Как увеличить скорость загрузки WordPress. Сервис Google PageSpeed Insights

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

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

Оптимизируем WordPress по сервису PageSpeed Insights

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

Записываем или сохраняем наши результаты и начинаем работу над сайтом.

Включите gzip сжатие

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

Код для сервера Nginx:

Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы

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

Поэтому не нужно менять подключение стилей сайта и переносить их в подвал или ставить в последнюю очередь. А вот насчет остальных есть смысл пересмотреть их расположение. У плагина Better WordPress Minify есть встроенный менеджер файлов css и js. С помощью его можно легко менять подключение скриптов, то есть переносить из head в footer.

Подключение скриптов

Что касается подключения своих скриптов к теме, то лучше всего объединять их в один файл, чтобы уменьшит количество запросов. А после подключить не через тег script , как обычно, а через файл functions.php в футер сайта, таким образом:

Подключение скрипта только на определенной странице.

Подключение скрипта во всех типах записей, только не на главной.

Подключение скрипта только внутри статьи.

Все довольно просто: меняем только функцию условия. Для подключения из дочерней темы нужно изменить функцию пути на эту get_stylesheet_directory_uri() .

Подключение стилей

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

А с помощью условных функций, которые использовались чуть выше, устанавливаем определенные места подключения.

Подключение библиотеки jQuery

По умолчанию WordPress подключает библиотеку из своей директории и также в заголовок сайта. Если нам нужно изменить версию jQuery или зарегистрировать ее в подвале, тогда мы вначале удаляем старую при помощи функции wp_deregister_script и тут же регистрируем свою.

Отключаем стили плагинов

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

Пример из WP-Pagenavi

Копируем его уникальный идентификатор – это wp-pagenavi, а после в файле functions.php вашей темы вставляем такой код:

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

Переносим все скрипты в footer

Есть такой небольшой плагин Footer JavaScript , который написал автор Vladimir Prelovac. Он переносит все подключения, даже те, которые не нужно, в низ сайта. Используйте на свое усмотрение.

Используйте кеш браузера

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

Разве что в виде исключений, если того требует желание добиться максимальной оценки. Имеется пару вариантов: отказаться от их использования, переместить скрипты на свой сайт. Для Google аналитика есть специальный плагин Complete Analytics Optimization Suite , который позволит загружать библиотеку локально.

Насчет Яндекса чуть сложнее, так как для него нет подобных плагинов. Можно провести лишь эксперимент: скачать скрипт метрики по адресу https://mc.yandex.ru/metrika/watch.js, сохранить его на сайте, а в подключении изменить путь скрипта. Насколько правильно он будет работать – не знаю. Это просто один из вариантов.

А пока включим кэширование браузера. Для этого поместите ниже представленный код в файл .htaccess

Код для сервера Nginx:

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

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

Для этого есть специальные программы, сервисы и тот же PageSpeed Insights, где по окончании проверки дается ссылка на скачивания оптимизированных файлов.

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

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

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

Сокращение JavaScript, CSS, HTML

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

Они будут на лету сокращать файлы.

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

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

Page Speed Unavailable

Коллеги, нигде не могу найти ответ на вопрос, почему у сайта в PageSpeed Insights не определена скорость загрузки?

Как с этим следует бороться? Оптимизация здесь явно не при чем, у www.ru при оптимизации 99/100 скорость загрузки также не определяется.

  • Вопрос к тем, кто считает себя разработчиком — сколько часов вы тратите на образование
  • Скорость загрузки по Pagespeed Insights и оптимизация кода
  • PageSpeed Insights показывает очень медленную скорость, при этом оптимизация отличная! Как такое может быть?

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

Данные для сайта в целом (опять же, если достаточно статистики) можно проверить введя в поле:

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

А какая должна быть посещаемость? 150 человек в день это мало?

Данные в сервисе — на основании метрик, полученных из ГуглХрома от реальных юзеров.

На некоторых сайтах уже при стабильных 50-60 униках/сутки на страницу уже есть данные по FCP/DCL, а на других и при стабильных 100 униках данные отсутствуют. х.з.

Есть подозрения, что зависит от тематики (отрасли сайта), но тут надо смотреть более детально. Отрасль, к которой Гугл относит ваш сайт можно проверить здесь.

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

Откуда эти сырые дровишки?

Этот фейк обработает любой, даже только что выпущенный в свет сайт (а точнее он обрабатывает страницу).

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

PageSpeed Insights показывает среднюю скорость загрузки страницы, ее распределение, а также уровень оптимизации этой страницы. И что интересно, у сервиса даже соответствующие подписи есть ��. См. картинку.

Скорость загрузки — это показатели FCP (время первой отрисовки экрана) и DCL (время полной загрузки DOM). Для каких страниц он показывается, я написал выше.

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

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

Ещё одна ересь от жертв ЕГЭ, прогуливающих физику-математику 🙂

Надо мануалы читать, а не фейки разносить с отключённой головой.

Рекомендую повышать знания не только технические, но и форумные /ru/forum/871405

Жертвам ЕГЭ специальное пояснение: упоминание должности может расцениваться как обсуждение действий модератора.

В том то и дело, что понятие «скорость» более обширное.

Цитата из источника, указанного вами:

Скорость это не только производная по времени, и она не всегда измеряется в [единица измерения какой-то величины] / [единица времени].

Например есть такие «разновидностями скоростей», например как . групповая скорость, фазовая скорость и т.п. правда о них не все успешные ЕГЭ’шники знают 😉

SeVlad:

SeVlad:

Надо мануалы читать, а не фейки разносить с отключённой головой.

Для тех, кто успешно сдал ЕГЭ:

Для тех, у кого голова якобы «включена», но внутри не шибко полно — см. картинку, переводим в https://translate.google.com. думаем , продолжаем дальше показывать всем кто есть кто на форуме.

П.С. без обид, но если вам нечего сказать по сути заданного пользователем вопроса — промолчите. Заранее спасибо, я уже удалился ��

Надеюсь учиться, чтобы больше никогда не нести ТАКУЮ ахинею и верить всяким фейкам.

1. Нет большого смысла много кликать по PageSpeed’у в поисках страниц, для которых есть данные.

Аналогичные показатели можно увидеть в отчетах Гугл.Аналитики и Яндекс.Метрики (тоже с разбивкой по страницам). Только там есть возможность сделать их несколько более точными, например, ограничив выборку срезом по регионам аудитории, которые для вас реально важны.

2. Менее репрезентативно, поскольку будут учитываться только непосредственно ваши данные, но и то же самое, и ряд более актуальных параметров можно получить через Хром-плагин от самого Гугла — Lighthouse

3. Параметр FCP (первая отрисовка) — не совсем однозначен.

Поскольку, если, например, вы решили без вникания в суть последовать рекомендациями ПейджСпида и убрали все js\css из шапки, то параметр станет лучше. В то же время, если эти js\css непосредственно для вашего сайта критичны, то для реального посетителя это может не только не иметь пользы, но и смущать его временной демонстрацией уродливой версии.

DCL (полная загрузка и парсинг HTML + загрузка и обработка неасинхронных скриптов и стилей, загружаемых перед ними) — может быть и больше, и меньше реального момента начала комфортного просмотра страницы.

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

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

скорость загрузки сайта должна быть высокой

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

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

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

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

проверка скорости в 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

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

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

не оптимизированный код

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

оптимизированный код

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

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

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

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

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

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

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

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

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.

сеть 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-домена.

сжатие на сервере

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

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

Заключение

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

Как повысить скорость загрузки сайта с Google PageSpeed Insights

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

Мотивация

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

1.jpg

Значит ли это, что результат 100/100 недостижим?

Как заставить страницы загружаться быстрее

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

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

Шаг первый: Оптимизируйте изображения

2.jpg

Инструмент PageSpeed Insights предлагает оптимизировать картинки посредством уменьшения размера файлов. Для этого можно предпринять следующие меры:

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

· Уменьшите размер изображений до необходимых параметров, не ухудшив при этом их качества. Допустим, если нужно изображение размера 150x150px, именно такого размера картинку нужно загрузить на сервер. Не рекомендуется использовать изображения большего размера, чем вы хотите поместить на сайт, или уменьшать их размер с помощью CSS или HTML тегов.

Можно скачать изображения, сжать и отформатировать их вручную или воспользоваться сервисом PageSpeed Tool и скачать уже оптимизированное изображение. То же самое можно сделать с JavaScript и CSS.

Шаг второй: Сократите объем ресурсов CSS и JavaScript

3.jpg

Google также рекомендует сократите объем ресурсов CSS и JavaScript.

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

3.1.jpg

Для решения этой проблемы можно установить инструмент Gulpjs на сервер. Инструмент автоматически создаёт новый CSS файл и удаляет все пробелы. Он также автоматически создаёт новый CSS файл для всех внесённых вами изменений. В этом случае разработчиком удалось уменьшить размер главного CSS файла с 300kb до 150kb.

Если вы используете WordPress, целесообразно будет установить плагин Autoptimize.

Также можно загрузить уже оптимизированные файлы, предложенные PageSpeed Tool.

Шаг третий: Оптимизируйте время ответа сервера

4.jpg

Чтобы уменьшить время ответа сервера, можно переместить все статичные файлы с веб-сайта на CDN.

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

Допустим, главный сервер вашего сайта находится в Техасе, и вы не используете CDN. Пользователю из, например, Амстердама придётся ждать, пока сервер загрузит сайт из Америки. Если вы используете CDN, ваш сайт загрузится с сервера, ближайшего к Амстердаму, что займёт гораздо меньше времени.

Ниже представлена схема функционирования CDN c GTmetrix.

5.png

На CDN можно перенести все изображения, файлы JavaScript и CSS и оставить на главном сервере только файл HTML. Размещение изображений на CDN может существенно повысить скорость загрузки страниц сайта.

Шаг четвёртый: Используйте кеш браузера

кеш.jpg

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

Чтобы использовать кеш браузера, нужно создать файл .htaccess и прописать в нём необходимые директивы, используя модуль expires. Продолжительность хранения данных в кэше может быть установлена по времени, по последнему изменению файла или по времени доступа клиента.

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

6.png

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

Если вы используете WordPress, плагин Autoptimize, который уже упоминался ранее, может вам в этом помочь. Для этого вам всего лишь нужно поменять настройки плагина.

Шаг шестой: Включите сжатие

7.jpg

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

Шаг седьмой: Оптимизируйте мобильную версию

8.jpg

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

Узнать, как ваш веб-сайт выглядит на различных девайсах, можно в Google Chrome. В правом верхнем меню кликните на «Дополнительные инструменты», а затем – «Инструменты разработчика».

Добавить комментарий

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