TechBlogSD - Все для WordPress і WEB розробки
WEB і WordPress інструкції, новини, огляди тем та плагінів

7 способів оптимізації зображень у WordPress для покращення швидкості завантаження сторінок

1

Зображення неминуча частина будь -якого веб -сайту. За популярною цитатою: «Зображення коштує тисячу слів». Зображення дуже корисні для вираження мислення, особливо для навчальних посібників, фотографії та розміщення сайтів. З гучними соціальними мережами вам потрібно мати зображення для Кожен окремий допис, щоб поділитися ним привабливо. Тепер може виникнути питання: я використовую багато зображень на своєму веб -сайті WordPress і яку оптимізацію мені зробити?

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

Як дізнатися про проблеми оптимізації зображення?

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

7 способів оптимізації зображень у WordPress для покращення швидкості завантаження сторінок

Оптимізуйте зображення в Google PageSpeed ​​Insights

Ви повинні бачити "Оптимізувати зображення" як першочергову проблему, коли ваші зображення не стискаються. Стиснення зображення є однією з основних проблем, які ви побачите в інструменті Google PageSpeed ​​Insights. Але є багато інших питань, які ви можете знайти при використанні таких інструментів, як Pingdom і GTmetrix як показано нижче.

  • Паралельно завантажуйте всі імена хостів
  • Обслуговувати статичний вміст із домену без файлів cookie
  • Вкажіть розміри зображення
  • Подавайте масштабовані зображення

Усі ці проблеми можна легко вирішити за допомогою плагінів та слідуючи простим правилам.

Як оптимізувати зображення в WordPress, щоб покращити швидкість завантаження сторінки?

Ось короткий опис методів оптимізації для покращення швидкості завантаження сторінки:

  1. Зменшити кількість зображень на сервері
  2. Використовуйте плагін для стиснення зображень, щоб зберегти розмір
  3. Розміщувати зображення з субдомену
  4. Використовуйте правильний розмір зображення
  5. Уникайте зміни розміру в HTML / CSS
  6. По можливості використовуйте векторні іконки
  7. Виберіть відповідний формат зображення

1 Зменшіть кількість зображень

Кожне окреме зображення на сторінці надсилатиме на ваш сервер окремий HTTP -запит і потребуватиме часу на завантаження. Прислів’я «Малюнок коштує тисячу слів» може виглядати добре, але насправді використовуйте зображення лише тоді, коли це потрібно. Менше зображень означає меншу кількість запитів сервера та швидке завантаження сторінки.

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

2 Стисніть зображення, щоб зберегти розмір

Браузеру потрібно завантажувати зображення з вашого сервера під час завантаження сторінки. Зменшення розміру кожного КБ буде розраховувати на продуктивність; таким чином, забезпечте подання зображень після відповідного стиснення. Наприклад, зображення мають метадані, такі як місцезнаходження, відомості про камеру тощо. Якщо це не потрібно, видаліть ці дані за допомогою плагінів, щоб зменшити розмір зображень.

Зображення можна стискати двома методами – без втрат та без втрат. Простими словами, стиснення з втратами є незворотним способом і видаляє деякий піксель даних із зображення. Стиснення без втрат – це зворотний спосіб, який стискає зображення без видалення пікселів. Виходячи з формату зображення (PNG / JPEG / GIF), якості та необхідного стиснення, вам може знадобитися випробувати різні плагіни, щоб побачити, що вам підходить.

Якщо у вас мало веб -сторінок або небагато зображень для оптимізації, ми рекомендуємо це зробити за допомогою інструментів стиснення зображень. Нижче наведено деякі інструменти стиснення зображень, які можна використовувати:

  • gifsicle – для створення та оптимізації зображень GIF
  • optipng – використовуйте стиснення без втрат, щоб зменшити розмір зображення PNG
  • pngquant – використовуйте стиснення з втратами, щоб зменшити розмір зображення PNG
  • jpegtran – стискання зображень JPEG

WordPress має багато безкоштовних і преміальних плагінів стиснення зображень. Два таких популярних плагіна- EWWW Image Optimizer і WP-Smushit. EWWW Image Optimizer має багато налаштувань і стискає на вашому власному сервері хостингу. Хоча WP-Smushit простий і зрозумілий, він стискає зображення на зовнішньому сервері. Після встановлення та активації ці плагіни допоможуть автоматично стискати зображення під час їх завантаження. Ось повний підручник про те, як користуватися плагіном WP-Smushit.

7 способів оптимізації зображень у WordPress для покращення швидкості завантаження сторінок

Плагін WP Smush WordPress

Пам’ятайте, що плагіни стиснення зображень будуть споживати великі ресурси сервера. Не стискайте сотні зображень одночасно, що призведе до порушення умов вашої хостингової компанії. Стисніть менше зображень з достатнім інтервалом, щоб уникнути великого навантаження на сервер.

3 Подавайте зображення з субдомену

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

7 способів оптимізації зображень у WordPress для покращення швидкості завантаження сторінок

Обслуговування вмісту з різних серверів

Перегляньте нашу статтю про те, як перемістити папку зображень WordPress на субдомен.

4 Використовуйте правильний розмір зображення

Підготуйте зображення точно з розміром, яким вони будуть відображатися на сайті. Якщо вам потрібно зображення 600 × 350, не готуйте розмір 1200 × 700. Браузеру потрібен тривалий час для завантаження великих файлів зображень через розмір. Плагін WP-Smushit також має можливість встановити максимальний розмір для завантажених зображень. Це допоможе змінити розмір завантажених зображень до максимального розміру та зменшити розмір зображення.

5 Уникайте зміни розміру в HTML / CSS

Люди використовують HTML і CSS, щоб змінити розмір зображення після його завантаження в браузер. Це лише додасть ще деякий час під час завантаження, оскільки браузеру потрібен додатковий час для візуалізації зображення до необхідного розміру.

Наприклад, не рекомендується завантажувати зображення розміром 90 × 90 пікселів і намагатися зменшити розмір за допомогою наведеного нижче коду HTML.

<img src="your image URL" height=45 width=45>

6 Використовуйте векторні іконки

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

Я – значок шрифту, використовуйте мене замість зображення.

Забезпечити, щоб включити стиск GZIP на важіль сервера, щоб зменшити розмір файлу SVG фотографії та інший вміст.

7 Виберіть відповідний формат зображення

Існують три універсально підтримувані формати зображень – GIF, PNG та JPEG. У кожного свої плюси і мінуси.

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

Виберіть необхідний формат зображення та стисніть його за допомогою плагінів перед подачею користувачам.

Висновок

Коли ви починаєте веб -сайт, ми рекомендуємо спробувати кілька комбінацій і перевірити, яка з них вам підходить. Якщо у вас вже працює сайт з великою кількістю зображень, використовуйте плагіни для стиснення всіх наявних зображень. Скористайтеся інструментом Google PageSpeed ​​Insight, щоб перевірити, чи видалено проблему "Оптимізація зображень" та чи покращився показник швидкості сторінки. Дотримання всіх перерахованих вище методів оптимізації допоможе значно покращити показник завантаження сторінки до зеленої зони.

Джерело запису: www.webnots.com

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі