Измерение и увеличение скорости сайта в GTmetrix, а так же настройка загрузки библиотеки jQuery с Google CDN

Обновлено: 10 марта 2017

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня хочу написать небольшую заметку «на память» по большей части для себя, чтобы потом было проще вспомнить при необходимости. Возможно, что и вам это покажется интересным. Речь пойдет о еще одном сервисе, позволяющем проанализировать скорость загрузки вашего сайта (GTmetrix) и получить рекомендации по ее увеличению.

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

Что хорошего есть в GTmetrix и как его использовать?

Итак, начнем с онлайн сервиса GTmetrix. В отличии, например, от такого сервиса как Pingdom, здесь выдается не только информация о скорости загрузки вебстраницы, числе запросов и скорости загрузки каждого отдельного фрагмента страницы, но и даются рекомендации по улучшению сложившейся ситуации. Для начала на главной странице вы вводите Урл своего сайта (или какой-либо отдельной страницы, скорость загрузки которой хотите проверить) и жмете на кнопку «GO».

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

Также дается оценка сайта и с точки зрения не менее известного инструмента YSlow. Судя по скриншоту, рейтинг скорости моего сайта в Page Speed существенно выше, чем в YSlow. Оценки даются в буржуйской системе, где «A» означает отлично, а «F» — плохо.

У меня, например, оба инструмента говорят, что все из рук вон плохо обстоит с кеширование в браузерах пользователей статических файлов сайта (изображений, стилевых файлов и т.п.). В YSlow это называется «Add Expires headers», а в Page Speed — «Leverage browser caching». Другими словами, мой сервер не говорит браузерам пользователей сколько времени нужно хранить в кеше эти самые статические файлы.

И это действительно так, ибо наиболее популярные способы включения данной опции на веб-сервере под управлением Апач у меня не работают в силу того, что не установлен ни один из модулей (mod_headers или mod_expires), с помощью которых можно было бы это самое дело провернуть. Однако, я приведу пример кода для файла .htaccess (подключившись по ФТП, вы найдете его в корне сайта), который может помочь вам включить кеширование статики в браузере, если онлайн-сервис GTmetrix на это ругается.

Сначала код для модуля mod_headers. Обращаю ваше внимание, что в нем используется проверка <ifModule mod_headers.c> наличия у вашего хостера данного модуля. Если его найдено не будет, то код выполняться не будет и никаких ошибок это не вызовет. Однако, я настоятельно рекомендую предварительно скопировать оригинальный (до внесения расположенного ниже кода) файл .htaccess к себе на комп во избежании эксцессов.

<ifModule mod_headers.c>
    #кэшировать html и htm файлы на один день
    <FilesMatch "\.(html|htm)$">
        Header set Cache-Control "max-age=43200"
    </FilesMatch>
    #кэшировать css, javascript и текстовые файлы на одну неделю
    <FilesMatch "\.(js|css|txt)$">
        Header set Cache-Control "max-age=604800"
    </FilesMatch>
    #кэшировать флэш и изображения на месяц
    <FilesMatch "\.(flv|swf|ico|gif|jpg|jpeg|png)$">
        Header set Cache-Control "max-age=2592000"
    </FilesMatch>
    #отключить кэширование
    <FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi)$">
        Header unset Cache-Control
    </FilesMatch>
</IfModule>

Комментарии (их строки начинаются со знака решетки) потом можете удалить, но они по-любому на работу кода влияния оказывать не будут. Можно будет еще добавить блок кода, рассчитанного на модуль для mod_expires, где опять же используется проверка его наличия на вашем сервере, что гарантирует безопасность использования этого фрагмента кода:

<ifModule mod_expires.c>
    ExpiresActive On
    #по умолчанию кеш в 5 секунд
    ExpiresDefault "access plus 5 seconds"
    #кэшировать флэш и изображения на месяц
    ExpiresByType image/x-icon "access plus 2592000 seconds"
    ExpiresByType image/jpeg "access plus 2592000 seconds"
    ExpiresByType image/png "access plus 2592000 seconds"
    ExpiresByType image/gif "access plus 2592000 seconds"
    ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
    #кэшировать css, javascript и текстовые файлы на одну неделю
    ExpiresByType text/css "access plus 604800 seconds"
    ExpiresByType text/javascript "access plus 604800 seconds"
    ExpiresByType application/javascript "access plus 604800 seconds"
    ExpiresByType application/x-javascript "access plus 604800 seconds"
    #кэшировать html и htm файлы на один день
    ExpiresByType text/html "access plus 43200 seconds"
    #кэшировать xml файлы на десять минут
    ExpiresByType application/xhtml+xml "access plus 600 seconds"
</ifModule>

Комментарии опять же потом можно будет удалить.

Также очень частой проблемой, на которую ругается сервис GTmetrix, бывает отсутствие сжатия файлов на сервере перед их передачей в браузеры пользователей. Используется при этом технология gzip, о который я уже писал. В Page Speed это называется «Enable gzip compression», а в YSlow — «Compress components with gzip».

Для того, чтобы это самое Gzip сжатие включить на хостингах, где используется сервер Апач, достаточно будет добавить в файл .htaccess (он является дистанционным файлом управления сервером) соответствующий фрагмент кода. У Апача есть два модуля для сжатия и какой-нибудь из них будет установлен у вашего хостера (хотя не факт). Наиболее распространен модуль mod_deflate — с него и начнем. Мы опять же добавляем в код проверку наличия этого модуля, чтобы не получить 500 ошибку для всего сайта.

<ifModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript
</ifModule>

Чуть менее популярным модулем является mod_gzip и для него код включения Gzip сжатия для нужных типов файлов будет выглядеть так:

<IfModule mod_gzip.c>
    mod_gzip_on         Yes
    mod_gzip_dechunk    Yes
    mod_gzip_item_include file		\.(html?|txt|css|js|php|pl)$
    mod_gzip_item_include mime		^text\.*
    mod_gzip_item_include mime		^application/x-javascript.*
    mod_gzip_item_exclude mime		^image\.*
    mod_gzip_item_exclude rspheader	^Content-Encoding:.*gzip.*
</IfModule>

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

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

Как настроить подгрузку библиотеки jQuery из сети Google CDN

Ну, и еще скажу про одну вещь, которую мне позволил заметить сервис GTmetrix. Оказалось, что после установки какого-то из очередных плагинов (возможно, что Easy Social Share Buttons, о котором я недавно писал) библиотека jQuery подгружалась целых два раза.

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

WordPress библиотеку jQuery брал из папки движка (http://ktonanovenkogo.ru/wp-includes/js/jquery/jquery.js?ver=1.11.0), что было не совсем оптимальным решением. Поэтому кроме устранения двойной подгрузки этой библиотеки я решил перейти на использование так называемой CDN (сети доставки контента) от Google. В идеале это позволит:

  1. Уменьшить задержки – jQuery будет подгружаться с ближайшего к вам (географически) сервера.
  2. Распараллелить загрузку – браузер сможет качать библиотеку одновременно в несколько потоков с разных серверов сети Google CDN.
  3. Высока вероятность, что данная библиотека уже будет иметься в кеше браузера.
  4. При передачи с Google CDN библиотека сжимается, что позволяет экономить трафик.

На приведенном чуть выше скриншоте как раз и показана подгрузка jQuery с Google CDN (если посмотрите Урл, то увидите в нем слово Google). Как это было сделано? Ну, во-первых, я убрал из кода файла темы оформления строчку с подгрузкой jQuery, ибо она теперь подгружается самим Вордпрессом. Однако, он это осуществляет (как было сказано выше) из папки вашего сайта (http://ktonanovenkogo.ru/wp-includes/js/jquery/), а нам нужна подгрузка из CDN.

Хорошо, что в папке с каждой темой WordPress (/wp-content/themes/название_темы) живет файлик functions.php, в который можно будет добавить вот такой вот фрагмент кода:

if ( !is_admin ()){
wp_deregister_script ('jquery');
wp_register_script ('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"), false, '1.8.3');
wp_enqueue_script ('jquery');
}

Он велит движку подгружать библиотеку не с вашего сервера, а из сети Google CDN. Лично мне нужна была версия jQuery 1.8.3, ибо на более старших не работал код фиксации верхнего меню и плавающего сайдбара (не знаю почему, т.к. в кодинге не сведущ), поэтому я и указал эту версию в Урле http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"". Собственно, все.

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Подборки по теме:

Рубрика: Скорость загрузки сайта

Комментарии и отзывы

Artem

давно вы не писали таких практических статей. очень понравилось. сам искал объяснение как что исправить для загрузки сайта, и тут вы ответили на многие вопросы. Можете ответить, а как узнать подключены необходимые модули или нет? И если нет, то как их можно установить если у меня vps хостинг?

Дмитрий

Artem: я в системном администрировании слаб. Советую обратиться к хостеру с вопросом модулей и их возможной установки. Спасибо.

Роман

Спасибо!

Сергей

Многие хостинги делают обработку статики не через Apache, а через Nginx. В этом случае, боюсь, что описанные манипуляции с htaccess работать не будут.

Лена

У меня при проверке сервисом gtmetrix сжатия сайта вылезли какие-то левые 3 компоненты.

1. Счетчик рамблера (это да, есть на сайте). http://counter.rambler.ru/top100.jcn?2882351

2. Это не знаю что. http://pixel.adsafeprotected.com/jload?anId=116&pubId=SITE_ID&placementId=xMID&campId=SYM

3. И вот эта хрень.

http://adfarm.mediaplex.com/ad/fm/7474-142431-17922-137?mpu_token=AQEDbxeU8nmldAIBAQErAQEBAQE&mpt=ABAjH0jxClCwbjjq77fCOzJbT-tv&mpvc=http://adclick.g.doubleclick.net/aclk%3Fsa%3DL%26ai%3DC1OLRSxXWU6H7Mc2w-QPm8oLABfKX1uQD0vjKzmXAjbcBEAEgAFCAx-HEBGD9mPuAzAOCARdjYS1wdWItNDk2NDY3ODA4NDgyMTk1NcgBCagDAZgEAKoEek_QkwvCnBTv9w0N4E2rWnaRQRXg73RsIeCSkzCvKHbAf6YazNnVpMJLN4oFDv2Vi1T8EXsrfqaDXCD-021eV4yRGHyoqugw9Yph8LWNSYcRr12oiQNrgRzZJQgQlj7YNV3Sl26zLrsY2OyjthGi-yi-3cXJIrFQb5EogAaHupaIg4alp9QBoAYh%26num%3D1%26sig%3DAOD64_2wcZvsPMXFB3hEXpGw_GFozWmHsw%26client%3Dca-pub-4964678084821955%26adurl%3Dhttp://bid.g.doubleclick.net/xbbe/creative/click%253Fd%253DAPEucNVXCt7ZFPF2Gq_3Gsk8OrIoonHy4hcUIOeV3FD0c_JSLsdJpSGVp-375TVmsuwgKHycv_5C1yHHBMLEm2olJ9dZ-_fVg73Nu894_kWmXtvvmozkE-7plY0UL5vzpCiv9_ipxOIE%2526r1%253D&status=0

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

Делала бэкап. И проч. Помогло.

Может знаете, Дмитрий, что такое-то?

Сайт написать?

Лена

И, главное, где это искать?

Miralis

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

Ну и вопрос:

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

Miralis

На вкладке «Timeline»: при загрузке изображений львиную долю времени тратится на blocking. Можно ли какими-либо средствами уменьшить эту составляющую?

Классный блог — много ценной и понятно объясненной информации. Спасибо!

Подписаться не комментируя