Спосіб прискорення завантаження сторінок сайту

Сьогодні хочу провести невелике дослідження в якому розглянути швидкість завантаження сторінки сайту за допомогою звичайних іконок і за допомогою іконок, про яких я писав вчора. Я написав масу плюсів, але зараз хочу продемонструвати один з них на прикладі реального сайту. Ви побачите значні зміни швидкості завантаження при використанні звичайних зображень і спеціальних іконок. А потім самостійно вирішите що краще і оптимальніше використовувати!

Та стаття, в якій я розглянула ці незвичайні ікони по посиланню нижче:

• 3 МЕГАБОНУСА БЕЗКОШТОВНО

Коли писав статтю про сервіси, які дозволяють оптимізувати зображення для прискорення завантаження сайту. Також вивчіть її:

• 8 сервісів для оптимізації зображень

Щоб не було претензій до мого інтернет-з`єднання я заміряв швидкість завантаження сторінок сайту за допомогою сервісу GTmetrix. Які показує все що необхідно для цього міні-дослідження.

тестований сайт

Для дослідження я встановив CMS WordPress на тестовий домен і там заміряв результати. Ось як виглядає запис, в якій поки що немає зображень:

Я відразу заміряв швидкість завантаження сторінки, кількість запитів і розмір для порожньої сторінки. Щоб ми могли дивитися на скільки збільшується час завантаження сторінки сайту щодо порожній (на якій нічого немає). Отже, ось загальні параметри:

Тут нам важливо три параметри:

• Page load time - час завантаження сторінки сайту;
• Total page size - загальний розмір (вагу) сторінки;
• Total number of requests - загальна кількість запитів.

А зараз давайте поглянемо на графік завантаження сторінки сайту (поки що без пояснень):

Процес дослідження | Звичайні JPEG зображення

А зараз я завантажив на свій тестовий сайт 10 іконок у вигляді JPEG зображень. Для тіста я їх зробив на різному тлі щоб виглядали веселіше. Їх загальна вага - 60 Кб. Ось як вони виглядають:

Зараз заміряємо швидкість завантаження і отримуємо такі загальні параметри:

Швидкість завантаження сторінки і вага сторінки збільшилися, а особливо помітно збільшилася кількість запитів! Але ж ми додали всього лише кілька зображень розміром 100 100 пікселів. Зараз подивимося що на відбувається в процесі завантаження сторінки сайту на часовій шкалі.

Вище я писав що дивимося на графік без пояснень, тому що немає там завантажувалися стандартні скрипти і файли стилів, які використовуються в темі. Але зараз Ви можете побачити де завантажуються всі 10 зображень (я їх підсвітив):

Видно де вони завантажуються і як збільшується загальний час завантаження сайту. Хоча я додав всього 10 JPEG зображень.

Процес дослідження | Web іконки

Для порівняння давайте подивимося як змінитися швидкість завантаження сторінки сайту якщо замість звичайних іконок використовувати іконки Web Fonts. Не дивлячись на те, що вони багато вже де використовуються - більшість навіть не знають про їх існування. Процесу установки тут не буде. Більш докладно про цих іконах дивіться тут - СУЧАСНІ іконки.

Я їх вставив 20 штук, на відміну від 10, як в минулому тесті. Я підібрав схожі іконки, щоб Ви побачили наскільки мінімально їх відміну візуально (я зробив 2 скріншота сторінок з одним варіантом і з іншим):

Що ж йде з основними параметрами:

Ви могли помітити, що розмір сторінки сайту тут збільшився. Але хочу Вас заспокоїти: від того, 10 іконок я додам за допомогою Web Icons або 100, розмір сторінки не збільшиться! Приголомшливо, правда ?!

А зараз подивимося на тимчасову шкалу і знайдемо де завантажуються ці іконки (цей рядок також підсвічена на зображенні нижче):

Всього одна рядок на відміну від 10 з минулого прикладу, де були звичайні JPEG ікони! До речі, загальна кількість запитів збільшилася всього на 2.

Детальніше про Web іконках

У цій статті я навів тільки приклад дослідження іконок, але нічого не сказав про установку і де їх взяти. Це ви дізнаєтеся з невеликого відео:

висновок

Зі статті Ви побачили як в швидкості завантаження сторінки програють звичайні іконки. Хоча я тут вставив всього 10 простих зображень і 20 іконок Web - вже помітна різниця в швидкості завантаження сторінки і кількості запитів. Але ж на реальному сайті їх використовується набагато більше!

Якщо що-небудь упустили, ось основні пункти статті (можна перейти до будь-якого - клікнувши по ньому):

1. тестований сайт
2. Процес дослідження | Звичайні JPEG зображення
3. Процес дослідження | Web іконки

Повідомити друзям про переваги Web іконок. Для цього натисніть на одну з кнопок соціальних мереж нижче.

Успіхів!

З повагою, Юрій Німець