2.17.2.1. Налаштування оптимізації сайту (PageSpeed)

Увага!

  • Використання на сайті плагінів, які виконують ті ж дії, що і фільтри PageSpeed, може призводити до помилок у роботі сайту. Рекомендуємо використовувати щось одне — або плагіни, або PageSpeed.
  • Не рекомендується вмикати PageSpeed при використанні OpenLiteSpeed (див. офіційну документацію OLS).

У налаштуваннях оптимізації сайту використовуються фільтри модуля Google PageSpeed. Він встановлений на хостингу за замовчуванням і призначений для прискорення відображення сторінки в браузері. Документація доступна на офіційному сайті.

Опис

Швидкість роботи сайту — один з найважливіших факторів, на який звертають увагу сучасні відвідувачі. Затримки у відображенні сайту викликають роздратування, негативно впливають на ранжування в пошукових системах і знижують доходи комерційних сайтів. З точки зору відвідувача на швидкість роботи сайту впливають два основні параметри: швидкість формування сторінки на сервері і швидкість відображення сторінки браузером. Для прискорення формування сторінок на серверах ми використовуємо сучасне обладнання і тонке налаштування програмного забезпечення. Також нашим клієнтам доступні інструменти, що дозволяють прискорити ще й швидкість відображення сторінки в браузері відвідувача, всього лише внісши зміни в налаштування свого сайту.

Причини проблеми

Більшу частину часу при відображенні сторінки браузером займає завантаження її додаткових елементів — зображень, JavaScript і CSS. Практично всі теми оформлення популярних CMS використовують JavaScript-фреймворки з десятком плагінів і безліччю CSS-стилів. Загальний обсяг даних, що завантажуються відвідувачем, при цьому нерідко перевищує 500 КБ, а кількість запитів до сервера для відображення однієї сторінки становить кілька десятків. Це негативно позначається на швидкості завантаження сторінки у відвідувача.

Способи вирішення

Існує кілька методик, за допомогою яких можна підвищити швидкість відображення сайту в браузері клієнта:

  • Зменшити обсяг переданих даних.
  • Зменшити кількість запитів до сервера.
  • Налаштувати кешування статичних файлів у браузері.
  • Оптимізувати рендеринг сторінки.

Зменшити кількість запитів до сервера, обсяг переданих даних і ефективність їх стиснення можна шляхом об'єднання декількох файлів в один і видалення зайвих коментарів і пробілів. У разі, якщо на сайті багато графіки в нижній частині сторінок (яку видно тільки при прокручуванні), корисним може виявитися відкладене завантаження зображень. Для прискорення рендеринга сторінки необхідно налаштувати правильний порядок підключення CSS- і JavaScript-файлів, і, можливо, перенести дрібні CSS в HTML-код. Якщо на сторінках активно використовуються елементи з інших сайтів (лічильники відвідуваності, віджети соцмереж, чати онлайн-допомоги), попереднє резолвінг DNS-імен цих ресурсів може підвищити швидкість їх завантаження в сучасних браузерах. Виконати такого роду оптимізації можна за допомогою налаштувань PageSpeed. Всі оптимізації виконуються «на льоту», без необхідності внесення змін в код сайту.

Оптимізація та HTTPS

Модуль PageSpeed працює і за протоколом HTTPS. Коли для сайту налаштований редирект з HTTP на HTTPS (або навпаки) за допомогою .htaccess, можуть виникати проблеми з обробкою контенту модулем PageSpeed по HTTPS. Щоб виправити ситуацію, необхідно видалити директиви редиректу з .htaccess і замість них увімкнути потрібний редирект у налаштуваннях сайту (див. Налаштування редиректу на HTTP/HTTPS).

Кешування статики

Кешування дозволяє браузеру зберегти копію статичного файлу на комп'ютері відвідувача і не звертатися за ним на сервер при повторному відвідуванні. Однак це створює незручності розробникам, оскільки зміни в цих файлах відвідувачі будуть бачити із затримкою на час кешування. Щоб уникнути цієї проблеми, в PageSpeed присутні параметри розширеного кешування зображень, стилів і скриптів. У разі їх використання в URL статичних файлів додається хеш їх вмісту, який змінюється при редагуванні файлу. Таким чином досягається тривале кешування з можливістю вільно вносити зміни.

Налаштування

Важливі моменти:

  • Не існує універсального набору налаштувань, який підходить всім сайтам без винятку. Опції потрібно підбирати індивідуально під конкретний сайт. Для деяких сайтів вони можуть бути зовсім не потрібні, якщо програмісти реалізували відповідний функціонал в движку, для інших може знадобитися тільки частина параметрів.
  • Визначити відповідні для сайту налаштування можна експериментально, по черзі вмикаючи їх і перевіряючи на кожному етапі роботу сайту. Деякі з налаштувань можуть порушувати нормальну роботу сайту. Наприклад, після увімкнення мініфікації або об'єднання JavaScript на сайті можуть перестати працювати інтерактивні елементи (не будуть натискатися будь-які кнопки). Це означає, що з даним сайтом налаштування несумісне. У цьому випадку його слід вимкнути і очистити кеш PageSpeed.
  • Ефективність налаштувань безпосередньо залежить від того, як розробники сайту підійшли до його оптимізації. Для від початку добре оптимізованого сайту налаштування можуть виявитися зайвими.
  • Деякі фільтри PageSpeed можуть створювати додаткове навантаження на сервер. За рахунок генерації оптимізованих файлів модуль створює безліч запитів до сервера. Здебільшого запити спрямовані на статичний вміст, і їх обробка не повинна викликати навантаження на сервер і проблеми, але в деяких випадках запити можуть направлятися на контент, що генерується скриптами PHP, і тим самим створювати велике навантаження (такий сценарій зустрічається вкрай рідко, але має місце бути).
  • Фільтри оптимізації PageSpeed не змінюють файли на сервері, тому після їх вимкнення сайт повернеться до попереднього стану.
  • Модуль PageSpeed має деякі нюанси роботи. Ознайомитися з ними можна в документації на офіційному сайті.
  • Деякі модулі об'єднання мають граничне значення MaxBytes, при якому файли не будуть об'єднуватися понад цей розмір. На хостингу значення MaxBytes дорівнює 1 КБ.
  1. Відкрийте розділ «Налаштування сайту».
  2. На вкладці «Налаштування оптимізації сайту» увімкніть або вимкніть потрібні опції та збережіть зміни:
  3. Зачекайте 15-30 хвилин, поки зміни набудуть чинності.

Додаткові атрибути зі значенням URL

За замовчуванням фільтри PageSpeed, які обробляють URL, враховують атрибути зі специфікацій HTML4 і HTML5, а також деякі поширені розширення, перераховані в документації PageSpeed. Якщо на сайті для URL використовуються нестандартні атрибути (наприклад, посилання на зображення в <li data-thumb="URL">), потрібно явно вказати PageSpeed про необхідність їх обробки.

Атрибути додаються в поле «Додаткові атрибути зі значенням URL» (після додавання обов'язково збережіть зміни):

Винятки

Правила вказання винятків:

  • URL потрібно вказувати без імені самого сайту, наприклад */jquery.js або */static*.
  • Каталоги потрібно обрамляти двома символами *, наприклад */content*.
  • Кожен виняток вказується з нового рядка.
  • Довжина одного винятку не повинна перевищувати 100 символів.
  • Доступні символи: a-z 0-9 - . _ / *.
  1. Відкрийте розділ «Налаштування сайту».
  2. На вкладці «Налаштування оптимізації сайту» у полі «Винятки з PageSpeed» введіть URL-адреси, які необхідно виключити, і збережіть зміни:
  3. Зачекайте 15-30 хвилин, поки зміни набудуть чинності.

Очищення кешу

Увага!

  • Для очищення кешу PageSpeed на сайт надсилається спеціальний запит. Якщо під час очищення кешу виникає помилка, перевірте у логу доступу коди відповідей сервера для запитів з юзер-агентом pagespeed cache cleaner. Наприклад, роботі таких запитів у ряді випадків можуть заважати директиви редиректів з файлу .htaccess. У такій ситуації рішенням може бути тимчасове перейменування цього файлу на час очищення кешу.
  • Кнопка очищення кешу відображається тільки при увімкнених налаштуваннях оптимізації. Якщо оптимізація або всі її опції вимкнені, кнопка не відображатиметься.
  1. Відкрийте розділ «Налаштування сайту».
  2. На вкладці «Налаштування оптимізації сайту» внизу сторінки натисніть «Очистити кеш»:

Вимкнення

  1. Відкрийте розділ «Налаштування сайту».
  2. На вкладці «Налаштування оптимізації сайту» вимкніть усі опції або увімкніть опцію «Вимкнути оптимізацію сайту» і збережіть зміни:
  3. Зачекайте 15-30 хвилин, поки зміни набудуть чинності.
Зміст
    (1)