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

Як подавати зображення WebP у SiteGround?

2

SiteGround – одна з рекомендованих хостинг -компаній офіційним WordPress.org. В останні роки хостинг SiteGround виріс на різному рівні. Вони замінили традиційне налаштування cPanel і перенесли всі існуючі облікові записи на власні налаштування Інструментів сайту. Завдяки цьому ви можете подавати зображення WebP замість PNG або JPEG, щоб збільшити швидкість завантаження вашого веб -сайту. У цій статті ми пояснимо, як подавати зображення WebP у SiteGround та перевіряти їх у браузері.

Пов’язано: Як за допомогою WebP у WordPress виправити помилки для подання зображень у форматах наступного покоління в інструменті статистики Google PageSpeed?



Чому зображення WebP?

Щоразу, коли ви перевіряєте показник швидкості сторінки в інструменті Google PageSpeed ​​Insights, він відкриє вам багато можливостей, які можуть покращити швидкість роботи сайту. Однією з важливих пропозицій, які неможливо вирішити легко, є "Подавати зображення у форматах наступного покоління". Формати наступного покоління включають WebP, JPEG 2000 або JPEG XR для заміни традиційних форматів зображень PNG та JPEG.

Як подавати зображення WebP у SiteGround?

Подавати зображення у форматах наступного покоління

Тому розміщення зображення WebP допоможе вам вирішити проблему Google PageSpeed ​​Insights. Крім того, він зменшує розмір зображення більш ніж на 75% при тій же якості, тим самим покращуючи швидкість завантаження сторінки.

Як це працює з SiteGround?

SiteGround пропонує плагін SG Optimizer, який дозволяє перетворювати всі ваші зображення у формат WebP. Добре, що вам не потрібні інші налаштування.

  • Усі зображення WebP зберігаються на стороні сервера, і ви не можете їх переглянути у своїй Медіатеці або за допомогою FTP.
  • Ви можете перевірити, чи завантажуються зображення WebP під час перегляду сайту у браузері.
  • Ви повинні активувати WebP для окремого сайту у своєму обліковому записі хостингу.

Як подавати зображення WebP у SiteGround?

Якщо ви не використовуєте SG Optimizer, спершу потрібно встановити плагін.

  • Увійдіть на свій сайт WordPress і перейдіть до розділу «Плагіни> Додати новий».
  • Шукайте "SG Optimizer", щоб знайти плагін.
  • Встановіть та активуйте плагін на своєму сайті.

Як подавати зображення WebP у SiteGround?

Встановіть плагін SG Optimizer

Після встановлення SG Optimizer перейдіть до меню «SG Optimizer», а потім у розділ «Оптимізація медіа». Тут у вас є варіанти включення зображень WebP на вашому сайті.

Пам’ятайте, що якщо ви вже використовуєте будь -які плагіни кешування, то ви не повинні вмикати інші параметри в плагіні SG Optimizer. Переконайтеся, що ви не вмикаєте однакові параметри у двох плагінах та порушуєте роботу сайту.

Увімкніть WebP для нових зображень

Спочатку увімкніть опцію «Створювати WebP -копії нових зображень». Виберіть тип оптимізації, щоб вибрати якість зображень WebP. Опція без втрат допомагає зберегти якість, а опція з втратами зменшує розмір до набагато меншого, зменшуючи якість зображення.

Як подавати зображення WebP у SiteGround?

Створення зображень WebP у SiteGround

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

Як подавати зображення WebP у SiteGround?

Створення втраченого WebP у SiteGround

Завантажте нове зображення та перевірте якість кількох зображень у веб -переглядачі (див. Це нижче у розділі), перш ніж масово обробляти всі наявні зображення.

Масове створення файлів WebP

Визначившись і налаштувавши якість, натисніть кнопку «Масове створення файлів WebP». Це відновить версію WebP для всіх ваших наявних зображень. На відміну від звичайної опції оптимізації зображення, створення зображень WebP займе менше часу, залежно від кількості зображень на вашому сайті. У нашому випадку ми маємо 14K зображень, на які пішло менше хвилини.

Зміна якості

У будь -який момент ви можете прийняти рішення про зміну якості з без втрат на втрату або навпаки. Ви також можете будь -коли змінити якість зображень WebP із втратами. Щоразу, коли ви змінюєте якість, натискайте посилання "повторно створити", щоб відновити зображення з новою якістю. Крім того, натисніть кнопку «Видалити всі файли WebP», а потім клацніть «Масова генерація файлів WebP», щоб відновити зображення з новою якістю.

Тестування зображень WebP у браузері

Відкрийте свій сайт у Google Chrome і перевірте вихідний код із Консолі розробника. Ви все одно бачитимете зображення PNG або JPEG, а не зображення WebP. Однак це не правильний спосіб перевірки.

Як подавати зображення WebP у SiteGround?

Джерело із зображенням PNG

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

  • Відкрийте Google Chrome і відкрийте розділ Інструменти розробника Chrome. Ви можете отримати доступ до інструментів розробника, натиснувши F12 у Windows та перейшовши до “Option + Command + I" у Mac.
  • Перейдіть на вкладку «Мережа» та відкрийте веб -сторінку в адресному рядку. Якщо ви вже відкрили сторінку, натисніть кнопку оновлення, щоб оновити сторінку.
  • Тепер ви можете побачити, як записуються мережеві дії, і натиснути на вкладку «Img».
  • Тут ви можете побачити тип ресурсу, завантаженого з вашого сайту.
  • Ви можете відсортувати стовпці «Ім’я» або «Тип», щоб перевірити тип зображення. Він повинен відображатися як "WebP".
  • Це спосіб підтвердити, що зображення WebP подаються з вашого веб -сайту.

Як подавати зображення WebP у SiteGround?

Перевірте SiteGround WebP у браузері

Альтернативний спосіб тестування

Інший спосіб тестування простий.

Як подавати зображення WebP у SiteGround?

Зберегти зображення як

  • Ви повинні побачити формат зображення як "Google WebP".

Як подавати зображення WebP у SiteGround?

Збережіть зображення WebP

Хоча вихідне зображення – PNG (або JPEG), ви повинні побачити формат як "Google WebP", оскільки це формат зображення, доступний на вашому сайті.

Кешовані зображення WebP

Деякі плагіни кешування, такі як WP Rocket, дозволяють кешувати зображення WebP. Якщо ви кешуєте зображення WebP, то ви можете знайти версії .png.webp або .jpg.webp на своєму сервері хостингу в каталозі завантажень. Це не поведінка за промовчанням служби SiteGround WebP, і коли ви вимкнете плагін кешування, генерація кешу припиниться, і вам слід скористатися одним із вищевказаних методів для перевірки.

Як подавати зображення WebP у SiteGround?

Кешування WebP у WP Rocket

Скільки я можу заощадити?

Це дійсно залежить від якості обраного вами зображення WebP. У нашому випадку ми обираємо варіант без втрат і заощаджуємо більше 77% на одному зображенні.

  • Оригінальний розмір зображення PNG – 139 КБ
  • Розмір зображення WebP – 31 КБ

Перевірка за допомогою Google PageSpeed ​​Insights

Тепер поверніться до інструмента Google PageSpeed ​​Insights та протестуйте одну зі своїх веб -сторінок. Пропозиція про розміщення зображень у форматі наступного покоління має зникнути зараз.

Точки, про які слід подбати

Під час використання WebP на своєму сайті обов’язково зверніть увагу на такі моменти:

  • Не всі браузери підтримують WebP, перевірте свій сайт у Google Chrome або будь -якому підтримуваному веб -переглядачі.
  • Кешування таких плагінів, як WP Rocket, пропонує кешувати зображення WebP, щоб збільшити швидкість завантаження сторінки. Однак ці плагіни кешування не виявлятимуть образи WebP на сервері SiteGround. Перш ніж увімкнути кешування зображень WebP, можна підтвердити це у розробника плагіна.
  • Служби CDN, такі як Cloudflare, будуть безперебійно працювати з SiteGround. Однак, якщо у вас є окреме налаштування CNAME для обслуговування мультимедійних файлів через CDN, уточніть у постачальника CDN, чи можуть вони обслуговувати зображення WebP.
  • Опція WebP недоступна для сайтів, де все ще використовується налаштування cPanel. Вам потрібно почекати, поки SiteGround перенесе ваш обліковий запис у інструменти сайту.
  • Щоб увімкнути WebP, потрібно використовувати плагін SG Optimizer, без плагіна неможливо ввімкнути його з вашого облікового запису хостингу.
  • Обов’язково відновлюйте зображення щоразу, коли ви змінюєте якість зображень WebP.

Заключні слова

Швидкість сайту стає важливим фактором, коли Google оголосила Core Web Vitals, що вплине на рейтинг у майбутньому. Веб -сайти SiteGround уже є на хмарній платформі Google, і з WebP ви значно випередите конкуренцію, розміщену в інших компаніях.

Джерело запису: webnots.com
Залиште відповідь

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