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

17 Июль, 2014

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

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

Что хорошего есть в 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. Можно ли какими-либо средствами уменьшить эту составляющую?

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

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