Як правильно оптимізувати сайти на WordPress

  1. Особливості оптимізації WordPress
  2. користуйтеся кешуванням
  3. Зробіть поступову завантаження
  4. Об'єднайте стилі і скрипти
  5. вимкніть хотлінкінг
  6. Оптимізуйте базу даних
  7. Користуйтеся тільки перевіреними темами
  8. Видаліть всі непотрібні плагіни
  9. Підключіть CDN

Чим повільніше сайт, тим менше людей готові ним користуватися. А чим менше користувачів - тим менше трафіку і конверсій. Все це показують дослідження Amazon , Walmart , Akamai і Aberdeen Group .

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

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

Особливості оптимізації WordPress

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

користуйтеся кешуванням

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

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

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

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

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

Кращий плагін для кешування і суперкешірованія - WP Super Cache . Він автоматично визначає, які елементи сторінки варто кешувати і який метод для цього краще використовувати.

Ось настройки WP Super Cache, які я використовую на своєму сайті:

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

Зробіть поступову завантаження

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

Рішення - поступова (або «лінива») завантаження. В цьому випадку браузер швидко завантажує тільки ті елементи сторінки, які будуть видні користувачеві прямо зараз. Все інше подгружается у міру потреби. І хоча загальний час завантаження сторінки стає трохи довше, користувач бачить сторінку відразу ж, а не чекає, поки завантажаться картинки в самому низу сторінки.

Для включення поступової завантаження потрібен спеціальний плагін Rocket Lazy Load. Просто встановіть, увімкніть її і поставте дві галочки в налаштуваннях.

Просто встановіть, увімкніть її і поставте дві галочки в налаштуваннях

Галочки, які потрібно поставити в настройках Rocket Lazy Load.

Об'єднайте стилі і скрипти

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

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

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

Я для таких цілей використовую Merge + Minify + Refresh. Цей плагін автоматично перевіряє всі сторінки на вашому сайті і об'єднує скрипти і стилі.

В плагіні є кілька цікавих налаштувань, але якщо ви не розбираєтеся в принципах роботи HTTP і налаштуваннях вашого хостингу - краще їх не міняти. Просто встановіть і активуйте плагін, все інше він зробить сам.

вимкніть хотлінкінг

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

<Img src = "image.jpg" height = "1080" width = "1920">

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

<Img src = "http://somebodyswebsite.com/image.jpg" height = "1080" width = "1920">

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

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

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

Для захисту свого сайту від неетичної поведінки, я використовую All-In-One WP Security and Firewall . Це легкий, але багатофункціональний плагін, який захищає від брутфорс-атак, допомагає убезпечити акаунти користувачів, блокує з'єднання з уже відомими хакерами і захищає від хотлінкінга.

У налаштуваннях All-In-One WP Security and Firewall , Захист від хотлінкінга включається в Файрвол> Запобігти хотлінк:

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

Оптимізуйте базу даних

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

Але є проблема. База даних WordPress зростає з часом і заповнюється сміттям. А чим більше база даних - тим повільніше працює сайт.

Я вирішую цю проблему за допомогою плагіна Advanced Database Cleaner . Цей плагін видаляє:

  1. Старі ревізії і чернетки постів.
  2. Несхвалені коментарі, спам-коментарі і коментарі в кошику.
  3. Невикористані теги і метадані - наприклад, від віддалених постів або коментів.

Найбільше мені подобається можливість запланувати очищення:

І оптимізацію: І оптимізацію:

Платна версія ще вміє видаляти «сміттєві» значення, що залишилися від вже видалених плагінів і тем. Але я і так дуже обережно ставлюся до плагінів і не встановлюю нічого, що мені не потрібно.

Користуйтеся тільки перевіреними темами

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

У мене є два правила при підборі теми для сайту:

  1. Бійтеся тим від новачків. У WordPress немає «захисту від дурня». Тобто ніщо не заважає автору теми використовувати повнорозмірні зображення замість CSS-елементів, вставляти скрипти прямо в код теми і просто забути про оптимізацію свого творіння. Перед вибором теми, я не тільки дивлюся на скріншоти, а й читаю відгуки. І якщо інші користувачі незадоволені швидкістю роботи теми - я краще пройду повз.
  2. Не йдіть на поводу у витребеньок. Будь-яка гарна анімація цікава тільки перші рази два. Потім користувачам стає все одно, як саме у вас розкривається меню - вони ж на сайт прийшли за контентом, а не на меню дивитися.

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

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

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

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

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

Перевірити, наскільки сильно плагін уповільнює завантаження сайту, можна за допомогою Plugin Performance Profiler .

Підключіть CDN

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

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

Найпопулярніша CDN - CloudFlare. Її огляд, а також інструкцію з підключення до WordPress, можна прочитати в статті « Що таке Cloudflare і як воно прискорює завантаження сайту ».

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