Як покращити ефективність вашої теми La Com du Web WordPress

Середня вага веб-сторінки досягла 2884 кб у травні 2017 р. Google повідомляє про середній час завантаження мобільних пристроїв 19 секунд. Проте продуктивність має значення як ніколи:

Image Optimizer

Розчаровані користувачі: користувачі не будуть чекати. Згідно з дослідженнями, проведеними Aberdeen Group, кожне завантаження занадто довге:

  • На 11% менше переглядів сторінок
  • Зниження рівня задоволеності користувачів на 16%
  • Зниження конверсій на 7%

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

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

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

Які фактори впливають на ефективність вашого сайту ?

На ефективність вашого веб-сайту впливають:

  1. Кількість запитів HTTP
  2. Розмір завантажених об’єктів
  3. Ефективність сторінки

Кількість HTTP-запитів визначається кількістю файлів та викликів Ajax, необхідних для роботи вашої сторінки: HTML, CSS, JavaScript, зображення, шрифти, дані та всі інші елементи. HTTP/2 вирішує цю проблему, але ваш сервер та браузер користувача повинні бути налаштовані, щоб дозволити підтримку. Навіть із HTTP/2, двадцять запитів файлів все одно менш ефективні, ніж десять.

Головним фактором є розмір кожного файлу. Поклавши це в контекст, 2884 кб на 20% більше, ніж оригінальна версія Idom Doom. Звичайно, ми порівнюємо сучасні веб-сторінки з 25-річною грою, але більшість сторінок містять кілька абзаців вмісту, оскільки Doom реалізує 3D-механізм, кілька рівнів, графіку, музику та звукові ефекти.

Навіть порівняно легка сторінка може бути неефективною. Наприклад, якщо ваш веб-сайт із трьома сторінками має файл JavaScript на 500 кб, який не залежить від структури, цей код потрібно завантажити, проаналізувати та виконати, перш ніж буде показано перший символ. Створений сервером файл HTML почне з'являтися до того, як він буде повністю завантажений, навіть якщо загальний обсяг ресурсів перевищує 500 Кб.

Нарешті, швидкість сервера, стиснення та кешування є іншими важливими міркуваннями.

Виміряйте продуктивність

Важливо виміряти ефективність веб-сайту, щоб виявити вузькі місця та переконатися, що оновлення покращили сторінку. Наступні інструменти аналізують ваш веб-сайт, щоб показати вам точки блокування та запропонувати вдосконалення:

Вкладка "Інструменти розробника" у вашому браузері також надає інформацію про макет та час, необхідний для того, щоб сторінка була готова до подій користувача.

Удосконалення, на впровадження яких потрібно небагато часу

Наступні оновлення забирають у вас кілька хвилин, тому вам не доведеться вибачатися !

Зверніться до свого господаря

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

Увімкнути стиснення GZIP

Майже 30% сайтів не вмикають стиснення GZIP. Зазвичай це можна ввімкнути в налаштуваннях веб-сервера або плагінах WordPress, таких як WP HTTP Compression та W3 Total Cache.

Увімкніть кешування WordPress

Доступні кілька плагінів WordPress, які відображають сторінки та зберігають їх у кеші при першому запиті. Наступні запити отримують ці сторінки з кешу, а не відновлюють вміст бази даних. Для WordPress ви можете знайти такі плагіни: W3 Total Cache, WP Super Cache, Hyper Cache, WP Fast Cache та Cache Enabler.

Увімкнути кешування браузера

У кеші браузера зберігаються копії, які проходять через нього. Кеш браузера може за певних умов відповідати на подальші запити на частину його копій, не вдаючись до оригінального веб-сервера. Прості рішення включають встановлення відповідного заголовка Expires, дати останньої зміни або прийняття тегів ET у заголовку HTTP. Наступний приклад .htaccess просить браузери кешувати зображення протягом місяця:

Вимкнути невикористані плагіни

Більшість плагінів додадуть код на ваш веб-сайт, наприклад додатковий CSS або JavaScript, навіть якщо ви не використовуєте його. Адміністратори WordPress можуть деактивувати плагіни з панелі керування WordPress або повністю видалити плагін, якщо впевнені, що він ніколи не використовуватиметься.

Видаліть непотрібні активи

Невже вашій темі потрібні п’ятнадцять шрифтів? Ви додали сім систем аналізу? Чи потрібен сторонній віджет? Чи потрібно розміщувати рекламу з п'ятдесяти рекламних мереж? Вам потрібна більше однієї бібліотеки JavaScript? Не могли б ви замінити анімацію JavaScript ефектами CSS3 ?

Видаліть все, що вам не потрібно.

Замініть кнопки соціальної мережі

Чи є на ваших сторінках кнопки спільного доступу Facebook, Twitter, Google+ та LinkedIn? Незважаючи на свій невинний вигляд, вони можуть додати кілька сотень кб сторонніх кодів JavaScript на вашу сторінку. Це заблокований ризик безпеки, який негативно впливає на продуктивність.

Код третьої сторони непотрібний, ви можете додати легкі соціальні кнопки на свої сторінки за допомогою декількох рядків HTML. Трохи JavaScript може покращити досвід використання спливаючих вікон або записування використання з відстеженням подій у Google Analytics.

Об’єднати та зменшити JavaScript та CSS

Під час розробки зручно розділяти файли JavaScript і CSS на окремі модулі. Однак їх слід об'єднати та звести до мінімуму, щоб видалити коментарі та пробіли перед розміщенням одного файлу на вашому сервері.

(Зверніть увагу, що ваш файл WordPress style.css повинен зберігати деталі теми вгорі, інакше він зламається!)

Зменште свої зображення

Зображення є основною причиною повільного веб-сайту. Видалення зображення із високою роздільною здатністю 500 кб може зменшити вагу та час завантаження на 25% або більше.

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

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

  • Використовуйте SVG для векторних логотипів
  • Використовуйте JPG для фотографій
  • Використовуйте PNG для всього іншого
  • Але розгляньте GIF для менших кольорових зображень або зображень з анімацією.

Існують альтернативні формати, такі як WebP, але небагато браузерів їх підтримують.

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

  • JPG - це формат схуднення, який видаляє деталі при вищому стисненні. Знайдіть найкращий компроміс між якістю та розміром файлу для кожного зображення.
  • PNG пропонує 256 та 24 бітові різновиди кольорів. Версія з 256 кольорами, як правило, дає менший файл.
  • І PNG, і GIF забезпечують прозорість. Видаліть, якщо потрібно, збережіть інші байти.

Зміна розміру великих растрових зображень

Базова камера або телефон робить знімок, занадто великий для відображення на будь-якому пристрої. WordPress пропонує параметри зміни розміру, але для найкращих результатів редактори повинні обрізати та змінити розмір перед завантаженням.

Розміри зображення ніколи не повинні перевищувати максимальний розмір пристрою. Ті, хто використовує дисплеї високої щільності/сітківки, можуть оцінити зображення з більшою роздільною здатністю, але ви можете використовувати альтернативні варіанти, використовуючи атрибут imgtagsrcset .

Зміна розміру зображень має великий вплив на вагу сторінки. Розміри, зменшені на 50%, зменшують загальну площу на 75%, що відповідно покращує розмір файлу.

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

Ви можете різко зменшити розмір растрового зображення, видаливши метадані, зменшивши глибину кольору та зменшивши коефіцієнти стиснення. Плагіни WordPress, такі як WP Smush, EWWW Image Optimizer, Imagify, Kraken Image Optimizer, ShortPixel Image Optimizer та CW Image Optimizer можуть впоратись із цим процесом.

Для найкращих результатів зображення слід обробити перед завантаженням. Ось декілька програм, за допомогою яких ви можете зменшити розмір і вагу зображення: OptiPNG, PNGOUT, jpegtran та jpegoptim. Користувачі Windows можуть спробувати казковий RIOT. Крім того, існують онлайн-інструменти, такі як TinyPNG/TinyJPG .

Уважно оцініть теми WordPress

Безкоштовні та комерційні теми WordPress можуть мати фінансовий сенс. Навіщо наймати розробника, коли тема робить усе необхідне за кілька доларів? Але остерігайтеся прихованих витрат. Ці тематичні моделі мають продаватися у тисячах примірників. Щоб залучити покупців, розробники об’єднують безліч функцій, які можуть вам ніколи не знадобитися.

Спростіть свій сайт

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

Змініть свій стиль розробки

Купівля теми забезпечує швидше налаштування та знижує витрати на розробку, але все це непотрібно, коли це призводить до повільного сайту, яким ніхто не хоче користуватися. Ваш клієнт/начальник може не розуміти технічних проблем, але вам потрібно пояснити наслідки для них.

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

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