Прискорення Роботи Сайту

1. Вступ Однією з найважливіших завдань в області оптимізації сайту, яку люди як правило забувають -...
2. Як прогресивні JPEG зображення поліпшать продуктивність сайту?
3. Що вам знадобиться
4. Крок 1 - Аналіз вашого сайту
5. Крок 2 - Завантаження прогресивних JPEG зображень
6. Варіант 1 - Стиснення JPEG в прогресивний формат за допомогою WebPageTest.org
7. Варіант 2 - Конвертація послідовних JPEG в прогресивні за допомогою Optimizilla
8. Варіант 3 - Оптимізація зображень за допомогою CMS плагінів
9. Крок 3 - Заміна старих зображень
10. Крок 4 - Тестування змін
11. висновок

Вступ

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

У чому різниця між послідовними і прогресивними JPEG зображеннями?

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

Цикл завантаження послідовних JPEG:

Цикл завантаження прогресивних JPEG:

Як прогресивні JPEG зображення поліпшать продуктивність сайту?

На додаток до поліпшення візуального сприйняття, прогресивні JPEG зображення від 2% до 10% менше ніж послідовні, таким чином, їх використання прискорить завантаження і загальну продуктивність вашого сайту. Ваші запити на сервер будуть короткими і більш ефективними, що також зменшить використання ресурсів, таких як пропускна здатність і дисковий простір. Це дуже ефективно, якщо ваш сайт розміщений на безкоштовному або віртуальному хостингу. Отримати користь з стиснення JPEG в прогресивні можуть і сайти з великою кількістю таких. Також варто згадки той факт, що користувачі заходять на ваш сайт з використанням мобільних пристроїв або повільним інтернет з'єднанням матимуть краще візуальне сприйняття і більш швидкий час завантаження, якщо на сайті використовуються прогресивні зображення.

ВАЖЛИВО! Деякі браузери (наприклад Internet Explorer перед Windows 7) не підтримували прогресивні зображення. Однак все більш пізні версії їх підтримують.

Що вам знадобиться

Перед тим, як ви почнете це керівництво, вам знадобиться наступне:

Крок 1 - Аналіз вашого сайту

Щоб знайти послідовні JPEG, які можуть бути замінені прогресивними, ми будемо використовувати WebPageTest . Це відмінний інструмент для цього завдання, так як тут ви зможете стиснути JPEG і отримати прогресивну версію зображення без використання якихось додаткових сайтів.

Тут представлені результати Performance Review (Огляду продуктивності) після аналізу сайту:

Крок 2 - Завантаження прогресивних JPEG зображень

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

Варіант 1 - Стиснення JPEG в прогресивний формат за допомогою WebPageTest.org

Після пошуку списку зображень, які можуть бути замінені, перейдіть в розділ Details (Деталі) і натисніть View All Images (Переглянути Все Зображення)

Цей розділ відобразить всі зображення на вашій сторінці. Натисніть Analyze JPEG (Проаналізувати JPEG) на кожному із зображень знайденому в Кроці 1 цього керівництва і перейдіть вниз.

Тут ви повинні знайти Quality 85 Image (Якість 85) вашого початкового зображення. Збережіть всі Quality 85 зображення на ваш комп'ютер і приступите до наступного кроку. Ми рекомендуємо зберігати зображення з тими ж іменами, що і оригінальні, для полегшення процесу заміни.

Варіант 2 - Конвертація послідовних JPEG в прогресивні за допомогою Optimizilla

Якщо ви тільки плануєте завантаження зображень на ваш сайт або ваш сайт ще не завантажений на сервер, ви можете використовувати Optimizilla , Щоб зробити процес стиснення JPEG. Даний інструмент дозволяє конвертувати до 20 зображень і стиснути їх використовуючи алгоритм до Якість 85 або менше.

ВАЖЛИВО! Виставлення значення менше 85 може привести до втрати якості.

Варіант 3 - Оптимізація зображень за допомогою CMS плагінів

Якщо ваш сайт використовує WordPress, ви можете легко замінити ваші зображення на прогресивні JPEG за допомогою WP Smush. перевірте це керівництво для більш детальних інструкцій по використанню WP Smush

Крок 3 - Заміна старих зображень

ВАЖЛИВО! Перед початком переконайтеся, що зробили резервну копію вашого сайту або зображень, які ви плануєте замінити.

Знайдіть зображення з Кроку 1 використовуючи Файловий менеджер або будь-який FTP-клієнт . Видаліть і замініть їх новими прогресивними JPEG отриманими в Кроці 2. Ще раз переконаєтеся, що вони мають ті ж імена для уникнення помилок 404 або проблем з відображенням.

Крок 4 - Тестування змін

Як тільки прогресивні зображення завантажені, очистіть кеш браузера і відкрийте ваш сайт для перевірки правильності їх завантаження. Після цього, ви можете проаналізувати ваш сайт в WebPageTest.org , Щоб переконатися в правильності виконаних дій. Ось результати які ви повинні побачити в розділі Details (Деталі):

висновок

У цьому керівництві ви дізналися, як прискорити роботу вашого сайту шляхом стиснення JPEG зображень. Чим плавніше візуальне сприйняття, тим більше шансів того, що ви і ваші відвідувачі залишитеся задоволені. Крім цього, ви скорочуєте використання ресурсів, покращуєте SEO і продуктивність сайту. Це дійсно безпрограшна ситуація для всіх.

Керівництва по темі: