Как увеличить ваш PageSpeed ​​в WordPress — MagazinSite

//Как увеличить ваш PageSpeed ​​в WordPress — MagazinSite

Как увеличить ваш PageSpeed ​​в WordPress — MagazinSite

С более чем 59% сайтов, использующих WordPress в качестве CMS, оптимизация их для быстрой загрузки — хорошая идея. Участник Dave Davies проводит ключевые шаги и показывает, как оптимизировать сайт WordPress для Google PageSpeed.

Мы много слышим о PageSpeed ​​от Google, и нет сомнений, что это важная метрика как с точки зрения удобства использования, так и с точки зрения SEO. Конечно, в Интернете гораздо больше, чем в WordPress, но теперь она включает более 59,3% веб-сайтов и Google, посвящая инженерную команду работа с WordPress, он заслуживает особого внимания.

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

Для тех, кто незнаком с разницей, PageSpeed ​​- показатель Google. Он основан на семействе инструментов, и когда мы имеем в виду число PageSpeed ​​между 0 и 100, мы ссылаемся на вывод инструмента «Параметры страницы».

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

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

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

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

Стоит отметить, что, когда я пишу это, я не знаю, где мы закончим рассмотрение окончательных чисел. Мы стреляем на 80+, чтобы набрать «хороший» уровень, но это не всегда возможно. Я считаю, что что-то выше 70, чтобы быть разумным, поскольку это дает немного пространства для маневра, чтобы со временем падать и оставаться выше порога 60, где мы попадаем в категорию «Низкий».

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

Вот что мы начинаем с:

Сначала начинаются оценки:

  • Мобильный телефон: 57/100
  • Рабочий стол: 0/100
  • И да, я проверял несколько раз за несколько дней; в отчете по-прежнему отображается оценка 0 для рабочего стола! Нехорошо. Ваша цель — получить как можно больше очков, со счетом 80 в качестве отправной точки для оценки страницы «Хорошо».

    Мы также рассмотрим время загрузки страницы или скорость страницы. Я также включу эти числа под метриками улучшения.

    Важно отметить, что каждый инструмент измеряет по-разному. Я буду основывать свои номера на Dotcom-Tools.com, но GTmetrix.com работает так же хорошо.

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

    Шаг 1: HTTPS

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

    Первый шаг — полностью перевести сайт на HTTPS. В нашем случае настройка сайта просто не была переключена на HTTP в общих настройках.

    В файл .htaccess добавляется следующее:

    ## Запустить кеширование браузера ##

    ExpiresActive On
    ExpiresByType image / jpg «доступ 1 месяц»
    ExpiresByType image / jpeg «доступ 1 месяц»
    ExpiresByType image / gif «доступ 1 месяц»
    ExpiresByType image / png «доступ 1 месяц»
    ExpiresByType text / css «access 1 month»
    ExpiresByType text / html «доступ 1 месяц»
    ExpiresByType application / pdf «доступ 1 месяц»
    ExpiresByType text / x-javascript «доступ 1 месяц»
    ExpiresByType application / x-shockwave-flash «доступ 1 месяц»
    ExpiresByType image / x-icon «доступ 1 год»
    ExpiresDefault «доступ 1 месяц»

    ## Завершить кеширование браузера ##

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

    Вот как добавить код:

    Результат:

  • Мобильный телефон: 62/100
  • Рабочий стол: 72/100
  • Кэширование браузера через плагин обеспечило нам реальную скорость в 5,1 секунды.

    Через общий кэш W3

    Существует несколько кеширующих плагинов, наиболее популярными из которых являются W3 Total Cache и WP Super Cache.

    Я нашел W3 Total Cache, чтобы обеспечить лучшие результаты в более широком наборе задач в большинстве, но не во всех сценариях. Никогда не мешает попробовать обе или другие, чтобы максимизировать ваши результаты.

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

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

    Шаг 4: Сократите время отклика сервера

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

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

    При кэшировании страниц мы по существу создаем статическую копию страницы, а не требуем, чтобы сервер создавал страницу при каждом посещении. Это требует значительной нагрузки с сервера. В случае, когда мы обращаемся к нам, у нас была проблема с ответом на сервер, а Google сообщал о 0,6 секунды времени для ответа, а Dotcom Tools сообщал о первом байтовом времени 573 миллисекунды.

    Я включил кеширование страницы:

    И вдруг мы были у:

  • Мобильный телефон: 70/100
  • Рабочий стол: 74/100
  • Время первого байта упало до 75 мс. Стоит отметить, что в настройках кэша страниц есть параметры настройки этой функции. Вы можете выбрать страницы, которые есть и не кэшируются там, между прочим.

    ВАЖНО: Помните, что вы создаете кешированные страницы, что означает, что они не меняются. При обновлении страницы W3 Total Cache настроен на очистку кэша для этой страницы и ее восстановление. Однако более глобальные изменения, такие как меню, виджеты и т. Д., Могут обновляться без очистки кеша. Если вы внесете изменения и не видите обновление в режиме реального времени, просто нажмите любую кнопку «Очистить кеш» или «Пустой кеш» в области подключаемого модуля, и вы будете установлены.

    Шаг 5: Минимизация

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

    Три основных типа минимизации, которые применяются к сайтам WordPress:

  • HTML. Код самих самих страниц.
  • CSS. Код внутри ваших листов стилей.
  • JavaScript. Код в ваших различных сценариях.
  • ВАЖНО: всякий раз, когда вы минимизируете файлы, особенно скрипты, невероятно важно посещать страницы вашего сайта, которые полагаются на них, чтобы гарантировать, что они будут продолжать функционировать должным образом.

    Первый способ, который вы можете использовать, — загрузить сами файлы из Google:

    Он включает в себя изображения, но интересно, я не считаю, что он выполняет такую ​​же работу, как методы, упомянутые выше. Вы можете скачать мини-версию JavaScript и CSS здесь, но проблема может возникнуть, если вы обновите плагины, которые создали скрипты. Вам нужно будет все это сделать.

    В одних и тех же строках вы можете использовать такие инструменты, как CSSMinifier.com или JavaScript-minifer.com.

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

    Альтернативой является еще один возврат к W3 Total Cache, который включает в себя функцию в общих настройках (хотя вам также нужно войти в дополнительные настройки). Вы найдете их по адресу:

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

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

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

    С помощью этого плагина наши оценки теперь:

  • Мобильный телефон: 70/100
  • Рабочий стол: 75/100
  • Это один из сценариев, когда мы увидели улучшение в PageSpeed ​​без улучшения реальной скорости сайта.

    И это он

    Вы можете найти, поскольку у нас есть проблемы, которые вы не можете исправить. Google не дает нам 100 процентов, и вот почему:

  • Оптимизация изображений. Они такие же маленькие или меньшие, чем сами Google, хотя я использовал инструменты выше. Любое дальнейшее сжатие приводит к ухудшению изображений.
  • Устранить JavaScript и CSS рендеринга в вышеописанном содержимом. Единственной оставшейся проблемой здесь была таблица стилей, в результате чего изображение страницы было довольно плохо в течение примерно секунды, прежде чем стили были применены. Я хотел быть реалистичным в цифрах, которые я давал, и я бы не переместил их на свой сайт, если бы не зациклился на скоростях в категории «Бедные». Всегда ставьте пользователей перед движками.
  • Использовать кеширование браузера. У нас есть кэширование с использованием кэширования, но, к сожалению, это относится только к скриптам, загружаемым с наших сайтов. Мы не можем использовать кеширование браузера для внешних скриптов, например, из Facebook или Google, как и в случае с вами.
  • Наша окончательная скорость реального мира в конце составляет 3,0 секунды и лучше в большинстве Северной Америки, причем самый низкий показатель составляет 2,2. Чтобы ускорить это, нам нужно посмотреть на очистку кода WordPress, выбор более быстрого хоста и / или развертывание CDN.

    Но это еще одна история для другой статьи.

    Мнения, выраженные в этой статье, принадлежат авторам гостевой книги, а не обязательно MagazinSite. Здесь перечислены авторы работ.

    By | 2018-11-14T02:39:50+00:00 Ноябрь 14th, 2018|Categories: Новости|Tags: , , |0 Comments

    Leave A Comment

    ОСТАВЬТЕ ЗАЯВКУ
    Перешедшим от других SEO-компаний приветственная скидка 40%
    Мы Вам перезвоним и подготовим лучшее предложение.
    1. Позвоним
    2. Проведем аналитику
    3. Разработаем прогноз
    4. Презентуем стратегию
    5. Подпишем договор
    6. Запустим проект
    Хотите купить квартиру?
    Обращайтесь и мы Вам поможем
    • Скорость решения вопроса
    • Ваш финансовый интерес
    • Качественное обслуживание
    • Всесторонняя забота о клиенте
    • Работаем на репутацию
    • Поддержка на всех этапах
    * we never share your e-mail with third parties.
    Do you want more traffic?
    Dignissim enim porta aliquam nisi pellentesque. Pulvinar rhoncus magnis turpis sit odio pid pulvinar mattis integer aliquam!
    • Goblinus globalus fantumo tubus dia montes
    • Scelerisque cursus dignissim lopatico vutario
    • Montes vutario lacus quis preambul den lacus
    • Leftomato denitro oculus softam lorum quis
    • Spiratio dodenus christmas gulleria tix digit
    • Dualo fitemus lacus quis preambul pat turtulis
    • Scelerisque cursus dignissim lopatico vutario
    • Montes vutario lacus quis preambul den lacus
    SUBSCRIBE TO OUR NEWSLETTER AND START INCREASING YOUR PROFITS NOW!
    * we never share your e-mail with third parties.
    ОСТАВЬТЕ ЗАЯВКУ
    6 шагов за 31 день для увеличения ваших продаж
    1. Анализируем спрос и предложение
    2. Выделяем тематические сегменты
    3. Создаем группы объявлений
    4. Следим за отдачей от объявления
    5. Корректируем рекламную кампанию
    6. Предоставляем подробные отчеты
    ОСТАВЬТЕ ЗАЯВКУ
    При заказе сайта магазин на Facebook бесплатно!
    И вы получите самый социальный инструмент для продаж.
    1. Проведем аналитику
    2. Подготовим контент
    3. Добавим продукты
    4. Произведем настройку
    5. Синхронизируем магазины
    6. Вам остается наслаждаться




    PGlmcmFtZSB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBzcmM9Imh0dHA6Ly9tYWdhemluc2l0ZS5ydS93cC1jb250ZW50L3VwbG9hZHMvMjAxNy8wOS/QodC+0LfQtNCw0L3QuNC1LdGB0LDQudGC0LAt0LIt0JrQuNGI0LjQvdC10LLQtS3QnNC+0LvQtNC+0LLQsC5tcDQ/YXV0b3BsYXk9MSIgZnJhbWVib3JkZXI9IjAiIGFsbG93ZnVsbHNjcmVlbj48L2lmcmFtZT4=
    ЗАЧЕМ СОЗДАВАТЬ САЙТ
    • Goblinus globalus fantumo tubus dia montes
    • Scelerisque cursus dignissim lopatico vutario
    • Montes vutario lacus quis preambul den lacus
    • Leftomato denitro oculus softam lorum quis
    • Spiratio dodenus christmas gulleria tix digit
    • Dualo fitemus lacus quis preambul pat turtulis
    * we never share your e-mail with third parties.
    Do you want massive traffic?
    Dignissim enim porta aliquam nisi pellentesque. Pulvinar rhoncus magnis turpis sit odio pid pulvinar mattis integer aliquam!