Є один спосіб одразу отримати і вищі позиції в Google, і більше відвідувачів, і покращення конверсії. Цей спосіб — підвищення швидкості сайту. Сьогодні ми обговоримо, як досягти цього на сайті Drupal 8.
Drupal здатен керувати навіть сайтами з величезною кількістю контенту — і залишатися легким! 8-а версія має багато можливостей у цій сфері, деякі з яких стали її новинками (наприклад, модуль BigPipe) і здобули повагу багатьох розробників. Тож запрошуємо на наш невеличкий тур з підвищення швидкості в Drupal 8.
Якою має бути швидкість завантаження сайту в 2020 році?
Класичною рекомендацією залишається не перевишувати швидкість у 3 секунди. Однак, для конверсій важлива кожна мілісекунда, тож потрібно прагнути більшого. Наприклад, за даними Amazon, кожні 0.1 секунди втрати у швидкості спричиняє 1% втрат у продажах.
Оскільки швидкість сайту є офіційним фактором ранжування від Google, варто звернути увагу на оцінки та рекомендації Google-інструментів у цій сфері. Одним із таких є Google PageSpeed Insights. Він може дати швидкості вашого сайту одну з цих трьох оцінок (ну і, звісно, ви захочете, щоб це було 90+):
- швидкий сайт (90 і вище)
- середня швидкість (від 50 до 90)
- низька швидкість (до 50)
Чудові способи підвищення швидкості в Drupal 8
Наступні поради підходять до підвищення швидкості з різних точок зору і разом створюють ідеальну картину. Їхній вибір може залежати від конкретного сайту, тож подумайте про можливість аудиту швидкодії вашого сайту на Dupal 8 від наших експертів. Втім, далі наводимо декілька розповсюджених і популярних порад.
Кешування в Drupal 8
Кешування — відома техніка з підвищення швидкості сайтів. Вона дозволяє зберігати копії веб-сторінок, щоб швидко доставляти їх до браузерів і уникати зайвого перевантаження серверу. Головна хороша новина — це те, що ядро D8 має потужні вбудовані інструменти для кешування:
Internal Page Cache
Модуль ядра Internal Page Cache підвищує швидкодію сайту для анонімних користувачів, доставляючи їм веб-сторінки дуже швидко. Він не працює з динамічним контентом для анонімних користувачів (наприклад, з кошиками інтернет-магазину).
Internal Dynamic Page Cache
Модуль ядра Internal Dynamic Page Cache забезпечує кешування для підвищення швидкості сайту як для анонімних, так і для авторизованих користувачів. Він кешує веб-сторінки за винятком їхніх персоналізованих частин і перетворює останні на плейсхолдери.
BigPipe
Модуль ядра BigPipe був спочатку створений для Facebook для підвищення швидкодії при роботі з динамічними сторінками. Він завантажує спочатку неперсоналізовані елементи, а потім — динамічні, щоб користувачі могли швидко почати взаємодіяти з сайтом. Засновник Drupal’а, Dries Buytaert, продемонстрував можливості BigPipe у підвищенні швидкості.
Метадані з кешування
Метадані з кешування в D8 дозволяють гнучкий підхід до кешування. Усе, що може рендеритись (або використовуватись для визначення того, як щось рендерити), може забезпечувати такі метадані. У метаданих з кешування є 3 властивості:
- теги кешування (cache tags) дозволяюють оновити кеш, коли щось змінюється (на основі даних сутностей або конфігураційних значень)
- контексти кешування (cache contexts) дозволяють показувати різний контент залежно від контексту (ролей і дозволів користувачів, URL-ів і так далі)
- максимальний час кешування (cache max-age) дозволяє визначити, як довго щось має кешуватись, тож це ідеальний варіант для сценаріїв, в яких визначальним є час
Кешування в Drupal 8 Views
Тонке налаштування кешування доступне і в деяких модулях, що відповідають за відображення контенту (наприклад, в модулі ядра Views, в контрібному модулі Panels і так далі). Зокрема, Views дозволяє налаштування кешування на основі тегів та на основі часу в розділі "Advanced".
Агрегація CSS/JS у Drupal 8
Корисним способом підвищення швидкості в Drupal 8 є агрегація файлів CSS і JavaScript. Це скорочує кількість HTTP-запитів, необхідних для завантаження сторінки, а також кількість даних, що передається. «З коробки» D8 пропонує 2 пункти, увімкнені за замовчуванням: /admin/config/development/performance.
Також є контрібні модулі на кшталт AdvAgg (Advanced CSS/JS Aggregation). Він іде в комплекті з рядом підмодулів, таких як Advanced Aggregates, Advanced Aggregates CDN, Advanced Aggregates CSS/JS Validator, Advanced Aggregates External Minifier, Advanced Aggregates Minify CSS і багатьох інших. Вони підходять для будь-яких цілей та сценаріїв підвищення швидкості сайту.
Техніка попереднього завантаження
Щоб пришвидшити завантаження сторінок, на які користувач може захотіти перейти, техніка попереднього завантаження дозволяє виявляти лінки в його активному вікні. Відповідні сторінки починають зберігатися в кеш, щойно браузер перейде в неактивний стан. Все це робить відносно новий, але вже популярний модуль — Quicklink.
Зовніші системи кешування
Додайте сайту ще більше швидкості, використовуючи зовнішню систему кешування — Redis, Varnish, Memcached і так далі. Drupal 8 пропонує контрібні модулі, які подбають про легку інтеграцію. Приклади включають в себе Redis, Memcache, Varnish та інші модулі.
Використання CDN для підвищення швидкості
Відома хостинг-технологія CDN (content delivery network) дозволяє швидко доставляти контент користувачам завдяки географічній розподіленості мережі. Один з найпопулярніших модулів для Drupal 8, що може допомогти з інтеграцією CDN, — це модуль під назвою CDN. Він змінює URL-и файлів сайту, щоб вони завантажувались з CDN замість вашого сервера.
Респонсивні стилі зображень в Drupal 8
Оптимізація зображень — абсолютно необхідний крок для всіх, хто хоче досягти підвищення швидкості. Drupal має вбудовану систему стилів зображень, які форматують картинки (обрізають, масштабують і так далі) під будь-який режим показу. Більше того, D8 дозволяє створювати респонсивні зображення, що виглядатимуть оптимально на будь-якому пристрої. На додачу до підвищення юзабіліті, ця техніка також покращує швидкодію, оскільки немає потреби завантажувати великі зображення на мобільних пристроях.
Модулі ядра Responsive Image і Breakpoint дають можливість визначати брейкпойнти YAML-файлі теми або певного модуля. Згідно з ними, відповідні версії зображень будуть показуватись на пристроях з відповідним розширенням. Читайте детальніший гайд про респонсивний веб-дизайн в Drupal 8.
«Ліниве завантаження» як спосіб підвищення швидкості в Drupal 8
Використання техніки «лінивого завантаження» (lazy loading) для зображень, відео та інших медіа є дуже популярним. Його мета — заощадження ресурсів та підвищення швидкодії. Воно дозволяє вантажити лише ті мультимедіа, що знаходяться в активному екрані користувача.
В D8 ця техніка застосовується за допомогою контрібних модулів, серед яких одними з найпопулярніших є Lazy-load і Image Lazyloader.
Використання найновішої версії PHP для підвищення швидкості
Оскільки PHP покращується в кожній новій версії, тож має сенс регулярно оновлювати його на вашому сервері. Це зробить код чистішим та ефективнішим, тож є чудовим способом підвищення швидкодії. Поточна версія PHP, що зараз підтримується в D8, — це PHP 7.3. Наші експерти з Drupal-підтримки завжди раді допомогти вам із цим питанням.
Видалення непотрібних модулів
Як це було в усі часи, видалення зайвих модулів або підбір заміни для «важких» модулів іншими призводить до підвищення швидкості. В D8 це стало набагато легше робити завдяки тому, що багато корисних модулів (або їхні можливості) було включено до ядра.
Наприклад, творці Drupal'а прагнуть зробити модуль ядра Layout Builder єдиним модулем, що буде необхідний для побудови сторінок, заміняючи собою популярні контрібні модулі на кшталт Panels, Panelizer, Display Suite і так далі. Нова система роботи з Media також позбавляє необхідності використовувати деякі контрібні модулі. І таких прикладів багато.
Враховуючи це, з метою підвищення швидкодії варто оновити сайт дл останньої версії D8, проаналізувати його можливості, зробити аудит модулів, що більше не потрібні, і налаштувати нові модулі під ваші потреби. Ви можете довірити це нашій команді з Drupal-розробки.
Інтеграція з JavaScript-фреймворками
JavaScript-фреймворки (React, Vue, Angular, Gatsby, і багато інших) відомі своєю винятковою швидкодією. Вони також допомагають створювати інтерактивні інтерфейси, які користувачі обожнюють.
На сьогодні важливим трендом є інтегрувати їх у D8-сайти. Грубо кажучи, для цього є два основні способи:
- архітектура "headless" або "decoupled", в якій Drupal служить джерелом даних, надсилаючи їх за допомогою API до фронтенд-додатку на React'і (або іншому JS-фреймворку)
- створення окремих інтерактивних компонентів і вбудовування їх у конкретні сторінки сайту, якими оперує Drupal.
Є численні бібліотеки, стартові пакети і плагіни у цій сфері від розробників JavaScript-фреймворків.
Однак, ще кращою новиною є те, що D8 базується на принципі API-first і має неймовірні можливості з інтеграції. Модуля ядра, такі як HAL, HTTP Basic Authentication, JSON:API, RESTful Web Services, and Serialization, роблять усе для якісного обміну даними в потрібному форматі. Також є чудові контрібні модулі, наприклад:
- REST UI, що забезпечує користувацький інтерфейс для керування REST-ресурсами
- GraphQL, що дозволяє керування запитами за допомогою мови запитів GraphQL
- Subrequests, що групує запити разом з метою зменшення їх кількості
- RELAXed Web Services, що створює загальний RESTful API для всіх нод і розширює можливості вбудованого REST
Наші експерти допоможуть вам у підвищення швидкості сайту
Ми розглянули основні способи підвищення швидкості в Drupal 8. Є багато інших інструментів і кроків, що можна зробити на основі аудиту вашого сайту. Попросіть наших спеціалістів з Drupal-підтримки додати вашому сайту швидкодії — і ваш бізнес обов'язково помітить ефект від цього!