Короткий посібник з Google Page Speed

1. Введення в Google Page Speed
2. Аналіз сайту за допомогою Google Page Speed
3. Оптимізація сайту за допомогою Google Page Speed
4. висновок

Зовсім недавно компанія Google заявила, що найближчим часом швидкість завантаження сторінок стане одним з важливих критеріїв ранжирування сайтів. В даному випадку під швидкістю розуміється не кількість мегабайт в секунду, а широкий набір параметрів конфігурації Веб-сервера і CMS сайту, від яких залежить час віддачі сторінок. Для оцінки і оптимізації кожного з таких параметрів фахівці Google запропонували використовувати інструмент Google Page Speed, якому і присвячена ця стаття.

Введення в Google Page Speed

Google Page Speed - доповнення до Mozilla Firefox (З встановленим додатком Firebug ), За допомогою якого можна визначити параметри продуктивності Веб-сервера і CMS розміщеного на ньому сайту. Оцінка виконується з точки зору оптимальних методів підвищення швидкості віддачі сторінок Веб-сервером (Web Performance Best Practices).

В даному випадку мова йде про такі методи, як:
1. Оптимізація кешування: оптимізація кешування статичних об'єктів сайту (CSS, скриптів на JavaScript і зображень) як браузерами, так і проксі-серверами;
2. Зменшення round-trip times (RTT): скорочення числа DNS-запитів і HTTP-редиректів; об'єднання файлів, що містять скрипти на JavaScript; об'єднання файлів, содержащік CSS; упорядкування файлів, що містять CSS і скрипти на JavaScript, а також вбудованих скриптів на JavaScript; використання чотирьох-п'яти Веб-серверів для забезпечення параллелельной завантаження компонентів сторінок;
3. Зменшення розміру запитів: зменшення розміру cookie's; завантаження статичних об'єктів з доменів, які не використовують cookie's;
4. Зменшення розміру відповідей: використання Gzip-компресії; видалення посилань на невикористовувані CSS; компактне написання коду JavaScript; компактне написання CSS; затримка завантаження коду на JavaScript, який запускається не відразу після завантаження сторінки; оптимізація зображень; використання унікальних URL для всіх компонентів сторінок з метою зниження RTT;
5. Оптимізація рендеринга сторінок браузером: відмова від неефективних CSS-селекторів; відмова від CSS-виразів; переміщення посилань на CSS, а також вбудованих CSS в заголовки документів; визначення розмірів зображень.

Аналіз сайту за допомогою Google Page Speed

Для виконання аналізу параметрів продуктивності сайту необхідно запустити Firefox і перейти за потрібною адресою. Потім слід активізувати Firebug (виконати команду головного меню Інструменти »Firebug» Відкрити Firebug або натиснути клавішу <F12> або клацнути по значку в правій частині рядка стану), перейти на закладку Page Speed ​​і натиснути кнопку Analyze Performance. Після цього почнеться процес тестування, який може тривати від кількох секунд до кількох хвилин, а потім буде виведений звіт:

У цьому фрагменті звіту можна побачити Overall performance summary (загальну оцінку продуктивності), яка в даному випадку має значення - Medium priority, і список, кожен рядок якого містить маркер пріоритету і посилання на опис відповідного методу підвищення продуктивності, а іноді ще й кнопку . Значки, що відображають Overall performance summary і / або є маркерами списку, що містить результати виконання відповідних тестів, мають таке значення:
- High priority - сайти, з Overall performance summary, відображеної даними значком, або параметри, помічені даними маркером, слід оптимізувати в першу чергу, тому що це не зажадає великих зусиль, але забезпечить істотний приріст продуктивності;
- Medium priority - оптимізацію сайтів з Overall performance summary, відображеної даними значком, або параметрів, позначених даними маркером, можна відкласти, тому що вона зажадає пристойних зусиль, але не забезпечить відчутний приріст продуктивності;
- Low priority - сайти з Overall performance summary, відображеної даними значком, або параметри, позначених даними маркером, не потребують оптимізації, або їх можна поліпшити зовсім незначно (ймовірність отримання сайтом такої оцінки мізерно мала);
- Information message - цим маркером позначаються елементи, що не належать до аналізованої сторінці, і / або помилки тестування.
натискання кнопки дозволяє побачити всі пропозиції Google Page Speed, сформовані за результатами виконання відповідного тесту. Так, наприклад, тест Leverage browser caching перевіряє відповіді Веб-сервера на наявність коректних заголовків HTTP Expires (вони задають інтервал часу, протягом якого браузер може використовувати об'єкти, які раніше зберігалися в власному кеші, а не завантажувати свіжі копії цих об'єктів з Веб-сервера ) для всіх статичних об'єктів:

Для виконання більш детального аналізу можна задати Advanced Options: включити Profile Deferrable JavaScript (виявлення коду JavaScript, який запускається не відразу після завантаження сторінки); забезпечити Automatically Run at Onload (автоматичне тестування всіх відвідуваних сторінок) і вибрати необхідний User Agent (тип браузера). Ці опції активізуються в меню, для виведення которго слід клацнути по стрілці, розташованої поруч з назвою закладки Page Speed. Врахуйте, що включення Profile Deferrable JavaScript значно уповільнює роботу браузера, тому не варто використовувати даний тест без гострої необхідності. Також слід зазначити, що в більшості випадків рекомендується використовувати User Agent - Default Value, тому що інші значення можуть викликати різні помилки.
На цьому я закінчую опис процедури тестування сайту за допомогою Google Page Speed. Мені здається, що наведеної інформації вистачить усім, хто займається підтримкою сайту на аматорському рівні. Для Веб-розробників і фахівців служб технічної підтримки Google Page Speed ​​пропонує більш просунуті функції аналізу параметрів продуктивності та моніторингу активності сайтів, проте, їх опис виходить далеко за рамки даної статті і вимагає для розуміння наявність відповідної кваліфікації.

Оптимізація сайту за допомогою Google Page Speed

Google Page Speed, як і будь-який подібний інструмент, не вміє налаштовувати Веб-сервери та CMS сайтів, а всього лише дає рекомендації, які слід використовувати при самостійному налаштуванні або при складанні технічного завдання, а також під час прийняття виконаних робіт в разі залучення сторонніх фахівців. Однак, Google Page Speed ​​може сильно допомогти Вам у питаннях «механічної» (що не використовує будь-які інтелектуальні методи) оптимізації файлів, що містять CSS і скрипти на JavaScript, а також зображень. Оптимізація виконується прозоро в процесі аналізу сайту. Більш компактні копії об'єктів зберігаються в трьох підпапках папки, яка обрана в розділі Save Optimized Files To меню Advanced Options, при цьому CSS-файли зберігаються в папці page-speed-css, скрипти на JavaScript - в папці page-speed-javascript, зображення - в папці page-speed-images, а рекомендації щодо оптимізації виводяться в розділи Minify CSS, Minify JavaScript і Optimize images звіту про результати тестування. Всі пропозиції Google Page Speed, сформовані за результатами виконання кожного з цих тестів, можна побачити, натиснувши кнопку в потрібному рядку. Наприклад, результат виконання тесту Minify CSS для головної сторінки даного сайту до оптимізації виглядав наступним чином:

У цьому фрагменті звіту видно, що сторінка використовує 8 CSS-файлів, що мають загальний розмір 31,3 кілобайт, який може бути скорочений на 10,6 кілобайт (або на 33,8%). Нижче слідує список, кожен рядок якого містить посилання на один з восьми вихідних CSS-файлів, отримане зменшення розміру в кілобайтах (відсотках) і посилання на оптимізований файл. Після того, як я зробив резервні копії і оновив CSS-файли, звіт змінився на краще, кнопка пропала, маркер пріоритету в рядку Minify CSS змінився з на :

Аналогічна процедура для скриптів на JavaScript і зображень ні чим не відрізняється від описаної. Не забувайте, що після виконання оновлень CMS і / або тим і / або плагінів може знадобитися повторне виконання описаних дій.

висновок

Я вважаю Google Page Speed ​​дуже корисним інструментом і рекомендую всім, хто займається технічною підтримкою сайтів, звернути на нього пильну увагу. Google Page Speed ​​в будь-який момент абсолютно безкоштовно надасть Вам детальний звіт і список рекомендацій щодо поліпшення параметрів продуктивності сайту. На мій погляд, не можна недооцінювати важливість подібної інформації.

Поділіться посиланням в соціальній мережі або блозі: