Навигация по сайту

Популярные статьи

Увлекательный поход по Крыму

Мы предлагаем вам увлекательный поход по живописным местам горного Крыма, полюбоваться красотами каньонов и горных водопадов, послушать журчание горных рек и пение птиц, насладиться экзотическими пейзажами

Отдых в Карпатах

Активный отдых - это очень важная часть жизни абсолютно любого человека, который способен обогащать и закалять человека как напрямую физически, улучшая форму, так и духовно, психологически, морально,

Як збільшити швидкість завантаження сайту на WordPress

  1. важливість оптимізації Останнім часом все більше на слуху показник швидкості завантаження сайту....
  2. Точність показників Pagespeed Insights
  3. Робіть бекапи завчасно, а не після того як все втратили
  4. Вимірювання швидкості завантаження WordPress за допомогою онлайн сервісів
  5. Зменшіть вагу сторінки
  6. Видаліть зайвий код
  7. Знизьте кількість запитів
  8. Налаштування на стороні сервера для збільшення швидкості завантаження WordPress
  9. Оптимізація коду WordPress і запитів до бази даних
  10. Оптимізація за допомогою CDN і зниження навантаження на сервер
  11. Список допоміжних онлайн сервісів і їх призначення
  12. Залишити заявку на рішення проблем зі швидкістю завантаження сайту

важливість оптимізації

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

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

По-друге, пошуковики при індексуванні і ранжируванні сторінок у видачі, природно, теж прагнуть показати користувачеві кращі результати.

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

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

І якщо ви виконаєте запропоновані рекомендації, то зможете отримати високу оцінку за Pagespeed Insights. Але першочергове завдання, просто зробити сторінки візуально максимально швидкими.
до змісту ↑

Процес збільшення швидкості завантаження сайту

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

  1. Збір інформації - вимір поточної швидкості завантаження сайту
  2. Виділення критичних пунктів - ті чинники, які найбільше уповільнюють ваш сайт і дадуть вам найбільший результат
  3. Етап реалізації - ви приймаєте рішення зробити все самостійно або делегувати

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

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

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

Точність показників Pagespeed Insights

Коли люди звертаються до мене подивитися і виправити швидкість завантаження, дуже часто звертають особливу увагу показнику Google Pagespeed.

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

Якщо вас цікавлять подробиці, пошукайте в пошуку міфи про Google Pagespeed Insights.

Я ж особисто користуюся для вимірювання швидкості сервісом GTMetrix.com, а також консоллю браузера, тому що вони показують фактичну лінійну історію завантаження (waterfall).

Саме реальна оптимізація важлива для вас, ваших користувачів, і для просування сайту.
до змісту ↑

Робіть бекапи завчасно, а не після того як все втратили

Робіть бекапи перед будь-якими серйозними змінами!

А ще краще, скопіюйте ваш сайт на локальний сервер або в окремий субдомен на хостингу. Тестируйте зміни, і тільки потім переносите.

Візьміть в допомогу наступні статті:

Вже давно користуюся плагінами All in One WP Migration і Duplicator. Вони підтримуються в актуальному стані і протестовані мільйонами користувачів.

до змісту ↑

Вимірювання швидкості завантаження WordPress за допомогою онлайн сервісів

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

Я покажу вам як виміряти швидкість завантаження WordPress за допомогою трьох онлайн інструментів.

Через великий вміст довелося вивести в окрему статтю. Читайте тут - Онлайн інструменти для вимірювання швидкості.

У наступних розділах наведено основні рекомендації для збільшення швидкості завантаження сайту на WordPress.
до змісту ↑

Зменшіть вагу сторінки

В даний час сайти стають все більш динамічними, мультимедійними та барвистими. Але за все треба платити. Чим більше зображень, скриптів і плагінів, тим більше розмір сторінки, а потім тим довше вона вантажиться у користувача. Більш того, скрипти, плагіни і стилі гальмують не тільки завантаження, але також генерацію і відображення сторінки.

Текстові документи дуже добре стискаються, сюди входять HTML, CSS, JS, тобто основні ресурси вашого сайту, передають зміст, оформлення, функціонал. На сайті WordPress таких ресурсів велика кількість, тому ви можете буквально в кілька разів скоротити загальний розмір сторінки.

На хорошому хостингу стиснення включено за замовчуванням. Якщо це не так, вам доведеться записати кілька інструкцій в конфігураційний файл сервера .htaccess.

Ви можете взяти, наприклад, код звідси enable gzip compression via .htaccess .

Для хостингу nic.ru оптимізація трохи інша. Ось сама розумна і робоча стаття, яку мені вдалося знайти і я нею успішно користуюся. Включення стиснення і кешування на хостингу Ru-Center .

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

Далі.

  • Зменшіть розмір вихідного коду - скоротіть код HTML, JS і CSS. Для цих цілей я рекомендую використовувати плагін Autoptimize , Тому що він простий у використанні і досить функціональний.

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

Ну і.

  • «Лідерами» по складанню ваги для сторінки, безумовно є зображення.

Спробуйте скоротити їх число. Якщо картинка не несе ніякого смислового навантаження, бути може її варто видалити?

Максимально стисніть і оптимізуйте всі зображення. Про це я написав окрему статтю оптимізація зображень .

Ви також можете скористатися комп'ютерною програмою або тими сервісами, які я вказав в кінці сторінки.

Якщо у вашій медіабібліотеки вже завантажено велику кількість файлів, скористайтеся плагінами EWWW Image Optimizer або Robin Image Optimizer для пакетного стиснення. Обрізуйте дуже великі розміри фотографій до завантаження на хостинг.

Ще одна дуже часта проблема з зображеннями - масштабування в браузері.

Якщо ви використовуєте сервіс Gtmetrix, ймовірно ви помітили рядок Serve scaled images (в перекладі, віддавайте масштабовані зображення).

Що це означає? У темі використовується більший розмір зображення, ніж це необхідно. Воно скачується цілком, але стискається в браузері до необхідних для відображення розмірів. Це актуально для всіх екранів, не тільки для мобільних.

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

Потрібно перебудувати нові розміри всіх зображень за допомогою простого плагіна Regenerate Thumbnails.

Преміум теми і певні плагіни створюють власні набори розмірів зображень, тому керувати ними стає складніше. У цих випадках я часто користуюся плагіном Simple Image Sizes.

На сторінці Настройки -> Медіафайли він відображає всі зареєстровані розміри, дозволяє змінити їх (!), А також перегенеріровать для певних типів записів.

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

Тому приділіть особливу увагу графічним елементам вашого сайту - в більшості випадків щодо швидкості завантаження це вирішальний фактор.
до змісту ↑

Видаліть зайвий код

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

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

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

Знизьте кількість запитів

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

  • Об'єднайте скрипти і стилі, щоб скоротити число запитів, - плагін Autoptimize прекрасно з цим завданням справляється. Інформацію про налаштування цього плагіна дивіться на сторінці, яку я спеціально для цього написав - оптимізація завантаження скриптів і стилів .

Дуже часто настройка плагіна Autoptimize не вимагає технічних знань в роботі сайту.

Дуже часто настройка плагіна Autoptimize не вимагає технічних знань в роботі сайту

Як збільшити швидкість завантаження сайту на WordPress за допомогою Autoptimize

Якщо вам пощастить, ви можете просто відзначити Оптимізувати HTML, CSS і JS. Але так на жаль, відбувається не завжди. На сайтах з великим функціоналом і кількістю плагінів, на неправильно зверстаних сайтах або підключених ресурсах можуть виникати конфлікти, тому пишіть в коментарях або просто звертайтеся за допомогою.

  • Налаштуйте кеш браузера - встановіть терміни зберігання ресурсів і документів в клієнті користувача;

Знову ж таки, я виділив в окрему статтю .

Дивіться вище налаштування кешування для хостингу ru-center. Для більшості інших серверів досить додати наступний код в файл .htaccess.

приклад - Add Expires Header to WordPress .

  • Якщо у вашій темі багато дрібних зображень - спробуйте об'єднати їх в CSS спрайт .

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

Я успішно користувався безкоштовним онлайн сервісом для генерування спрайт картинки разом зі стилями - CSS Sprites Generator .
до змісту ↑

Налаштування на стороні сервера для збільшення швидкості завантаження WordPress

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

  • Не забувайте оновлювати код вашого сайту

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

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

Тому ще раз підкреслю.

Важливо! Тримайте код вашого сайту оновленим.

  • Увімкніть і налаштуйте кешування на сервері, створення статичних сторінок - ви можете використовувати популярний і простий плагін WP Super Cache або інші альтернативи.

Мені буде цікаво почути ваш досвід по плагинам кешування, пишіть в коментарях.
до змісту ↑

Оптимізація коду WordPress і запитів до бази даних

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

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

для більш докладного профілювання коду , Є зручна команда wp-cli profile, яка допомагає з пошуком повільного коду на різних стадіях завантаження.
до змісту ↑

Оптимізація за допомогою CDN і зниження навантаження на сервер

На своєму сайті я використовую безкоштовний план Cloudflare.

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

Популярні CDN пропонують велику кількість можливостей для контролю трафіку, захисту, і збільшення продуктивності.

Список допоміжних онлайн сервісів і їх призначення

Різні онлайн інструменти, які вам знадобляться в процесі прискорення сайту.

  • Аналіз швидкості вашого сайту.
  • Стиснених, редагування, кадрування та конвертування зображень
    • Kraken.io Web Interface - Зменшення розміру зображень
    • Compressor.io - ще один інструмент стиснення без втрат
    • PicResize - кадрувати, повернути, і змінити розмір зображення
    • WebResizer - Змінити розмір онлайн
  • CSS, HTML, JS Minifier
    • HTML Minifier - Скорочення розміру HTML, включаючи стилі і скрипти, присутні в розмітці.
    • CSS Minifier - Скорочення розміру каскадних стилів
    • JSCompress - Стиснення скриптів і файлів JS
    • UnMinify - зворотний процес, приведення стисненого коду в читаний вигляд.

до змісту ↑

Залишити заявку на рішення проблем зі швидкістю завантаження сайту

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

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

схоже

Чи зможете ви домогтися стовідсоткового рівня продуктивності і гарантувати стабільність цього результату?
Якщо картинка не несе ніякого смислового навантаження, бути може її варто видалити?
Що це означає?
Ретельно обміркуйте цінність, яку вам несе кожен з них, - чи можете ви замінити їх функціонал, або взагалі відмовитися?