Идеалното автоматично оптимизиране на настройките + Cloudflare / StackPath CDN (2020)

Autoptimize е чудесен плъгин, но за кеширане, WP Rocket обикновено е №1 в анкетите във Facebook.


Така че защо бихте го използвали?

Защото някои домакини харесват GoDaddy и WP двигател черен списък на повечето приставки за кеш (тъй като те имат собствена вградена система за кеширане), но те не правят неща като оптимизиране на HTML, CSS, JavaScript, Google Fonts или CDN (мрежа за доставка на съдържание). Така че докато кеширащата система на вашия хост може да работи добре за кеширане, Autoptimize ви помага да направите „останалото“ на нещата (фиксиране на елементи в GTmetrix + Pingdom). Избягвайте статистическите данни на Google PageSpeed ​​Inside като Google дори не измерва пъти на натоварване.

Дори разработчикът за автоматично оптимизиране казва на страницата си с приставки, че тя работи най-добре, когато се комбинира с приставката за кеш. Препоръчвам на Swift, ако вървите по безплатния маршрут, и WP ракета ако можете да правите $ 49 / година, тъй като е по-лесно да конфигурирате (това е и това, което използвам и имам 100% резултати в GTmetrix), тъй като се предлага с много функции повечето кеш плъгини не (почистване на база данни, хостинг на Google Analyitcs локално, сърдечен пулс контрол и интеграция както с Cloudflare + други CDN). Имам уроци за WP Rocket, Swift, WP най-бързият кеш, W3TC и дори WP Super кеш.

Така че нека да конфигурираме настройките за автоматично оптимизиране. Ще ви покажа и как да добавите CDN (в идеалния случай и двете Cloudflare и 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“, които Autoptimize не препоръчва в техните често задавани въпроси. Те казват, че „макар че вграждането на всички CSS ще блокира CSS, няма да доведе до блокиране, това ще доведе до това, че основната ви HTML-страница ще стане значително по-голяма, което ще изисква повече„ кръгли връзки “.
  • Вградени всички CSS: забрани, Автоматичното оптимизиране не препоръчва активирането на това.
  • Изключете CSS от автоматичното оптимизиране: ако видите грешки след активиране на определени CSS настройки, намерете проблемните CSS файлове и ги изключете тук. Забележка: опцията „минимизиране на изключените CSS и JS“ в опциите Misc трябва да бъде деактивирана.

2. CDN Опции

Това е мястото, където си CDN URL върви (инструкции по-долу). Cloudflare не ви предоставя CDN URL (вместо това ще промените сървърите на имена). Основният URL адрес на CDN е специално за StackPath, KeyCDN и други CDN – не е Cloudflare. Предлагам да използвате както StackPath + Cloudflare, тъй като вашите CDN ще имат повече центрове за данни и повече центрове за данни = по-бърз уебсайт.

Етап 1: Регистрирайте се за CDN. Използвам StackPath, който има 34+ центрове за данни, които са силно разположени в Съединените щати и там са повечето ми посетители. Това е $ 10 на месец с безплатна пробна версия от 30 дни.

StackPath-Data-Центрове

Стъпка 2: В таблото за управление на StackPath щракнете върху раздела CDN и създайте StackPath CDN сайт.

StackPath-CDN-Tab

StackPath-CDN-Domain

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

* Копирайте IP адреса на вашия сървър, както е необходимо в стъпка 5 на този раздел.

StackPath-CDN-URL-Autoptimize

Стъпка 3: Поставете вашия CDN URL в Автоматично оптимизирайте с http: // или https: // (което използвате).

Автоматизирайте CDN URL

Стъпка 4: В StackPath отидете на CDN → Настройки на кеша, след което щракнете върху „Purge Everything“.

StackPath-прочистване-Cache

Стъпка 5: Бял списък на вашия IP адрес на сървъра в StackPath (WAF → защитна стена).

StackPath-Бял списък-IP

Стъпка 6: Стартирайте сайта си в GTmetrix и „мрежата за доставка на съдържание“ трябва да е зелена в YSlow.

CDN GTmetrix YSlow

3. Разни настройки

Ето настройките на Разни:

Автоматизирайте настройките на Разното

Запишете обобщен скрипт / css като статични файлове – ако са активирани, това означава, че CSS и JS файловете се записват в кеша и се обслужват чрез вашия сървър, така че ако хостингът ви не се справи с тях, активирайте го.

Минимизирайте изключените CSS и JS файлове – ако изключвате определени CSS и JavaScript файлове, това е защото има проблем при опитите им да се оптимизирате и не искате те да са опростени.

Също така оптимизирайте за влезли в редактори / администратори – деактивирайте, обикновено искате да деактивирате функциите за производителност в администратора на WordPress, включително функциите за изпълнение на Cloudflare.

4. Настройки на изображенията

Автоматичното оптимизиране също може да помогне за бързото зареждане на изображенията.

Автоматизирайте настройките на изображенията

Оптимизирайте изображенията – URL адресите на вашия уебсайт ще бъдат променени, за да сочат CDN на ShortPixel. Това не трябва да влияе на това как изглеждат, стига да е без компресия без загуби, но ще се зареди по-бързо.

Качество за оптимизация на изображенията – намерете свой уникален баланс между компресия и качество (използвам Glossy). Ето разликите във всяко ниво на компресия от ShortPixel:

Нива на компресия на изображението ShortPixel

  • със загуби: най-компресия, най-много загуба на качество.
  • лъскав: средна компресия, малка загуба на качество.
  • Lossless: ниска компресия, най-ниска загуба на качество.

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

Мързеливи изображения – Аз лично не мързи да зареждам изображенията си, защото постоянно зареждане на изображения, докато превъртате надолу по страницата, може да е досадно за потребителите. Да, това води до по-малко заявки и е така препоръчани от Google за по-бързо зареждане, но ми е досадно. Това зависи изцяло от вас.

5. Критичен CSS

Това се отнася до Автоматично оптимизирайте приставката за захранване на kriticss.com.

Тя изисква премия платен план от kriticss.com (7 $ / месец).

Плъгинът създава критични CSS правила, за да се увери, че страниците се изобразяват преди пълното зареждане на CSS, подобрявайки „времето за стартиране на изобразяването“. Всичко, което трябва да направите, е да инсталирате приставката, да се регистрирате за план, да въведете своя критичен CSS API ключ в секцията „Critical CSS“ на Autoptimize и плъгинът ще направи останалото. Проверете приставките Страница с често задавани въпроси за подробности относно персонализирани конфигурации.

Аз лично не го използвам и бих предпочел да използвам допълнителните $ 7 / месец на по-мощен сървър.

Автоматично оптимизиране на критичното cs com захранване

Автоматизирайте критичните CSS настройки

6. Допълнителни настройки

Autoptimize-екстра-Settings

Google Шрифтове – активирайте, ако използвате Google Шрифтове които забавят времето за зареждане, когато са изтеглени от външни ресурси (библиотеката на Google Font). Предпочитам опцията „комбиниране и свързване в главата“, тъй като това подобрява времената на зареждане без видимост, виждайки натоварване на шрифтове (което обикновено се случва при зареждане асинхронно. Също така тествайте последната опция за Google Font „комбинирайте и зареждайте шрифтове асинхронно с webfont.js“И вижте кои дават по-добри резултати в GTmetrix.

Премахнете Emojis – активиране (емоджи са лоши за време на зареждане).

Премахване на низовете на заявката от статични ресурси – низовете на заявките обикновено се генерират от плъгини и не могат да бъдат коригирани (в GTmetrix / Pingdom), като просто ги активирате, но можете да опитате. По-доброто решение е да проверите вашия сайт за високи CPU приставки и да ги замените с леки приставки. Повечето плъгини с висок процесор включват социално споделяне, галерия, създатели на страници, свързани публикации, статистика и приставки за чат на живо. Трябва също да изтриете всички ненужни приставки и да почистите базата данни (като използвате приставка като WP-Optimize) за изчистване на таблици, оставени от деинсталирани приставки.

Предварително свържете се с домейни на трети страни – помага на браузърите да предвиждат заявки от външни ресурси (Google Fonts, Analytics, Maps, Tag Manager, 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, но това по принцип го прави, така че определени файлове се изтеглят като висок приоритет.

Async Javascript-файлове – това означава, че нещо предотвратява бързото зареждане на съдържанието над тази част. Този урок на визуализира блокиране на JavaScripts обяснява го добре, но ако видите грешки в JavaScript в GTmetrix и Pingdom, Async JavaScipt плъгин може да свърши работа.

Оптимизирайте видеоклиповете в YouTube – ако вашият сайт има видеоклипове, WP YouTube Lyte мързеливите ги зареждат, така че те се зареждат само когато потребителите превъртат надолу и кликнат върху бутона за възпроизвеждане, като по този начин елиминират първоначалните заявки към сървърите на YouTube. Това може да избръсне няколко секунди на разстояние, зарежда пъти в съдържанието с видеоклипове, тъй като те са един от най-тежките елементи на страницата. WP Rocket и Swift Performance имат тази вградена в настройките си, така че нямате нужда от това, ако използвате един от тях като своя приставка за кеш.

7. Оптимизирайте повече

Ако искате да оптимизирате допълнително вашия сайт, ето инструментите, които препоръчвате:

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

ShortPixel – популярен плъгин за оптимизиране на изображения и този, който използвам.

StackPath – CDN с 30+ центрове за данни. Много лесна за настройка; просто се регистрирайте за план ($ 10 / месец), след което копирайте / поставете вашия CDN URL в опцията Autoptimize CDN URL..

SiteGround – обикновено оценява домакин №1 в анкетите във Facebook и също използван от Йоаст.

Yoast върху Twitter-Ние-току-що преминали към SiteGround

2019 хостинг анкета

2017-WordPress-хостинг-FB-Poll

Препоръки за хостинг на Elementor

Юли 2019 г. Хостинг Препоръка

WordPress-домакин-Poll-Aug-2018

Споделено-хостинг-анкета на 2017 г.

2019-хостинг-Poll

Go-To-хостинг-компания

WordPress-хостинг-анкета на 2017 г.

Сайтът се поддържа хостинг-Poll

WooCommerce-хостинг-FB-Poll

2016-уеб-хостинг-Poll

Best-WordPress-хостинг-доставчик-Poll

Най-добър Уеб хостинг-2019-Poll

WP приятелски хостинг анкета

2016-WordPress-хостинг-FB-Poll

Любим хостинг за Elementor

2018 хостинг препоръки

Сайтът се поддържа-WordPress-хостинг-анкета на 2017 г.

2019-домакин-Poll-1

Хостинг-Анкета-за-Speed

WordPress-хостинг-Анкета на юни-1

SiteGround-Препоръка

2014-Управляван WordPress-хостинг-FB-Poll

Най-добър Уеб хостинг-доставчик-Poll

Хостинг-Poll-Feb-2019

Хостинг Препоръки-Poll

Bluehost срещу SiteGround

Анкета на уеб хоста на WordPress

Хората обикновено мигрират, защото техните скоростна технология е много по-бързо от EIG или GoDaddy:

Преминаване към SiteGround

Миграция на времето за зареждане на SiteGround

Bluehost към SiteGround GTmetrix

HostGator към SiteGround

SiteGround Google PageSpeed ​​Статистика на Google

100 перфектен резултат на сайта

SiteGround Genesis

Скорост, доставена от SiteGround

Намалено време за натоварване с SiteGround

Нови времена за реакция на SiteGround

HostGator към SiteGround миграция

Време за реакция на SiteGround на Joomla

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

SiteGround Rocket Представете комбо

SiteGround PageSpeed ​​Insights

SiteGround On Joomla

SiteGround Намалено време за натоварване

Ускорен хостинг на SiteGround

Ново време за реакция на SiteGround

Подобряване на времето за реакция на SiteGround

SiteGround също прави безплатни миграции с GrowBig+.

Cloudways – по-бърз от SiteGround (той е облачен хостинг, не се споделя) и също беше оценен високо в анкетите във Facebook. Започва от $ 10 / месец с техните План DigitalOcean. Те предлагат 1 безплатна миграция (която аз ги възприех) и ето какво се случи с времето за отговор на сървъра ми:

SiteGround-срещу-Cloudways-Cloud хостинг

Хостинг препоръки Facebook

VPS Cloud Hosting WooCommerce Анкета

VPS анкета за облачен хостинг

Предложения за хостинг на WordPress

Време за реакция в облаци

WP двигател към облачни пътища

неозаглавен

Cloudways Pingdom Load Times

Cloudways-Facebook-Review

Можете да получите 25% отстъпка от първите си 2 месеца на Cloudways с промо код OMM25.

Kinsta – хостинг на премии от 30 долара на месец и докато не съм ги пробвал, не съм чувал нищо друго освен страхотни неща за бързината, поддръжката, времената на работа и почти всичко за хостинга на Kinsta.

Perfmatters – плъгин от Kinsta, който се грижи за това, което обичам да наричам „различни оптимизации“, като избирателно деактивиране на плъгини, ограничаване на ревизиите на публикациите, деактивиране на автоматично запазване, локално хостинг на Google Analytics и много други. Той се грижи за крайните 10% от скоростта.

Някои от тях се препоръчват от Autoptimize, други не:

Автоматично оптимизирайте Add Ons

8. Cloudflare

Автоматичното оптимизиране няма настройки за добавяне CDN на Cloudflare “, но това е лесно за настройка. И определено трябва, защото това добавя Още 200 центъра към вашата мрежа за доставка на съдържание (CDN).

Cloudflare центрове за данни

Етап 1. Регистрирайте се за Cloudflare и ще бъдете подканени да добавите вашия сайт и да започнете сканиране.

cloudflare-започне сканиране

Стъпка 2. След като сканирането приключи, изберете безплатен план, след което Cloudflare ще ви преведе през набор от страници. В крайна сметка ще бъдете отведени на страница, където Cloudflare ви присвоява 2 сървърите на имената.

Cloudflare име-Servers-Dashboard

Стъпка 3. Влезте в своя регистратор на домейни (напр. Именосечка) и извършете търсене в Google за „как да промените сървърите на имена в Namecheap“ (търсете само регистратора на вашия домейн), след което следвайте техните инструкции. Ще копирате 2 сървъра на имена, предоставени от Cloudflare, и ще ги поставите в опция за персонализирани сървъри на имена във вашия регистратор на домейни. Оставете 72 часа за размножаване.

Godaddy Cloudflare именни сървъри

Това е!

Какво следва?

Гледайте моето видео – това е 42-минутно видео, но аз покривам почти всичко (времеви отметки в описанието на видеото) и трябва да научите много страхотна информация за скоростта на сайта на WordPress:

Искате да знаете как постигнах 100% резултати в GTmetrix?
Вижте моето пълно ръководство за оптимизиране на скоростта на WordPress, което има над 38 съвета за коригиране на елементи на GTmetrix / Pingdom, включително надстройка до PHP 7, обслужване на мащабирани изображения, уточняване на размерите на изображението, почистване на базата данни, локално хостинг на Google Analytics, изключване на WP и други.

често задавани въпроси

&# X1f680; Имам ли нужда от други скоростни приставки освен Autoptimize?

Да, обикновено искате да използвате и плъгин за кеширане, оптимизация на изображения, почистване на базата данни, контрол на сърдечния ритъм и избирателно деактивиране на приставки. Препоръчвам WP Rocket, ShortPixel и Perfmatters за тях.

&# X1f680; Как да настроите CDN с Autoptimize?

Изберете вашия CDN (използвам StackPath), копирайте вашия CDN URL и го поставете в полето за автоматично оптимизиране на CDN UR.

&# X1f680; Как оптимизирате Google Fonts с Autoptimize?

Препоръчвам да използвате опцията Combine and Link In Head и да свържете предварително шрифтовете си, като използвате Autoptimize.

&# X1f680; Автоматично ли се грижи за кеширането?

Не, ще трябва да използвате отделен плъгин за кеширане. Препоръчвам WP Rocket или SG Optimizer, ако използвате SiteGround.

&# X1f680; Как да конфигурирате настройките за автоматично оптимизиране?

Всичко е изброено в този урок – просто следете доклада си GTmetrix и кои конкретни елементи трябва да бъдат коригирани. Ако конфигурирането на настройките в Autoptimize не го поправи, помислете за използването на друг плъгин за коригиране на елементи.

Въпроси? Пусни ми ред!
мъжко животно

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