З цього вступу я розпочинаю серію дописів про WPO щоб побачити, як ми можемо покращити наш рахунок Google PageSpeed ​​Insights у WordPress.

insights

WPO (Оптимізація веб-продуктивності) - це набір методів або заходів на будь-якому рівні покращити продуктивність та швидкість завантаження нашого веб-сайту. Тому ми покращимо взаємодію з користувачем (UX) та SEO, оскільки швидкість завантаження є ключовим фактором, який враховують пошукові системи.

Існує багато інструментів, за допомогою яких можна виміряти швидкість вашого веб-сайту. У цій серії із 7 записів ми поговоримо Google PageSpeed ​​Insights і як вирішити в WordPress деякі його ключові моменти.

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

  • 2 шрифти від Google Fonts
  • Bootstrap, FontAwesome, спеціальна таблиця стилів
  • jQuery
  • Одне зображення на корпусі та одне на бічній панелі
  • Дуже простий заголовок і тіло з 5 абзацами від lorem ipsum

Я поставив себе в гіршому випадку:

  • Я завантажую CSS та JS без мініфікації
  • jquery-3.1.1.js і bootstrap.js знаходяться в голові
  • Зміст зображення має розміри 6016x3384px і важить 25,3 МБ
  • Зображення бічної панелі має розміри 2048x769px і важить 1 МБ
  • У .htaccess немає нічого

За допомогою цієї панорами результат у PageSpeed ​​такий:

З цього сценарію ми починаємо бачити, як покращити наш показник у PageSpeed ​​Insights.

Оптимізуйте зображення

Само собою зрозуміло, наскільки важливим є цей момент для зменшення часу завантаження. Це просто, чим більше наше зображення важить, тим повільніше завантажується Інтернет, більше немає ніякої таємниці.

Проблема погіршуватиметься, чим більше неоптимізованих зображень ми маємо на нашому веб-сайті. Ось повідомлення, яке повертає тест Google:

Оптимізуйте зображення
Правильне форматування та стиснення зображень дозволяє зберегти велику кількість байтів даних.
Оптимізуйте ці зображення, щоб зменшити їх розмір на 996,2 КБ (зменшення на 99%).
• Стискаючи або змінюючи розмір https://mydomain.com/img/vialactea2.jpg, ви можете заощадити 996,2 КБ (на 99% менше).

Google PageSpeed ​​Insights

25-мегабайтне зображення настільки важке, що навіть не аналізує його. Ми можемо оптимізувати зображення двома способами: розміром та якістю.

Оптимізуйте зображення за розміром

Коли ми маємо на увазі оптимізацію зображення за розміром, ми маємо на увазі, що ми повинні думати про реальний простір, який воно буде займати на нашому веб-сайті. Дуже спокусливо завантажити зображення найвищої якості з нашої рефлекторної камери та завантажити його безпосередньо на нашу сторінку, але це вб’є нашу продуктивність.

У прикладі ми використовуємо зображення для вмісту шириною 6016 пікселів, коли контейнер має лише 848 пікселів. Те саме відбувається з нами на бічній панелі, зображення становить 2048 пікселів, а ширина бічної панелі - 263 пікселів.

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

  • Зображення 1 із 6016x3384px та 25,3 МБ до 848x477px і 432 КБ
  • Зображення 2 із 2048x769px та 1 Мб у 263x99px та 46 КБ

Оптимізуйте якість зображення

Коли ми зрозуміємо, що розмір має значення, наступне - це оптимізувати зображення з точки зору якості. Google PageSpeed ​​рекомендує нам:

  • Файли PNG майже завжди перевершують файли GIF, хоча вони лише частково сумісні з деякими старими версіями браузера. Сьогодні це вже не проблема, якщо у вас немає комп’ютера з Windows 98 та Internet Explorer 6, котрий настав час вийти з життя.
  • Використовуйте файли GIF для дуже маленьких або простих графічних зображень (наприклад, розміром менше 10 x 10 пікселів або з кольоровою палітрою менше 3 кольорів) та для зображень, що містять анімацію.
  • Використовуйте файли JPG для всіх зображень у стилі фото.
  • Не використовуйте файли BMP або TIFF.

Використовуючи такі інструменти, як Photoshop ми можемо оптимізувати якість наших зображень за допомогою опції Зберегти для Інтернету. Цей параметр оптимізує стиснення та видаляє метадані та коментарі, які можуть мати зображення для зменшення ваги. Для нашого прикладу зображення будуть такими:

  • Зображення 1 з 432 КБ до 86,4 КБ
  • Зображення 2 з 46 КБ до 8,67 КБ

Ми також можемо використовувати плагіни, які допомагають нам у виконанні цього завдання стиснення, такі як WP Smush, EWWW Image Optimizer або Imagify. Ми можемо налаштувати їх таким чином, щоб автоматично завантажувати зображення в мультимедійну бібліотеку воно автоматично оптимізувалось.

Так багато WP Smush, Що EWWW Image Optimizer і як Уявіть Вони мають безкоштовну версію, обмежену, але в багатьох випадках цього може бути достатньо.

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

Я зробив порівняння 3-х плагінів, використовуючи безкоштовну їх версію, і взяв за посилання це зображення ведмедя та полуничного дерева, беручи до уваги, що вихідне зображення - JPG у максимальній якості (зроблене з фотошопом), кілька пропорцій 1024x768px і вагою 817KB.

Результат такий:

Розмір плагіна
WP Smush154 КБ
EWWW Image Optimizer154 КБ
Уявіть Нормальне154 КБ
Уявіть Агресивний133 КБ
Imagify Ultra104 КБ

Як видно, у будь-якому з випадків скорочення є значним. У безкоштовній версії WP Smush Y EWWW Image Optimizer використовується стиснення без втрат, тобто стиснення без втрат. Наче ви вибрали параметр Звичайний у Уявіть. Цей плагін також дає вам можливість стискати зображення за допомогою стиснення з втратами, якщо ви вибираєте параметр Агресивний, і наш найсильніший метод стиснення з використанням алгоритму з втратами, якщо ви вибираєте варіант Ультра.

Однак фільтр PageSpeed ​​дуже жорсткий, і навіть у деяких випадках ми можемо отримувати попередження про наявність зображень, які можна додатково оптимізувати. Хитрість, про яку знають не багато людей: ви можете пройти тест PageSpeed ​​і в кінці ви знайдете посилання, де ви зможете завантажити оптимізоване зображення, JavaScript та CSS-ресурси цієї сторінки

Зображення - це, мабуть, ті елементи, які можуть найбільше вплинути на вагу та час завантаження Інтернету. Оптимізація їх - це щось принципове і, на щастя, легко досягти, беручи до уваги те, що ми бачили в цій публікації.

Ми знизили основне зображення з 25,3 МБ до 86,4 КБ, тобто зменшили його вагу!294 рази!

Чи вважаєте Ви цю інформацію корисною?

Якщо ця публікація вирішила для вас проблему, купите мені каву чи пиво. Цим маленьким жестом ви закликаєте мене продовжувати писати.

Вам також може бути цікаво

Цим дописом я розпочинаю серію статей про Git. Мета - створити простий і повний посібник для вивчення Git простим способом ...

Можливо, з якоїсь нагоди через необережність чи забудькуватість або, можливо, через поспіх, ви не створили видатний образ на посаді. Що коли…

У попередніх повідомленнях ми бачили частину того, що ми можемо зробити з WP-CLI. Однією з його найбільших достоїнств є можливість створювати власні команди для виконання ...

1. Встановлення та перші кроки2. Встановлення WordPress та перші кроки та конфігурації 3. Робота з повідомленнями4. Робота з користувачами 5. Робота з базою даних 6. Шукати ...