В ідеалі ви хочете, щоб розмір сторінки HTML DOM складав близько 100 КБ або менше, залежно від ніші.
У деяких нішах сторінки може бути більше;наприклад, в електронній комерції нерідко можна побачити сторінки розміром від 150 до 200 КБ, залежно від того, скільки зображень товарів знаходиться на сторінці.
Ви не хочете ставати занадто великим, тому що тоді ви почнете негативно впливати на досвід користувача і можете втратити можливість підвищити рейтинг з хорошими оцінками Core Web Vitals.
Але зменшення розміру сторінки без урахування досвіду користувача може призвести до того, що ваша сторінка буде не такою корисною, як у конкурентів.Баланс – це ключ до успіху.
Проблеми, що впливають розмір вашої сторінки
Коли ви включаєте CSS і JS за промовчанням, ви хочете переконатися, що ви також оптимізувати цей код для завантаження сторінки.Це означає, що потрібно переконатися, що всі ці файли належним чином мініфіковані, і переконатися, що ви не включаєте масивний роздування коду.
“Роздуття коду” означає, що непотрібний код значно збільшує розмір сторінки, тим самим впливаючи на швидкість вашої сторінки.
Є різні способи досягти того самого.Ви хочете уникнути тих, які викликають проблеми через надмірне кодування на стороні CSS та JS.
Крім оптимізованого мислення кодування, файли CSS та JS потребують процесу мініфікації.У процесі мініфікації видаляються зайві прогалини та інші випадкові артефакти коду, яких тут немає.
Важливо, що мініфікація не змінить ваше фактичне кодування – лише артефакти кодування.Ваш розум та навички розробки, як і раніше, будуть необхідні для досягнення максимальної оптимізації коду CSS та JS на стороні сервера.
Інструменти для перевірки розміру вашої сторінки
Google Page Speed Insights – важливий інструмент для виявлення проблем із розміром сторінки, які можуть уповільнювати завантаження.
Крім того, це допоможе вам відзначити елементи у контрольному списку Google Core Web Vitals за розміром сторінки.
Ви також можете перевірити розмір своєї сторінки за допомогою Screaming Frog SEO Spider, щоб виконати сканування вашого сайту.
Це може допомогти знизити витрати на веб-хостинг.
Залежно від вашого провайдера інтернет-хостингу та його планів хостингу, ви можете заощадити на хостингу з меншими розмірами файлів підкачки.
Менший розмір сторінки означає меншу смугу пропускання, що використовується (передача файлів), що може знизити витрати на хостинг, особливо на великих сайтах.
Оптимізуйте ці зображення
Для створення найкращих, найбільш оптимізованих зображень необхідно переконатися, що ви відзначили такі пункти у своєму контрольному списку:
- Фізичний розмір пікселя.
- Загальний розмір зображення.
- Збереження якості зображення.
Фізичний розмір пікселя відноситься до густини пікселів зображення. Неважливо, чи зменшилося ваше зображення з 1600 x 1600 до 500 x 500, якщо щільність пікселів зображення залишиться незмінною.
Ви, як і раніше, отримуватимете зображення з розміром файлу 1 МБ, якщо ви з цього почали.
Щоб забезпечити належну оптимізацію, що враховує обидва ці фактори, переконайтеся, що ви використовуєте стиснення зображень без втрат за допомогою таких інструментів як Adobe Photoshop або платних версій інструментів, таких як Smush Pro.
В даний час Adobe Photoshop є золотим стандартом у сфері стиснення зображень.
Це допоможе вам орієнтуватися на всі три фактори, і ваші зображення, як і раніше, будуть кристально чистими в кінці процесу стиснення.
Ви також повинні розглянути більш швидкі формати зображень, які краще, ніж їхні попередники, такі як WebP over png.
Є кілька сервісів, які можна використовувати для оптимізації зображень, у тому числі ShortPixel.com і TinyPNG.com.
Мінімізуйте свій HTML та CSS
Процес мініфікації файлів HTML і CSS може принести значні дивіденди, коли справа доходить до зменшення розміру вашої сторінки.
Коли ви зменшуєте свій HTML і CSS , ви позбавляєтеся небажаних та непотрібних інтервалів у коді і в результаті зменшуєте розмір файлу сторінки.
Має сенс продовжити процес мініфікації для всіх сторінок, особливо якщо ви знаєте, що всі ваші сторінки заповнені непотрібним кодом.