Як виправити веб-сайт з повільним елементом: 16 оптимізацій, які допомогли мені отримати 100% швидкість перегляду сторінок та миттєве завантаження на моєму сайті

Елементор каже, що це найшвидший розробник сторінки для WordPress.


Отже, що викликає повільне завантаження веб-сайту?

Зазвичай є кілька простих налаштувань, які можуть значно покращити час завантаження та бали GTmetrix. Елементтор каже найпоширенішими причинами повільного веб-сайту WordPress є сервери, медіа, зовнішні скрипти (наприклад, Google Fonts), плагіни, відсутність CDN та використання посереднього плагіну кешу. Однак вони не вкладаються дуже детально в перелік покрокових інструкцій.

Ось чому я написав цей підручник.

Ви дізнаєтесь, як виправити ваш повільний сайт Elementor, дотримуючись ключових рекомендацій з посібника з оптимізації WordPress та рекомендацій Elementor. Я надам скріншоти, детальні інструкції та відповім на всі коментарі, якщо вам все-таки потрібна допомога. Мені вдалося отримати 100% балів GTmetrix на своїй домашній сторінці. Навіть публікації зі 100+ зображеннями та 400+ коментарями (розмір сторінки 5 МБ та 170 запитів) все ще завантажуються <2с. Так, я бореться зі швидкістю WordPress :)

Оптимізація швидкості елемента

Contents

1. Оновлення до PHP 7.4

Багато хостингових компаній вже випустили PHP 7.4.

Оновлення версій PHP – це один із найпростіших способів пришвидшити ваш сайт Elementor. Кінста Тести PHP показує, як більш високі версії PHP можуть працювати в 2-3 рази швидше. Елемент або також рекомендує більш високі версії PHP та збільшити ліміт пам’яті до 256 Мб (див. наступний крок).

Спочатку перевірте свою поточну версію PHP в Elementor > Інформація про систему.

Версія для елемента PHP

Далі увійдіть у свій обліковий запис хостингу, знайдіть менеджер версій PHP (або подібний) та виберіть більш високу версію PHP. Також добре заздалегідь взяти резервну копію. Інакше це все!

Kinsta PHP 7.4

Важливо: переконайтесь, що ваші плагіни сумісні з більш високими версіями PHP. Я використовував WP Rich Snippets (який більше не підтримується), але він був несумісний з PHP 7.2+, тому я видалив плагін і знайшов заміну. Не варто зберігати плагіни, що не підтримуються.

2. Збільшити ліміт пам’яті до 256 Мб

Знову перевірте обмеження пам’яті в Elementor > Інформація про систему.

І Elementor, WordPress, і WooCommerce рекомендуємо ліміт пам’яті 256 Мб.

Елемент або Обмеження пам’яті

Зазвичай ви можете змінити ліміт пам’яті у своєму обліковому записі хостингу:

Обмеження пам’яті

В іншому випадку додайте цей код до function.php.

визначити (“WP_MEMORY_LIMIT”, “256M”);

3. Використовуйте самостійні шрифти

Якщо шрифти Google видають ваш звіт GTmetrix, спробуйте розмістити шрифти локально.

Якщо у вас є Elementor Pro, ви хочете використовувати спеціальні шрифти (знайдені в налаштуваннях).

Ось Підручник YouTube.

Elementor користувацькі шрифти

У вас немає Elementor Pro?

Багато плагінів можуть допомогти оптимізувати шрифти Google: WP Rocket, Автоматично оптимізувати, Самостійні розміщені шрифти Google, OMGF та очищення активів. Якщо ви не хочете використовувати плагін, дотримуйтесь цих інструкцій.

Крок 1: Підтвердьте, що шрифти сповільнюють ваш сайт Elementor в GTmetrix.

Google Шрифти GTmetrix

Крок 2: Завантажте свої шрифти безпосередньо з веб-сайту Google Fonts. Завантажуйте лише необхідні шрифти та ваги шрифтів (більше шрифтів і ваг також може означати більше запитів).

Крок 3: Використовуйте такий інструмент, як Трансфонтер конвертувати їх у файли веб-шрифтів.

Transfonter-Google-Font-Conversion

Крок 4: Завантажте нові файли веб-шрифтів у WordPress та додайте їх у свій CSS.

Крок 5: Протестуйте шрифти, додайте помилку за замовчуванням та завжди майте резервні шрифти.

4. Оптимізуйте запити сторонніх осіб

Так само, як Google Шрифти – це запит третьої сторони, так це AdSense, Analytics, Карти, Менеджер тегів, вбудовані відеоролики і навіть Граватари або плагіни соціального доступу можуть викликати запити сторонніх.

Ви також повинні їх оптимізувати.

Зовнішні сценарії

Деякі запити сторонніх сторін легко оптимізувати:

WP Rocket має вкладку Додатки, яка може допомогти провести аналітику на місцевому рівні і додати кешування браузера до Facebook Pixel. Налаштування медіа WAP Rocket дозволяють вам ледаче завантажувати відео, замінюючи iframe на попередній образ. Якщо ви вставляєте публікації з соціальних медіа, спробуйте зробити знімок екрана та використати зображення замість цього. Умовне завантаження Disqus, відстрочка розбору JavaScript у налаштуваннях додатка кешу та вибіркове відключення скриптів / плагінів у програмі «Очищення активів» можуть допомогти оптимізувати сценарії.

Локальна аналітика WP Rocket

Інші запити третіх сторін оптимізувати не так просто:

Google AdSense може бути вбивцею GTmetrix. Крім завантаження його асинхронно, ви можете зробити мало. Я також не знайшов рішення змусити завантажувати Gravatars швидше, і я спробував усі плагіни кеша Gravatar (тому я їх відключив). Менеджер тегів Google зазвичай використовується лише для великих неоптимізованих сайтів Elementor, інакше це зазвичай приносить більше шкоди, ніж користі.

5. Уникайте високих плагінів процесора

Деякі плагіни, від яких ви просто повинні триматися подалі.

Високі плагіни процесора, які сповільнюють сайти Elementor, зазвичай мають відношення до статистики, резервного копіювання, спільного доступу до соціальних мереж, портфоліо, чату в реальному часі, контактних форм, слайдерів, JetPack та будь-якого плагіна, який постійно потрібен для роботи на вашому веб-сайті (подумайте, Broken Link Триває сканування перевірки).

  1. Додайте це
  2. Моніторинг шахрайства щодо натискань AdSense
  3. Календар подій “все в одному”
  4. Резервний приятель
  5. Бівер будівельник
  6. Краще WordPress Google XML мапи сайту
  7. Перевірка зламаної посилання (використовуйте доктор перевірка посилання)
  8. Постійний контакт для WordPress
  9. Контактна форма 7
  10. Контекстуально пов’язані повідомлення
  11. Digi Auto Links
  12. Система коментарів Disqus
  13. Divi Builder
  14. Основна сітка
  15. Переглянути повний список із 65 повільних плагінів

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

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

Активність CleanUp і Perfmatters чудово підходить для вибіркове відключення плагінів, сценарії та стилі.

Найпоширеніший приклад – це лише завантаження плагіна вашої контактної форми на сторінку контактів та вимкнення її скрізь. Але чи задумалися ви вимкнути плагін соціального доступу на своїх сторінках (оскільки більшість людей користується ним лише у публікаціях)? Або вимкнути повзунок на сторінках, де немає повзунків? Через вибіркове відключення ви можете робити менше HTTP-запитів на сторінках.

Крок 1: Встановіть очищення активів або Perfmatters.

Плагін Asset CleanUp

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

Крок 3: Вимкнення (вивантаження) плагінів, скриптів та стилів, які не використовуються на сторінці. Ви також можете відключити його за типом публікації, або Asset CleanUp Premium (а також Perfmatters) дозволяє використовувати RegEx.

Очищення активів Перевірте все

7. Вимкніть сценарії, стилі та фрагменти кошика WooCommerce

Так само, як ви вибірково відключили плагіни на попередньому кроці, ви можете використовувати Perfmatters та Asset CleanUp, щоб зробити те ж саме із сценаріями, стилями та фрагментами кошика WooCommerce..

Актив CleanUp WooCommerce

Perfmatters насправді дозволяє вам це робити 1-клік:

оптимізація зовнішньої комерції

8. Переключити спосіб завантаження редактора в елемент

Елементтор каже:

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

Ви можете знайти це під Elementor > Налаштування > Розширений > Навантажувач редактора.

Метод навантажувача редактора комутаторів елемента

9. Змініть розмір зображення до правильних розмірів

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

Подавати масштабовані зображення

В іншому випадку ви побачите помилки розміщених масштабів зображень у GTmetrix. Якщо ви бачите будь-які, візьміть рекомендовані розміри GTmetrix та змініть розмір зображення до цих розмірів, а потім замініть зображення. Я рекомендую створити “шпаргалку щодо розмірності зображення”, в якій перераховані розміри всіх областей вашого веб-сайту (повзунки, пропоновані зображення, зображення блогу повної ширини, логотип). Таким чином, ви можете змінити розмір зображення до правильних розмірів перед завантаженням.

10. Розміщення хостів та оновлення до хмар

Мати повільний час відповіді сервера?

Запустіть свій сайт за допомогою Google PageSpeed ​​Insights і переконайтеся, що це <200 м, як рекомендує Google. Ваш сервер (хостинг) – це Фактор №1 в посібнику з оптимізації WordPress.

Зазвичай я рекомендую SiteGround (спільний хостинг), що добре, якщо у вас мало трафіку та плагінів. Але як тільки ви перейдете на хмарний хостинг (наприклад,. Cloudways DigitalOcean), різниця – ніч і день. Я перейшов з SiteGround на Cloudways, і час завантаження скоротився навпіл. Навіть публікації зі 100+ зображеннями та 400+ коментарями (розмір сторінки 5 МБ, 170 запитів) все ще завантажуються менше ніж за 2 секунди.

Хостинг елементів

SiteGround-vs-Cloudways-Cloud-хостинг

GTmetrix-звіт-на довго-пост

Досвід інших людей із Cloudways:

Часи реагування на Cloudways

WP двигун до Cloudways

Звіт про DigitalOcean Pingdom

Часи відгуку сервера Cloudways

Поліпшення часу завантаження хмарних шляхів

Cloudways vs WP Engine

Без назви

Часи завантаження Pingdom у хмарочосах

Звіт Pingdom про хмарні шляхи

Назвіть назву на міграцію хмарних шляхів

Міграція Cloudways WooCommerce

Міграція AWS Cloudways

Вони також були №1 у багатьох опитуваннях у Facebook і чудово Огляди TrustPilot:

Рекомендації щодо хостингу Facebook

VPS хмарний хостинг WooCommerce опитування

Опитування хмарного хостингу VPS

Пропозиції щодо хостингу WordPress

Cloudways-Facebook-огляд

Cloudways Facebook Огляд

Cloudways vs SiteGround

Нижня лінія: спільний хостинг – це добре, якщо ви не використовуєте WooCommcerce, AdSense, високі плагіни CPU або не маєте пристойного трафіку. Але як тільки у вас є одна з таких, загляньте у хмарний хостинг. Так, я є партнером Хмарні доріжки), але є багато інших людей, які мігрували та опублікували свої результати. Код OMM25 дасть вам 25% знижки на перші два місяці хостингу на Cloudways.

11. Плагіни без кеш-пам’яті та використання ракети WP

Чому WP Rocket зазвичай №1 у опитуваннях у Facebook?

Оскільки він має більш швидкісні функції, ніж більшість інших плагінів кешу (очищення бази даних, локальна аналітика, поєднання Google Fonts, ледача завантаження зображень + відео, інтеграція CDN + Cloudflare, контроль серцебиття, кешування WebP, попереднє завантаження, кешування браузера Facebook Pixel).

Ось чому WP Rocket дає кращі показники + час завантаження в GTmetrix і означає менше плагінів на вашому сайті Elementor. Він завжди оновлюється новими функціями та підтримується надійною командою.

Тож якщо ви все ще використовуєте WP Fastest Cache або W3 Total Cache, вам справді слід дати йому крутити.

Опитування найкращих плагінів кешу 2016 року

Опитування плагінів кешу 2019 року

Свіфт проти ракети WP

Опитування плагінів кешу 2016 року

Опитування найкращих плагінів кешу 2018 року

wp racket vs w3 totla cache

Ви побачите різницю:

Ракета WP до після

12. Очистіть свою базу даних

Ви плануєте поточне очищення бази даних?

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

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

WP-оптимізуйте чисту базу даних

13. Використовуйте CDN Cloudflare

Використання Cloudflare не є мозком.

Це безкоштовно, має понад 200+ центрів обробки даних, і є CDN рекомендований WordPress.

Cloudflare логотип

Деякі хости, як SiteGround, дозволяють вам активувати Cloudflare на панелі приладів. В іншому випадку підпишіться на безкоштовний план Cloudflare, увійдіть до реєстратора домену та перейдіть на сервери імен Cloudflare.

На приладовій панелі є кілька налаштувань, які слід врахувати:

  • Швидкість: включити Brotli та Rocket Loader
  • Скребковий щит: включити захист гарячої лінії
  • Брандмауер: блокувати поганих ботів із звіту про трафік Wordfence
  • Правила сторінки: Cloudflare має багато правила сторінки для швидкості, безпеки, сумісності

14. Використовуйте легку тему

Час історій.

Я використовував тему ThemeForest, яку забув розробник (ризик, який ви берете на себе, купуючи тему від незалежного розробника, навіть якщо вона має хороші відгуки). У мене також були кошмари, коли купували роздуті теми для клієнтів, які зробили їх сайт WordPress повільним.

Я маю на увазі, якщо все вбудоване робить це набагато простіше, правда?

Ні! Ви хочете вибрати легку тему, яка мінімальна і добре закодована, а потім покладатися на плагіни, щоб лише додати потрібні функції. Оптимізація теми важче, ніж видалення плагіна.

Більшість із вас, сподіваємось, використовують теми Astra, Flatsome або StudioPress, які є основними, які я рекомендую.

15. Знайдіть вузькі місця в GTmetrix

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

Час до першого байти

Час до першого байти

Неоптимізовані зображення

Оптимізація зображень у GTmetrix

Повільні плагіни

Повільний плагін WordPress

16. Завершіть останні 10% швидкості за допомогою Perfmatters

Perfmatters (від Kinsta) піклується про те, що я люблю називати різні оптимізації швидкості:

особливості парфметтера

Деякі з них надзвичайно корисні; менеджер сценаріїв, який дозволяє вибірково відключати плагіни / скрипти з певних сторінок, змінюючи інтервал автоматичного збереження, обмежуючи редагування публікацій, попереднє підключення та відключення сценаріїв, стилів та фрагментів кошика WooCommerce. Що стосується цих оптимізацій, я не знаю жодного плагіна, який би робив кращу роботу, ніж Perfmatters.

Що ти очікуєш, це Kinsta Звичайно, це чудовий плагін.

Часті запитання

&# x1f680; Які найпоширеніші причини для повільного сайту Elementor?

Якщо не використовувати хороший плагін кешу, не налаштувати налаштування кеша, оптимальне хостинг, неоптимізовані зображення, використання шрифтів Google та зовнішніх скриптів, високі плагіни процесора та не використання CDN – одні з найпоширеніших причин повільного веб-сайту Elementor.

&# x1f680; Що я можу зробити, щоб прискорити Elementor?

Використовуйте спеціальну опцію Elementor для зменшення кількості запитів від Google Fonts або Font Awesome. Ви також можете вибірково відключити невикористані функції Elementor на сторінках / публікаціях, використовуючи плагін на зразок Asset CleanUp або Perfmatters від Kinsta. Решта – це загальна оптимізація швидкості, яка не має нічого спільного з Elementor.

&# x1f680; Як використовувати спеціальні шрифти, щоб вони швидше завантажувались?

Для цього вам знадобиться обліковий запис Elementor Pro. Завантажте файли шрифтів (наприклад, із Google Fonts) та завантажте їх у розділ користувальницьких шрифтів Elementor.

&# x1f680; Елементтор сповільнює роботу мого сайту?

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

&# x1f680; Який хостинг рекомендується для сайтів Elementor?

У популярній Facebook Elementor Facebook Group, SiteGround та Cloudways зазвичай є топ-2-рейтинговими хостами, взятими на опитування у Facebook.

Все-таки є сайт з повільним елементом?

Я скажу так: Cloudways і WP Rocket повинні виправити 80% ваших проблем. Хостинг та ваш кеш-плагін – це найбільші фактори в посібнику з оптимізації WordPress. Але якщо ваш сайт Elementor все ще повільний, залиште мені коментар із вашим звітом GTmetrix, і я радий поглянути. Наша команда також пропонує швидкісні послуги WordPress з до + після звітів GTmetrix.

Ура,
Том

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map