- Хостинг і клієнтська оптимізація
- Оптимізація веб-шрифтів
- оптимізація зображень
- кешуючий заголовки
- стиснення інформації
- Теорія: навіщо
- можливі ефекти
- Недоліки застосування CDN
- закріплюємо результат
- підтримка прискорення
- Моніторинг швидкості у користувачів
- висновок
- Відгуки про хостинг:
Клієнтська оптимізація, на відміну від звичайної серверної, спрямована на все, що відбувається в веб-браузері користувача.
У зв'язку з цим ускладнюється контроль (різні браузери і пристрої) і виникає безліч різних напрямків оптимізації. Ми подивимося на найбільш ефективні і універсальні способи, які можна використовувати майже в будь-якому проекті.
Хостинг і клієнтська оптимізація
Оптимізація критичного шляху: JS, CSS
Критичний шлях рендеринга - це набір ресурсів для старту відтворення сторінки в веб-браузері. В основному, в даний список входять сам документ HTML, веб-шрифти, CSS-стилі і JS-код.
Наше завдання як оптимізаторів швидкості зменшити даний шлях і за часом, і по трафіку.
Найбільш легкий шлях визначити критичний шлях - це запустити аудит в браузері Chrome, розширення Lighthouse визначає його склад, а також час завантаження з обов'язковим урахуванням повільного підключення.
Методика в скороченні критичного шляху: усуваємо всі, що не треба або можна відкласти. Наприклад, переважна більшість коду JS можна цілком відкласти до завантаження сторінки. Для цього розміщуємо виклик ресурсу JS в кінці документа HTML, або застосовуємо атрибут async.
Для більш відкладеної завантаження CSS сьогодні можна використовувати динамічне підключення стилів через JS.
Оптимізація веб-шрифтів
В даний час підключення веб-шрифтів стало фактично стандартом в дизайні. На жаль, вони погано впливають на швидкість відтворення сторінок. Веб-шрифти - додаткові ресурси, які необхідно отримати до старту відтворення тексту.
Правила оптимізації укладені в скороченні обсягу трафіку веб-шрифтів, а також отриманні їх якомога швидше.
Для того, щоб скоротити трафік необхідно застосовувати сучасні формати: WOFF2 для веб-браузерів, WOFF для сумісності. До того ж, слід включати лише ті набори символів, які застосовуються на веб-сайті.
оптимізація зображень
Зображення - більшість ваги сучасного інтернет-ресурсу. Зрозуміло, картинки - це не такі критичні ресурси для сторінки, як CSS- або JS-код. Однак для багатьох інтернет-порталів зображення складають важливу частину всього контенту: згадаємо картки товарів в інтернет-магазині.
Головна методика при оптимізації картинок - це скорочення їх розміру. Для цього треба застосовувати правильний формат і засоби стиску:
- PNG для зображень з текстом і прозорістю.
- JPEG для фотографій і складних картинок.
- SVG для різної векторної графіки.
На додаток до даних форматам сьогодні розробляються нові: наприклад, WebP від компанії Google. Даний формат цілком може покрити сферу використання JPEG і PNG - підтримує стиснення як з втратами, так і без, прозорість і анімацію. Для його застосування досить створити копії картинок у форматі WebP і віддавати їх веб-браузерів, що підтримують їх.
Для PNG є дуже багато утиліт по оптимізації, які можна застосовувати для скорочення розміру, наприклад, OptiPNG, ect і PNGout. Внутрішню оптимізацію стиснення інформації також можна виконувати за допомогою zopfliPNG. Ключова ідея цього ПО в підборі найбільш оптимальних параметрів компресії, усунення зайвих даних з файлу. Тут треба бути дуже обережним, так як деякі утиліти мають режим з втратою якості, що цілком може вам не підходити.
Оптимізація формату JPEG теж поділяється на два види: з втратами і без. Загалом можна порадити пакет Mozilla JPEG, який розроблений спеціально для кращого стиснення в даному форматі. Для оптимізації без втрат використовується jpegtran, а з втратами - cjpeg.
кешуючий заголовки
Це найпростіша методика сучасної клієнтської оптимізації. Її сенс у кешуванні веб-браузером різних рідко змінюваних ресурсів: картинок, JS-файлів, CSS, шрифтів, іноді навіть самого документа HTML. В результаті кожен ресурс запитується з сервера лише один раз.
У разі якщо ви користуєтеся Nginx, треба просто додати таку директиву:
add_header Cache-Control «max-age = 31536000, immutable»;
З цього моменту веб-браузер може кешувати ресурси на термін до року. Параметр «immutable» говорить, що ресурс взагалі не планується змінювати.
Безумовно, відразу виникає питання: що робити, якщо нам треба змінити закешовану ресурс? Відповідь: просто змінити його адресу, URL. Наприклад, можна додати версію до назви файлу. Для документів HTML цей спосіб теж застосуємо, проте, як правило, використовується набагато коротший термін кешування (наприклад, одна хвилина, годину).
стиснення інформації
Обов'язкова практика - стиснення будь текстової інформації при передачі від сервера веб-браузеру. Переважна більшість веб-серверів має реалізацію gzip-стиснення відповідей.
Проте, простий активації стиснення тут недостатньо.
- По-перше, рівень стиснення налаштовується і має бути близьким до максимального.
- По-друге, можна застосовувати статичне стиснення. Тобто заздалегідь стиснути всі файли і покласти на диск. В такому випадку веб-сервер буде шукати стислу версію і потім відразу її віддавати.
- По-третє, можна застосовувати більш дієві алгоритми стиснення: brotli і zopfli. Brotli буде працювати лише з HTTPS. Оскільки дані алгоритми затратні при стисненні, в обов'язковому порядку застосовуємо їх у статичному варіанті.
Для більшого ефекту стиснення на файли використовується процес мініфікаціі, тобто очищення від всіх непотрібних прогалин, перекладів рядків і інших символів. Даний процес дуже специфічний для кожного окремого формату. Також слід подбати про стиснення інших текстових даних на веб-ресурсі.
Використання CDN для прискорення веб-ресурсу дуже розрекламована міра, яка навколо суті технології має багато маркетингової лушпиння.
Теорія: навіщо
Спочатку CDN були створені для розвантаження інтернет-каналів різних мовних медіасайтов. Наприклад, при перегляді відео в прямому ефірі тисячі глядачів створюють занадто високе навантаження на пропускну здатність сервера. До того ж, забезпечити безперебійне і стабільну якість зв'язку при значній відстані сервера і клієнта дуже складно.
Рішення даної проблеми було в розробці CDN, тобто розподіленої мережі, до якої підключалися клієнти, а хости даної мережі вже до сервера. При цьому число підключень до сервера зменшувалася до одного, а число підключень до CDN могло досягати багатьох мільйонів завдяки кешування контенту мережею.
Сьогодні переважна більшість CDN себе позиціонують як інструмент прискорення веб-ресурсів, перш за все за рахунок скорочення відстані від клієнта до контенту.
можливі ефекти
Як можна прискорити веб-портал за допомогою CDN?
Так, дійсно клієнт підключається, в основному, до ближнього сервера мережі і отримує дуже швидкий процес встановлення TCP, TLS-з'єднання. Далі, якщо контент розташований на сервері CDN, клієнт може його швидко отримати. Таким чином, скорочується навантаження на наш сервер.
По-друге, CDN можуть не просто роздавати контент без змін, а й оптимізувати його, віддавати в набагато більш компактній формі: стискати картинки, використовувати компресію до тесту. Завдяки таким оптимізаціям можна отримати істотне скорочення часу завантаження.
Недоліки застосування CDN
Як завжди, недоліки - це продовження переваг. Об'єкт може бути зовсім не в кеші вузла CDN. Наприклад, він ще не запитували, або його не можна кешувати. В такому випадку ми отримуємо вже додаткові затримки між нашим сервером і вузлом CDN.
Попри те, що CDN повинні саме прискорювати доступ до інтернет-ресурсу, можливі ситуації, коли мережевий маршрут буде дещо менш оптимальним, ніж без CDN. Особливо це актуально для різних глобальних CDN, для яких РФ не є якимось пріоритетним ринком.
Мережі доставки контенту - це вкрай складні системи, де також як всюди можливі збої та інші проблеми.
закріплюємо результат
Припустимо, ви змогли домогтися високих показників швидкості інтернет-ресурсу. Користувачі і власники сайту задоволені. На цьому можна просто забути про важливому питанні швидкості? Ні звичайно.
Для досягнення постійного хорошої якості роботи веб-ресурсу треба постійно підтримувати його і виконувати моніторинг.
підтримка прискорення
Будь-який живий сайт постійно допрацьовується. Різні зміни відбуваються в загальних шаблонах і в контенті. Також активно змінюється сам програмний код.
Кожна зміна здатне впливати на швидкість інтернет-ресурсу. Для контролю даного впливу необхідно впроваджувати систему синтетичного моніторингу швидкості веб-ресурсу на стадії розробки.
Для оптимізації надходить вмісту необхідна інтеграція різних оптимізують процедур в CMS . Це перш за все стосується обробки картинок.
Прискорення інтернет-проектів - це дуже динамічна сфера: з'являються нові стандарти, регулярно змінюється їх підтримка веб-браузерами. Тому важливо систематично виконувати ревізію технологій сайта, процесів і використовуваного програмного забезпечення.
Моніторинг швидкості у користувачів
Тестування в лабораторних умовах корисно, проте його, на жаль, недостатньо. Ми хочемо, щоб проект у реальних користувачів працював швидко. Для збору таких відомостей існує так званий моніторинг швидкості на стороні користувачів або RUM.
Для того, щоб організувати RUM, необхідно підключити одну з систем веб-аналітики і потім подивитися звіти за часом завантаження інтернет-ресурсу. Для більш точних і докладних даних можна застосовувати спеціальні сервіси моніторингу швидкості.
висновок
Індустрія прискорення веб-ресурсів - це досить молода сфера веб-розробки і вона дуже активно розвивається. Важливість швидкості інтернет-проектів для онлайн-бізнесу очевидна. Вона стає одним з важливих чинників конкуренції. У зв'язку з цим слід займатися оптимізацією швидкості веб-ресурсу і робити вкладення в дану область, а також вибирати хороший хостинг .
Тема швидкості інтернет-порталу обширна. Вона зачіпає дуже багато нюансів розробки, підтримки веб-додатки: від контенту до серверного коду. Це означає, що отримання високих результатів просто неможливо без залучення хорошої команди розробки.
Найголовніше - це пам'ятати про користувачів, завжди враховувати різні умови використання веб-ресурсу. Прискорення сайту - це процес, який з різною інтенсивністю здійснюється на всьому життєвому циклі інтернет-ресурсу.
Відгуки про хостинг:
Безумовно, відразу виникає питання: що робити, якщо нам треба змінити закешовану ресурс?На цьому можна просто забути про важливому питанні швидкості?
