Ідеальний параметр автоматичної оптимізації + Cloudflare / StackPath CDN (2020)

Автоматично оптимізувати є чудовим плагіном, але для кешування WP Rocket зазвичай є №1 у опитуваннях у Facebook.


То чому б ти цим користувався?

Бо деяким господарям подобається GoDaddy і WP двигун чорний список більшості плагінів кеш-пам’яті (оскільки вони мають власну вбудовану систему кешування), але вони не роблять таких дій, як оптимізація HTML, CSS, JavaScript, Google Fonts або CDN (мережа доставки вмісту). Отже, хоча система кешування вашого хоста може працювати добре для кешування, функція Autoptimize допомагає робити “відпочинок” від матеріалів (виправлення елементів у GTmetrix + Pingdom). Уникайте даних Google PageSpeed ​​Speed, як ніколи навіть не вимірює час завантаження.

Навіть розробник автоматичного оптимізації каже на своїй сторінці плагінів, що він найкраще працює в поєднанні з плагіном кешу. Я рекомендую Swift, якщо ви їдете по безкоштовному маршруту, і Ракета WP якщо ви можете робити $ 49 на рік, оскільки це простіше в налаштуванні (це також те, що я використовую, і у мене є 100% балів у GTmetrix), оскільки він має багато функцій, більшість плагінів кеша не роблять (очищення бази даних, розміщення коду Google Analyitcs локально, серцебиття управління та інтеграція з обома Cloudflare + іншими CDN). У мене є навчальні посібники для WP Rocket, Швидкий, WP найшвидший кеш, W3TC і навіть WP Super Cache.

Тож давайте налаштуємо параметри автоматичного оптимізації. Я також покажу вам, як додати CDN (в ідеалі обидва Хмара і StackPath), оскільки кожен має свій набір центрів обробки даних, і більше центрів обробки даних = швидша доставка контенту. CDN рекомендуються в Посібник з оптимізації WordPress.

Автоматично оптимізувати плагін

1. JS, CSS, & HTML

Увімкніть усе це для оптимізації файлів JavaScript, CSS та HTML, а потім перегляньте інструкції нижче.

Автоматизовано налаштування JS CSS HTML

Оптимізуйте JavaScript-код

  • Сукупність JS-файлів: enable, це поєднує файли JavaScript, як рекомендує GTmetrix. Якщо вимкнено, окремі файли завантажуватимуться, і вони не поєднуються.
  • Також об’єднайте вбудований JS: enable, це поєднує файли JavaScript, які знаходяться у файлах HTML. Автоматичне налаштування дає попередження, яке в основному означає, що воно порушує щось на вашому веб-сайті, або виключайте файли JavaScript або вимикайте це.
  • Примусовий JavaScript у : відключити, якщо у вас немає помилок JavaScript. Вам краще спробувати знайти проблемні файли та виключити їх, ніж вибирати цю опцію, оскільки це робить блокування JavaScript-рендерінгу (не оптимальне для швидкості).
  • Виключіть сценарії з автоматичного оптимізації: якщо після ввімкнення певних налаштувань JavaScript з’являються помилки, знайдіть проблемний JavaScript і виключіть тут файли.
  • Додайте пробну упаковку: відключити, якщо у вас немає помилок JavaScript. Це ще один спосіб виправити помилки JS без необхідності вмикати JavaScript в голові.

Оптимізуйте CSS-код

  • Сукупність CSS-файлів: enable, те саме, що й агрегування JS-файлів лише для CSS.
  • Також агрегуйте вбудований CSS: enable, те саме, що агрегувати вбудовані JS-файли лише для CSS. Увімкніть обидва для подальшого покращення часу завантаження + балів GTmetrix.
  • Створення даних: URI для зображень: відключити, якщо використовується CDN. MaxCDN (StackPath) попереджає вас що ввімкнення цього змусить подавати зображення замість вашого CDN. Увімкнення цього спочатку може призвести до меншої кількості запитів HTTP, але, швидше за все, після встановлення CDN та подання зображень через нього.
  • Вбудований і відкладений CSS: enable, ви можете ввімкнути лише цей параметр або “вбудувати всі CSS”, що автоматичне оптимізація не рекомендує у своїх поширених запитаннях. Вони кажуть, що “якщо вбудовування всіх CSS зробить блокування CSS не візуалізованим, це призведе до того, що ваша базова HTML-сторінка стає значно більшою, що вимагає більше” переходів “.
  • Вбудовані всі CSS: вимкнено, автоматичне оптимізація не рекомендує це вмикати.
  • Виключіть CSS з автоматичного оптимізації: якщо після ввімкнення певних налаштувань CSS з’являються помилки, знайдіть проблемні файли CSS та виключіть їх тут. Примітка. Параметр «мінімізувати виключені CSS та JS» у параметрі Різне необхідно відключити.

2. Параметри CDN

Це де ваша CDN URL йде (інструкції нижче). Cloudflare не надає вам адресу CDN (замість цього ви зміните сервери імен). Базова URL-адреса CDN спеціально для StackPath, KeyCDN та інших CDN – не Cloudflare. Я пропоную використовувати як StackPath + Cloudflare, оскільки ваші CDN матимуть більше центрів обробки даних, а більше центрів обробки даних = швидший веб-сайт.

Крок 1: Підпишіться на CDN. Я використовую StackPath, який має 34+ центри обробки даних, які знаходяться в Сполучених Штатах, і де більшість моїх відвідувачів. Це 10 доларів на місяць із безкоштовним 30-денним пробним періодом.

StackPath-Центри даних

Крок 2: На інформаційній панелі StackPath натисніть вкладку CDN та створити CDN-сайт StackPath.

StackPath-CDN-Tab

StackPath-CDN-домен

StackPath-сервер-IP-адреса

* Скопіюйте IP-адресу вашого сервера, як це потрібно на кроці 5 цього розділу.

StackPath-CDN-URL-Автоматичне оптимізація

Крок 3: Вставте URL-адресу CDN в автоматичну оптимізацію за допомогою http: // або https: // (що б ви не використовували).

Автоматично оптимізувати URL-адресу CDN

Крок 4: У StackPath перейдіть до CDN → Налаштування кешу, потім натисніть «Очистити все».

StackPath-Purge-Cache

Крок 5: Додайте до списку IP-адресу вашого сервера в StackPath (WAF → Брандмауер).

StackPath-Whitelist-IP

Крок 6: Запустіть свій сайт у GTmetrix, а «мережа доставки вмісту» повинна бути зеленою в YSlow.

CDN GTmetrix YSlow

3. Різні налаштування

Ось налаштування Різне:

Автоматично налаштувати різні налаштування

Збережіть зведений скрипт / css як статичні файли – якщо це ввімкнено, це означає, що файли CSS та JS зберігаються в кеш-пам’яті та подаються через ваш сервер, тому якщо ваш хостинг не справляється з цим, увімкніть його.

Мінімізуйте виключені файли CSS та JS – якщо ви виключаєте певні файли CSS та JavaScript, це тому, що виникає проблема при спробі їх оптимізації, і ви не хочете, щоб вони були мінімізовані.

Також оптимізуйте для входу в систему редактори / адміністратори – відключити, зазвичай ви хочете відключити функції продуктивності в адміністраторі WordPress, включаючи функції продуктивності Cloudflare.

4. Налаштування зображень

Автоматичне оптимізація також може допомогти швидше завантажувати зображення.

Автоматично налаштувати параметри зображень

Оптимізуйте зображення – URL-адреси вашого веб-сайту будуть змінені на вказівки CDN ShortPixel. Це не повинно впливати на те, як вони виглядають до тих пір, поки стискається без втрат, але вони завантажуватимуться швидше.

Якість оптимізації зображень – знайти власний унікальний баланс між стисненням та якістю (я використовую Glossy). Ось відмінності кожного рівня стиснення від ShortPixel:

Рівні стиснення зображення ShortPixel

  • Втрачений: найбільше стиснення, найбільша втрата якості.
  • Глянцевий: середнє стиснення, невеликі втрати якості.
  • Без втрат: низька компресія, найнижчі втрати якості.

Завантажте WebP у підтримуваних браузерах – увімкнено, якщо ви використовуєте зображення WebP та зображення з ледачим завантаженням.

Ледачі завантаження зображень – Я особисто не лінуюся завантажувати свої зображення, тому що постійне завантаження зображень під час прокручування сторінки може дратувати користувачів. Так, це призводить до меншої кількості запитів і є рекомендовано Google для швидшого завантаження, але мені це дратує. Це повністю залежить від вас.

5. Критичний CSS

Це стосується Автоматично оптимізуйте плагін живлення kriticss.com.

Це вимагає премії платний план відkriticss.com ($ 7 / місяць).

Плагін створює критичні правила CSS, щоб переконатися, що сторінки відображаються перед завантаженням повного CSS, покращуючи “час початку візуалізації”. Все, що вам потрібно зробити, – це встановити плагін, підписатися на план, ввести свій критичний CSS API ключ у розділ “Критичний CSS” Автоматично оптимізувати, а плагін зробить все інше. Перевірте плагін Сторінка FAQ для детальної інформації про власні конфігурації.

Я особисто не користуюсь цим, і скоріше використовую додаткові $ 7 на місяць на більш потужному сервері.

Автоматично оптимізувати критичне включення

Автоматично налаштувати критичні налаштування CSS

6. Додаткові налаштування

Автоматично налаштувати додаткові налаштування

Google Шрифти – увімкнути, якщо використовується Google Шрифти які сповільнюють завантаження, коли вони витягуються із зовнішніх ресурсів (бібліотека шрифтів Google). Я вважаю за краще опцію “комбінувати та посилати в голові”, оскільки це покращує час завантаження без видимості, бачачи завантаження шрифтів (саме це зазвичай відбувається при завантаженні асинхронно. Також тестую останню опцію Google Font “комбінувати та завантажувати шрифти асинхронно з webfont.jsІ подивіться, що дає кращі результати в GTmetrix.

Видаліть Emojis – включити (смайлики погані для завантаження).

Видаліть рядки запитів із статичних ресурсів – рядки запитів зазвичай генеруються плагінами і не можуть бути виправлені (у GTmetrix / Pingdom), просто ввімкнувши це, але ви можете спробувати. Краще рішення – перевірити свій сайт на наявність плагінів із високим процесором та замінити їх легкими плагінами. Більшість плагінів центрального процесора включають спільний доступ до соціальних мереж, галерею, розробників сторінок, пов’язані публікації, статистику та чати в реальному чаті. Ви також повинні видалити всі непотрібні плагіни та очистити базу даних (використовуючи подібний плагін WP-оптимізація) для очищення таблиць, залишених видаленими плагінами.

Попередньо підключіться до сторонніх доменів – допомагає браузерам передбачати запити із зовнішніх ресурсів (Google Fonts, Analytics, Maps, Менеджер тегів, Amazon store тощо). Вони, як правило, відображатимуться як “зменшення пошуку DNS” у вашому звіті GTmetrix, але нижче наведені поширені приклади.

  • https://fonts.googleapis.com
  • https://fonts.gstatic.com
  • https://www.google-analytics.com
  • https://ajax.googleapis.com
  • https://connect.facebook.net
  • https://www.googletagmanager.com
  • https://maps.google.com

Попередньо завантажте конкретні запити – ви можете дізнатися більше про попереднє завантаження та підказки щодо ресурсів браузера від WP Rocket, але це в основному робить це тим, що певні файли завантажуються як найвищий пріоритет.

Асинхронізація файлів Javascript – це означає, що щось перешкоджає швидкому завантаженню вмісту, розміщеного вище. Цей підручник про візуалізація блокує JavaScripts це добре пояснює, але якщо ви бачите помилки JavaScript у GTmetrix та Pingdom, то Асинхронний плагін JavaScipt може зробити трюк.

Оптимізуйте відео YouTube – якщо на вашому сайті є відео, WP YouTube Lyte ледачий завантажує їх, тому вони завантажуються лише тоді, коли користувачі прокручують вниз і натискають кнопку відтворення, тим самим усуваючи початкові запити на сервери YouTube. Це може голити декілька секунд, коли вони завантажують вміст відео, оскільки вони є одним із найважчих елементів на сторінці. WP Rocket і Swift Performance мають вбудовані настройки, тому вам це не потрібно, якщо ви використовуєте один із них як свій плагін кешу.

7. Оптимізуйте докладніше

Якщо ви хочете додатково оптимізувати свій сайт, ось такі інструменти рекомендують:

Ракета WP – оцінював плагін №1 кеша на кількох опитуваннях у Facebook і має багато варіантів, не включених до автоматичного оптимізації (очищення бази даних, контроль серцебиття, локальне розміщення Google Analytics, заміна iframe YouTube на зображення попереднього перегляду, додавання кеша браузера на Facebook Pixel тощо). WP Rocket також обробляє майже все, що робить Autoptimize, тому для всіх цих оптимізацій швидкості вам потрібен лише 1 плагін. Ось чому це так здорово Ви також можете отримати 10% знижки тут.

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

StackPath – CDN з 30+ центрами обробки даних. Дуже простий у налаштуванні; просто підпишіться на план ($ 10 на місяць), а потім скопіюйте / вставте свою CDN URL в параметр Autoptimize CDN URL..

SiteGround – зазвичай оцінювали № 1 господаря в опитуваннях у Facebook, а також використовується Йоастом.

Yoast-on-Twitter - Ми просто перейшли на сайт

2019 опитування

2017-WordPress-хостинг-FB-опитування

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

Липень 2019 року

WordPress-хост-опитування-серпень-2018

Спільний хостинг-опитування-2017

2019-хостинг-опитування

Компанія

WordPress-хостинг-опитування-2017

Керований хостинг-опитування

WooCommerce-хостинг-FB-опитування

2016-Веб-хостинг-опитування

Найкращий-WordPress-хостинг-провайдер-опитування

Кращий веб-хостинг-2019-опитування

WP Дружній хостинг опитування

2016-WordPress-хостинг-FB-опитування

Улюблений хостинг для елемента

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

Managed-WordPress-хостинг-опитування-2017

2019-господарі-опитування-1

Хостинг-опитування для швидкості

WordPress-хостинг-опитування-червень-1

SiteGround-Рекомендація

2014-керований-WordPress-хостинг-FB-опитування

Кращий веб-хостинг-провайдер-опитування

Хостинг-опитування-лютий-2019

Хостинг-рекомендації-опитування

Bluehost vs SiteGround

Опитування веб-хостингу WordPress

Люди зазвичай мігрують через своїх технологія швидкості набагато швидше, ніж EIG або GoDaddy:

Перехід на SiteGround

Міграція часу завантаження на сайт

Bluehost для SiteGround GTmetrix

HostGator To SiteGround

Інформація про Google SiteGround GoogleSpeed ​​Speed

100 Ідеальний бал на сайті

SiteGround Genesis

Швидкість, що надається SiteGround

Скорочені терміни завантаження за допомогою веб-сайту

Нові часи реагування на сайті

HostGator на міграцію на сайт

Час відповідей SiteGround про Joomla

Переключено на хостинг сайту

SiteGround Rocket Уявіть комбо

Інформація про SiteGround PageSpeed ​​Speed

SiteGround On Joomla

Скорочений час завантаження SiteGround

Швидкий хостинг SiteGround

Новий час відгуку на сайті

Поліпшення часу відповіді на SiteGround

SiteGround також робить вільні міграції з GrowBig+.

Хмарні доріжки – швидше, ніж SiteGround (це хмарний хостинг, не загальний доступ), а також його оцінювали високо в опитуваннях Facebook. Починається з 10 доларів на місяць зі своїми План DigitalOcean. Вони пропонують 1 безкоштовну міграцію (яку я взяв на озброєння) і ось що сталося з моїм часом відповіді сервера:

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

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

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

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

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

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

WP двигун до Cloudways

Без назви

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

Cloudways-Facebook-огляд

Ви можете отримати 25% знижки на свої перші 2 місяці Cloudways за допомогою промо-коду OMM25.

Кінста – Хостинг премій 30 доларів на місяць, і хоч я ще не пробував їх, я не чув нічого кращого про швидкість, підтримку, час роботи та майже все про хостинг Kinsta.

Perfmatters – плагін від Kinsta, який піклується про те, що я люблю називати «різними оптимізаціями», як вибіркове відключення плагінів, обмеження змін до публікацій, вимкнення автозбереження, локальне розміщення Google Analytics та багато іншого. Він дбає про останні 10% швидкості.

Деякі з них рекомендовано функцією Autoptimize, інші – не:

Автоматично оптимізувати Додати домен

8. Хмара

Для автоматичного оптимізації немає налаштувань для додавання CDN Cloudflare ‘, але це легко встановити. І ви, безумовно, повинні, тому що це додає Ще 200 центрів до вашої мережі доставки вмісту (CDN).

Центри даних Cloudflare

Крок 1. Підпишіться на Cloudflare, і вам буде запропоновано додати свій сайт і розпочати сканування.

cloudflare-begin-scan

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

Cloudflare-Name-сервери-приладова панель

Крок 3. Увійдіть до свого реєстратора домену (напр., Іменний скрипт) та виконайте пошук у Google “як змінити сервери імен на Namecheap” (лише шукайте реєстратор вашого домену), після чого дотримуйтесь їх інструкцій. Ви будете копіювати два сервери імен, надані Cloudflare, і вставляти їх у спеціальний параметр серверів імен у вашому реєстраторі домену. Дайте 72 години для розмноження.

Служби імен Godaddy Cloudflare

Це воно!

Що далі?

Подивіться моє відео – це 42-хвилинне відео, але я висвітлюю майже все (часові позначки в описі відео), і ви повинні дізнатися про велику кількість інформації про швидкість сайту WordPress:

Хочете знати, як я отримав 100% балів у GTmetrix?
Дивіться повний посібник з оптимізації швидкості WordPress, який містить понад 38 підказок щодо виправлення елементів GTmetrix / Pingdom, включаючи оновлення до PHP 7, подання масштабованих зображень із зазначенням розмірів зображення, очищення бази даних, локальне розміщення Google Analytics, WP Disable та інші.

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

&# x1f680; Чи потрібні мені інші плагіни швидкості, крім автоматичного оптимізації?

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

&# x1f680; Як налаштувати CDN за допомогою автоматичного оптимізації?

Виберіть свій CDN (я використовую StackPath), скопіюйте свій URL-адресу CDN та вставте його у поле CDR UR для автоматичного оптимізації..

&# x1f680; Як оптимізувати шрифти Google за допомогою автоматичного оптимізації?

Я рекомендую скористатися параметром “Комбінувати та зв’язати голову” та попередньо підключити шрифти за допомогою функції “Автооптимізація”.

&# x1f680; Чи автоматично оптимізує кешування?

Ні, вам потрібно буде використовувати окремий плагін для кешування. Я рекомендую WP Rocket або SG Optimizer, якщо використовуєте SiteGround.

&# x1f680; Як налаштувати параметри автоматичного оптимізації?

У цьому підручнику перераховано все – просто слідкуйте за своїм звітом 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