У сучасному світі веб розробки швидкість завантаження сайту надзвичайно важлива, тому що кожна секунда може вплинути на втрату продажів, а також на позиції сайту в Google. У листопаді 2018 PageSpeed Insights оновився до невпізнання, змінивши алгоритм пошукових систем, ставши так би мовити копією Google lighthouse. Так, проаналізувавши Ваш сайт в Google PageSpeed Insights на оптимізацію швидкості сайту, ви зрозумієте, що в даний момент спочатку враховуються не правила, як раніше, а швидкість завантаження першого контенту. Якщо оптимізація швидкості роботи сайту важлива для вашого сайту, варто звернути увагу на деякі моменти.
Підключення шрифтів
При підключенні шрифтів використовувати властивість font-display:swap. Воно відкладе на деякий час завантаження ваших красивих і важких шрифтів, використовуючи на цей час стандартний шрифт браузера. Це відразу прибере помилку Google PageSpeed і вплине на оптимізацію швидкості роботи сайту Google.
Зображення, фото та відео
Використовуйте тег picture та сучасні формати зображень, це дуже важливо для оновленого Google PageSpeed. Користуйтеся сервісами стиснення зображень і по можливості використовуйте lazyloading. У відео все трохи загадковіше, існує безліч форматів, але не багато хто знає, що формат — це лише зовнішня оболонка. Усередині відео складається з трьох частин: відео кодек, аудіо кодек та контейнер. Якщо ви використовуєте відео у форматі avi, то це вказує тільки на те, що контейнер у цьому форматі, а всередині можуть бути використані різні кодеки. Так ось h262, AV1, Sequence кодеки, які допоможуть вам стиснути відео на 30% -50%. Після оптимізації контенту за допомогою google developers ви будете спостерігати збільшення показників сайту за швидкістю завантаження.
CSS і JS
Мініфікуйте і стискайте всі CSS і JS файли в обов'язковому порядку. Це можна робити як за допомогою онлайн-сервісів, так і із застосуванням Gulp, Grunt, Webpack. Якщо ви використовуєте останнє, то буде незамінним використання PostCss або розумних плагінів, таких як CSS Nano, який не тільки попрацює над розмірами ваших файлів, а й проведе додаткові оптимізації. Використовуйте critical CSS для вашої сторінки. Суть у тому, ніж підвантажувати одночасно всі стилі, лише ті, які необхідні малювання першої видимої частини сторінки. Для цього існують онлайн генератори типу critical path generator або плагін для Gulp. Що стосується JS файлів, то слід в тег script додавати властивість async, все окрім бібліотеки jquery. Намагатися не використовувати потужні бібліотеки без потреби. Також бажано бібліотеки заливати одним мініфікованим файлом (також використовуючи збирачі згадані вище). Оптимізація швидкості завантаження сайту за допомогою цих дій дасть вам гарну кількість балів і швидший рендеринг сторінки
PHP оптимізація швидкості сайту
Це має на увазі під собою використання кешу. Суть полягає в тому, що файли, які використовує сайт, не довантажуються з сервера, а вже зберігаються на комп'ютері. Щоправда, цей спосіб підходить тільки тим, у кого сервер Apache, якщо раптом із цим є проблеми і PHP оптимізація швидкості сайту вам не підходить, варто подивитися в бік Servise Workers. Servise Workers – це сучасна альтернатива PHP оптимізації швидкості сайту. Цей інструмент є скриптом, який браузер запускає у фоновому режимі окремо від сторінки, що не вимагає взаємодії з користувачем. Єдине це вам потрібно надавати ваш код за протоколом HTTPS - це вимога безпеки. Багато функцій цього інструменту за замовчуванням вбудовані в браузер. Servise Workers прогресивний інструмент для оптимізації швидкості роботи сайту.
Скорочення структури DOM
Також неважливий пункт, особливо якщо ваш сайт на стадії розробки. Технічні помилки сайту теж оцінюються і не варто їх допускати. Слід уникати максимальних вкладень і зайвих елементів на сторінці.
Підіб'ємо підсумки Більшість способів, наведених у статті, не дуже складно впровадити в проєкт. Слід дотримуватися вищезазначених практик для вашого сайту, і більш швидке завантаження сторінок не тільки підвищить зручність використання сайту, а й допоможе стати вище в пошуку Google та інших пошукових системах.
