2.17.2.3. Оптимізація сайту

Збільшити продуктивність і швидкість роботи сайту можна різними способами:

1. Оптимізація сайту:
   • Оптимізація роботи сайту (скриптів, запитів до бази даних, сторінок тощо).
   • Використання можливостей хостингу для оптимізації роботи сайту.
2. Оптимізація роботи ПЗ сервера (для VPS і виділених серверів).
3. Збільшення доступних ресурсів:
   • Зміна тарифу бізнес-хостингу на більш високий.
   • Збільшення потужності VPS сервера або зміна тарифу на більш високий (для VPS і виділених серверів).

Оптимізація сайту не випадково винесена на перше місце, тому що є більш пріоритетною, ніж інші способи. Якщо взяти два абсолютно однакових сервери з однаково налаштованим ПЗ і розмістити на одному сайт, на якому використовується неоптимізована тема оформлення, плюс 2-3 десятки ніким не перевірених щодо навантаження і взаємодії плагінів, а на іншому той же сайт, але використовує кешування готових сторінок, з критично необхідним мінімумом максимально оптимізованих між собою плагінів і модулів, то виявиться, що другий сервер навіть без виконання інших пунктів може працювати в 2-4 рази швидше (в деяких випадках все набагато драматичніше і після грамотної оптимізації сайту швидкість може збільшуватися в десятки разів) і створювати менше навантаження, ніж перший.

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

Основні напрямки оптимізації, які стосуються більшості популярних CMS:

1. Відмова від плагінів і додаткових модулів. Різноманітні плагіни, модулі та розширення, які, здавалося б, розширюють функціональність сайту, в дуже багатьох випадках є його ворогами в плані продуктивності. Причин для цього безліч. Основна — багато модулів написані ентузіастами і мають дуже низьку якість як у плані споживаних ресурсів, так і в плані безконфліктності з іншими модулями та CMS. Тому перед встановленням будь-якого модуля або плагіна подумайте, чи не можна реалізувати той самий функціонал без нього? Якщо не можна — після встановлення детально протестуйте його під навантаженням, оцініть споживання ресурсів, почитайте відгуки інших користувачів.
2. Відмова від крадених і неякісних тем оформлення та плагінів. Як не дивно, це теж важливий момент, оскільки в 8 випадках з 10 зламаний продукт, всупереч запевненням хакерів, залишається не тільки небезпечним в плані можливих «закладок» і бекдорів, але і набагато більш проблемним в плані споживання ресурсів. «Самописні» ж компоненти і теми в переважній більшості випадків дуже неякісні, по можливості уникайте їх. Якщо важливе низьке споживання ресурсів, не використовуйте «універсальні» теми. За рахунок використання різних додаткових фреймворків такі «комбайни» працюють повільніше, а ресурсів споживають більше.
3. Кешування сторінок скриптами. Такий спосіб дозволяє генерувати сторінки сайту заздалегідь і зберігати їх у статичні файли, які будуть передаватися в рази швидше. Варто використовувати збереження сторінок скриптами сайту у файли скрізь, де це можливо. Віддача заздалегідь сформованої сторінки сайту витрачає набагато менше ресурсів і часу, ніж формування її для кожного нового відвідувача «з нуля». Цей спосіб є одним з найбільш ефективних за рахунок використання статичних сторінок.
4. Оптимізація бази даних та запитів до неї. При використанні більшості CMS одним з найбільш важливих моментів є оптимізація роботи бази даних і запитів до неї, так як вона використовується для зберігання практично всіх даних, необхідних для коректної роботи сайту і генерації сторінок. Багато сайтів можуть працювати повільно тільки через проблеми зі зберіганням даних у базі даних і неоптимізовані запити до неї. Саме тому може зростати показник TTFB і збільшуватися час на обробку запитів.
5. Звернення до сторонніх джерел. Істотною проблемою в швидкості завантаження сторінок або їх генерації може бути завантаження даних з інших серверів. Причин проблем в завантаженні ресурсів може бути величезна маса, але найбільш частими і вирішуваними на стороні сайту є:
   • Віддаленість сервера, до якого виконуються запити. Чим далі розташований цільовий сервер, тим більше часу займає обмін даними з ним. Це виражається в повільному генеруванні сторінок скриптами через те, що вони очікують відповідь від віддаленого сервера і, як наслідок, в повільному завантаженні сторінок в браузері, досить часто — зависанні на деяких етапах «відтворення» сторінки (це явно виражено при послідовному повільному завантаженні частин сторінки — спочатку шапки, потім, після деякого очікування, підвантаження решти контенту).
   • Недоступність цільового сервера. Якщо сервер, з яким повинен виконуватися обмін даними, недоступний, то може виникнути величезна проблема зі швидкістю завантаження та генерації сторінок. Якщо проблема виникає на стороні бекенду, то сторінка може бути тривалий час порожньою і тільки коли процес з'єднання буде скинутий — сторінка може відобразитися (найчастіше це обрив з'єднання, що в рамках віртуального і бізнес-хостингу відбудеться через 3600 секунд від початку з'єднання), при цьому буде здаватися, що сайт не працює.
   • Для вирішення подібних проблем рекомендуємо:
     • Використовувати CDN-сервіси для необхідних ресурсів, якщо є така можливість.
     • Мінімізувати віддалене зберігання ресурсів. Це можна зробити шляхом зберігання необхідних ресурсів у каталозі сайту, тим самим підвищивши стабільність і швидкість сайту.
     • Використовувати асинхронне завантаження ресурсів (за допомогою async або defer), які не беруть участі в генерації контенту або є малозначущими. Наприклад, лічильники, реклама тощо.
     • Мінімізувати звернення до сторонніх ресурсів з боку бекенду і, по можливості, встановлювати певний тайм-аут для функцій, які виконують підключення (наприклад, використовуючи stream-set-timeout, у curl опція CURLOPT_CONNECTTIMEOUT, та ін.).
6. Зменшення кількості запитів до сервера. При завантаженні сайту, в разі великої кількості підвантажуваних файлів, можуть виникати проблеми зі швидкістю його завантаження або ж взагалі у вигляді помилок. На хостингу існують певні обмеження на кількість одночасних з'єднань, у зв'язку з чим можуть з'являтися помилки. Але навіть якщо таких немає, то безліч запитів буде впливати на швидкість завантаження сайту. Кожен файл створює окреме підключення до сервера, процес ініціювання підключення і всіх інших етапів для коректної передачі даних також займає певний час, що і створює затримки в швидкості завантаження сайту. Якщо порівнювати два ідентичних сайти, але в одному 150 завантажуваних файлів, а в другому ті ж дані, але вже в 50 файлах, то можна помітити значне збільшення швидкості його відображення. Для вирішення цієї проблеми рекомендуємо:
   • Зменшити кількість завантажуваних файлів на сайті шляхом відмови від непотрібних елементів або шляхом їх завантаження після певних подій (наприклад, прокрутка сторінки, активація кнопок тощо).
   • Об'єднати можливі файли в один або декілька. Якщо використовувати декілька CSS-файлів, то в деяких випадках їх можна об'єднати в один для економії кількості запитів і поліпшення стиснення. Автоматично такі дії можуть виконувати деякі плагіни або компоненти, а також функціонал Pagespeed. Але вкрай важливо переконатися, що при використанні таких засобів оптимізації сайт працює коректно.
   • Не варто використовувати асинхронне завантаження ресурсів повсюдно, оскільки якщо на сайті, де завантажується 50 ресурсів, для всіх файлів буде встановлено асинхронне завантаження, то це породить 50 одночасних підключень при одному зверненні до сайту, що може створити не тільки складності у вигляді помилок з боку сервера через обмеження по одночасних з'єднаннях, але також і на стороні клієнта, який відкрив сайт, так як всі одночасні запити також створюють досить високе навантаження на стороні браузера.
7. Оптимізація ресурсів сайту. При завантаженні сайту можуть виникати проблеми, що сама верстка завантажується досить швидко, але елементи сайту завантажуються дуже довго, все зависає тощо. Найчастіше така проблема спостерігається при неправильному завантаженні великих ресурсів сайту. Наприклад, зображення, що мають дуже високу роздільну здатність, завантажуються для мобільної версії відразу у високій роздільній здатності, або завантаження безлічі JS-скриптів з величезною кількістю даних. Існують різні технології, що дозволяють прискорити завантаження даних, наприклад деякі з них:
   • Lazyload (ледаче завантаження) — суть технології полягає в тому, що при відкритті сторінки завантажуються не всі зображення, а тільки ті, які потрапляють в область видимості. Решта зображень завантажуються браузером динамічно в міру прокрутки сторінки.
   • Оптимізація розміру зображень. За рахунок ефективного стиснення зображень можна досягти істотного приросту швидкості завантаження сторінок.
   • Використання зображень у форматі WebP. Такий формат набув популярності завдяки меншій «вазі» порівняно з іншими форматами без втрати якості зображення.
   • Відкладене завантаження скриптів. Здебільшого деякі скрипти сайту не потрібні до його генерації, тому їх першочергове завантаження втрачає сенс. Щоб сайт виглядав надзвичайно швидким, спочатку повинна завантажуватися візуальна складова сайту, а вже потім весь динамічний контент. За рахунок такої зміни порядку завантаження можна досягти візуального прискорення завантаження сайту.
8. І ще один дуже ефективний, але трудомісткий і не завжди можливий шлях — відмова від скриптів скрізь, де це можливо. Найшвидший сайт — це сайт, який складається з набору статичних файлів. Один із варіантів такої реалізації — використання систем керування контентом (CMS), які генерують набір HTML-файлів (зрозуміло, сама адміністративна частина CMS при цьому цілком може складатися зі скриптів). Прикладом такої CMS може бути Movable Type.

На хостингу є ряд налаштувань, які можуть допомогти в оптимізації роботи сайту, але їх не варто сприймати як універсальний засіб на всі випадки життя, оскільки та чи інша технологія може не принести очікуваної ефективності. Більша частина рекомендацій налаштувань на хостингу заточена на використання кешування даних і сторінок для подальшої передачі клієнту без повторної обробки запиту скриптами і генерації сторінок заново. Принцип кешування даних дозволяє зменшити обсяг даних, що передаються між скриптами або серверами, зменшувати кількість оброблюваних сценаріїв тощо, тим самим прискорюючи генерацію відповіді. Такий спосіб корисний для усунення проблеми з високим TTFB. Важливо враховувати, що не для всіх CMS є можливість налаштувати всі зазначені способи оптимізації.

1. OPcache. Використання OPcache економить час за рахунок збереження скомпільованого байт-коду скриптів. Такий спосіб корисний при використанні безлічі незмінних скриптів, компіляція яких може займати багато часу. OPcache підключається до сайту без необхідності внесення змін в скрипти сайту.
2. Memcache(d). Використання Memcache(d) у різних системах організовано по-різному — в одних він використовується виключно для збереження даних, які передаються з баз даних (що дозволяє заощадити на часі передачі запиту в БД, пошуку потрібних даних і передачі запиту назад), в інших він використовується для кешування конкретних сторінок сайту (що більш ефективно в плані швидкості, але менш зручно в плані генерації динамічного контенту). Варто звернути увагу, що поведінка кешування даних в пам'яті Memcache(d) визначається безпосередньо скриптами сайту.
3. Redis. Схожий на Memcahce(d) за рахунок того, що вони обидва зберігають дані в оперативній пам'яті і після дозволяють використовувати її для більш швидкого доступу. Логіка поведінки збереження даних та іншого також схожа.
4. PageSpeed. Модуль оптимізації PageSpeed встановлений на хостингу за замовчуванням і всі його можливості доступні для будь-якого сайту. Певною мірою більшість його налаштувань можуть бути небезпечними для роботи сайту через те, що змінюються імена завантажуваних скриптів, принцип їх завантаження тощо, залежно від увімкнених параметрів. Але як один із способів оптимізації його можна розглядати для прискорення завантаження вмісту. Важливо розуміти, що для зменшення TTFB (часу відповіді від сервера) даний спосіб не підходить, оскільки він спрямований на поліпшення генерації сторінок в браузері клієнта і завантаження ресурсів сайту.
5. Кешування статичного вмісту. Прискорення завантаження веб-сторінок шляхом кешування сторінок і підключених до них ресурсів у браузері відвідувача сайту. Оскільки таке кешування здійснюється не на стороні сервера, а на стороні клієнта, то швидкість першого завантаження сайту залишиться колишньою, але наступні переходи по сторінках або входи на сайт можуть виконуватися набагато швидше або зовсім не помітні, якщо сайт і кешування організовані правильно.