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

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

Це просто горіхи. Ось як влаштовано мій посібник з виконання…

Почніть з інтенсивних кроків.

Спочатку я перерахував 9 найефективніших способів прискорити роботу сайту. Це, безумовно, найважливіші кроки, які ви можете зробити, щоб пришвидшити завантаження сайту.

Насправді, якщо ви не використовуєте жодної тактики за межами перших 9, у вас все вийде.

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

І є ще одна річ, яку ви повинні знати.

Це точна тактика, яку я використовую

Я не вказую тут жодної тактики, яку я зараз не використовую.

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

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

Ось результати GTMetrix :

Мій перший раз отримав 100% оцінку PageSpeed

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

Кілька швидких контрольних показників, перш ніж ми почнемо:

>3 секунди завантаження повільно
Час завантаження 2-3 секунди – це добре
Час завантаження 1-2 секунди швидкий
Час завантаження 0-1с дуже швидкий

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

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

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

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

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

1 Перейдіть на швидший хост

Хостинг – це потужність вашого сайту.

Завдяки потужнішому хостингу весь ваш сайт завантажуватиметься швидше.

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

Я використовую Kinsta для конкурсних тем і не можу їх рекомендувати.

Окрім автоматичного щоденного резервного копіювання, красивої інформаційної панелі та справді корисної підтримки в чаті…

Вони змусять ваш сайт швидко завантажуватися.

Kinsta працює так добре, оскільки він побудований на основі хмарної інфраструктури Google.

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

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

Після майже десятиліття роботи на веб-сайтах WordPress у мене ніколи не було такого хоста.

Перегляньте Kinsta →

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

Наступне найважливіше, що ви можете зробити, щоб прискорити свій сайт WP, — це додати кешування.

2 Додайте кешування

Скільки 9,027 поділено на 17?

Щоб відповісти на це питання, вам потрібно дістати калькулятор, ввести цифри, і тоді ви зможете впевнено сказати відповідь, яка дорівнює 531.

Тепер я знову запитаю вас, скільки 9027 поділено на 17?

Цього разу ви миттєво дізналися відповідь, оскільки вона збереглася у вашій пам’яті.

Ось що таке кешування.

Коли хтось відвідує ваш веб-сайт, він запускає низку процесів для створення сторінки. Без кешування це відбувається щоразу, коли хтось відвідує ваш веб-сайт. Це як використовувати калькулятор, щоб знову і знову отримувати відповідь.

Як ви розумієте, це надзвичайно марнотратство.

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

Мати сенс?

Тепер давайте поговоримо про те, як скористатися цією технологією на своєму сайті.

Як додати кешування на свій сайт

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

Якщо ваш хост не забезпечує кешування, на вибір є багато плагінів. На мій погляд, найкращий варіант – WP Rocket.

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

Незважаючи на те, що Kinsta забезпечує кешування, я також використовую WP Rocket через інші включені інструменти продуктивності.

Ви можете скористатися моїм підручником із налаштування WP Rocket, щоб почати:

Перегляньте WP Rocket →

Якщо вам потрібна безкоштовна альтернатива, я рекомендую WP Super Cache, якщо вам потрібно щось просте у використанні, і W3 Total Cache, якщо вам потрібні більш розширені параметри.

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

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

Ви ПОВИННІ використати наступні три кроки

Налаштувавши кешування, зверніть увагу на зображення свого сайту.

Якщо ви не оптимізуєте свої зображення, ваш сайт ніколи не досягне часу завантаження 2-3 секунди, ви ніколи не отримаєте оптимізований показник PageSpeed.

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

Перший спосіб оптимізувати зображення — стиснути їх.

3 Стисніть зображення

Сучасні алгоритми стиснення зображень дивовижні.

Вони можуть зменшити розмір файлу зображення на 70%, не впливаючи на його якість помітним чином. Справа в тому, що ви можете зробити так, щоб усі зображення на вашому сайті завантажувалися набагато швидше, не погіршуючи їх якість. Немає мінусів – серйозно!

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

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

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

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

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

Відмінною альтернативою є плагін ShortPixel. Це трохи більше роботи для налаштування, але все ще досить просто у використанні.

Я із задоволенням використовував ShortPixel на цьому сайті протягом багатьох років і перейшов на Optimole лише для цієї наступної тактики.

4 Змініть розмір зображень

Будьте уважні, тому що деталі важливі.

Ось велика ідея:

Чим більше розміри зображення, тим більшим буде розмір його файлу.

Наприклад, зображення шириною 3000 пікселів може становити 900 кб, але при зміні розміру до 600 пікселів воно становить лише 60 кб. Це в 15 разів зменшено розмір файлу!

Ось чому це так важливо.

Зображення в цій публікації блогу відображатимуться лише в ширину 600 пікселів у найширшій частині. У моєму прикладі розмір цього зображення змінено до 600 пікселів у ширину і становить лише 60 КБ.

Якби я не змінив розмір зображення і не використав версію 3000 пікселів, у цій публікації воно все одно відображалося б лише як 600 пікселів. Зображення буде виглядати так само для вас, але його завантаження займе в 15 разів більше часу.

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

Ось проблема.

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

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

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

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

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

Спробуйте Optimole на своєму сайті →

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

5 Ліниво завантажуйте свої зображення

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

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

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

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

Тепер, коли ви зрозуміли, як працює відкладене завантаження, давайте поговоримо про реалізацію.

Як додати відкладене завантаження

Додати відкладене завантаження дуже легко, тому, на мою думку, це обов’язкова тактика.

По-перше, якщо ви встановили Optimole, він автоматично додає відкладене завантаження, тому ви вже закінчили цю тактику.

По-друге, якщо ви не використовуєте Optimole, але вирішили використовувати WP Rocket, просто поставте прапорець тут у налаштуваннях:

Нарешті, якщо ви не збираєтеся використовувати жоден із цих двох плагінів, встановіть a3 Lazy Load.

a3 Lazy Load — чудовий плагін, який включає безліч параметрів конфігурації.

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

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

6 Зменшіть файли

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

Ми іноді називаємо розмір файлу вагою, тому стиснення зображення зменшує його вагу.

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

Окрім зображень, ваш веб-сайт завантажує файли CSS, файли Javascript та файли шрифтів серед інших типів файлів. Затримайте цю думку на мить, і давайте поговоримо про мінімізацію.

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

Так само, як ви стискали зображення, ви можете мінімізувати файли CSS і Javascript (і HTML), щоб зменшити їх розмір і зменшити вагу сторінки.

Як мінімізувати файли

Знову ж таки, додати мініфікацію на ваш сайт просто.

У WP Rocket є прапорці, щоб увімкнути мініфікацію для CSS, JS та HTML.

Зменшити ваші файли CSS за допомогою WP Rocket дуже просто

Це все, що вам потрібно зробити.

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

Якщо вам потрібна безкоштовна альтернатива для мініфікації, перегляньте плагін Autoptimize.

7 Об’єднайте свої файли

Конкатенація — це ще один технічний термін, що означає «комбінувати».

Коли ви об’єднуєте файли, ви об’єднуєте їх.

Знову ж таки, оскільки у вас є всі ці плагіни на вашому сайті, які завантажують файли, важливо використовувати такий плагін, як WP Rocket, щоб об’єднати їх у якомога менше файлів. Ось чому…

Ви дізналися, що зменшення ваги вашої сторінки прискорює її завантаження, але є ще один основний фактор продуктивності для оптимізації: HTTP-запити.

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

Кожен файл, який ви завантажуєте, потребує HTTP-запиту. Кожне зображення, файл JS, файл CSS тощо – усі вони потребують одного HTTP-запиту.

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

Наприклад, якщо на вашому веб-сайті є 5 файлів CSS розміром 5 КБ, він буде завантажуватися швидше, якщо ви об’єднаєте їх в один файл CSS розміром 25 КБ.

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

Як додати конкатенацію

Ми також можемо звернутися до плагіна WP Rocket для цієї оптимізації.

Є прапорці для об’єднання файлів CSS і JS.

Вам просто потрібно встановити обидва прапорці, зберегти зміни, і все готово.

Ці параметри також доступні в плагіні Autoptimize.

Ця наступна порада може вас здивувати, але, на мою думку, це ще одна обов’язкова оптимізація.

8 Завантажте файли за допомогою CDN

Інтернет – це магія.

Правда?

Але насправді, ні, це не так.

Це мережа комп’ютерів, і всі з’єднання в цій мережі є фізичними.

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

Якщо ваш сервер знаходиться в Нью-Йорку і хтось із Токіо відвідує ваш веб-сайт, файли потраплять до них довше, ніж якщо хтось інший з Нью-Йорка відвідує його.

Я сказав, що про це дивно думати 😜

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

Так!

І це саме те, що робить CDN.

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

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

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

Як додати CDN на свій сайт

Існує кілька надійних варіантів для додавання CDN на ваш сайт.

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

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

Налаштувати Cloudflare досить легко і має ряд інших переваг. Ви можете виконати наведені тут дії, щоб використовувати Cloudflare для свого сайту.

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

У мене є ще один підсилювач продуктивності для вас перед усіма екстрами.

9 Виберіть швидку тему

Гаразд, мушу визнати, ця остання порада дещо інша.

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

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

З усіма своїми темами я завантажую мінімум, створюючи стильний і сучасний досвід користувача. Це означає, що завантажуються лише теми:

Один файл CSS
Один зменшений файл Javascript
Один запит Google Fonts
Шрифт значка Font Awesome (для соціальних значків)

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

Не всі теми оптимізовані, але це не обов’язково викликає занепокоєння. Це тому, що навіть якщо ваша тема погано оптимізована і завантажує два файли CSS і три файли Javascript, і жоден з них не мінімізується, плагін, такий як WP Rocket, все одно об’єднає і мінімізує їх для вас, тому кінцевий результат буде практично таким же.

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

Виберіть тему від авторитетного розробника, і продуктивність теми не буде проблемою.

Додаткові оптимізації

Вау!

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

У решті цієї статті я розповім про більш конкретні та технічні оптимізації. Я зробив ці поради максимально зручними для початківців. Деякі з них легко реалізувати, але, чесно кажучи, деякі дуже просунуті, і саме так воно і має бути 🤷‍♂️

Використовуйте якомога більше на своєму сайті та пам’ятайте: якщо ви впровадили перші 9 тактик і дотримуєтеся найкращих практик, то ви вже отримали левову частку результатів.

10 Відкласти Javascript

Якщо ви використовуєте лише одну тактику з решти цього списку, використовуйте цю.

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

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

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

Концепція досить просунута, але знову ж таки не так складна у реалізації.

Як відкласти Javascript

Вам це сподобається.

Незважаючи на розширену тактику, все, що вам потрібно зробити, це поставити прапорець у налаштуваннях WP Rocket.

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

Також є спосіб оптимізувати свій CSS для шляху відтворення.

11 Оптимізація доставки CSS

Як і Javascript, CSS блокує відтворення, тому ми також можемо відкласти його для кращої продуктивності.

Тепер я знаю, про що ви думаєте: чи не ми просто відкладаємо JS, щоб CSS міг завантажуватися, а тепер ми також відкладаємо CSS??

Ось що відбувається…

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

Це дуже просунута тактика, і я б навіть не турбувався про неї, якби WP Rocket не зробив це так просто.

Як оптимізувати доставку CSS

Ви, мабуть, вже звикли до цього…

Все, що вам потрібно зробити, щоб оптимізувати доставку CSS за допомогою WP Rocket, це поставити цей прапорець:

Потім WP Rocket генерує критичний CSS, необхідний для кожної сторінки, і вбудовує його в HTML. Решта CSS потім відкладається.

Я б ніколи не намагався робити це вручну, тому автоматизувати таким чином — неймовірна оптимізація.

Далі я маю ще дві швидкі перемоги, щоб пришвидшити роботу вашого сайту.

12 Вимкніть підтримку смайлів WordPress

WordPress додав підтримку смайлів у версії 4.2.

Щоб смайли працювали на вашому сайті, WordPress завантажує невеликий файл Javascript на кожну сторінку вашого сайту. Ось така річ…

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

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

Ви можете встановити цей прапорець у WP Rocket, щоб видалити підтримку смайлів:

Відключити Emojis плагін є простий, безкоштовної альтернативою.

13 Вимкніть вбудовування WordPress

Коли ви вставите посилання з Twitter у публікацію, WordPress автоматично створить гарне поле для вставки.

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

Оскільки WordPress завантажує додатковий файл Javascript для цієї функції вбудовування, його видалення зменшує вагу вашої сторінки та позбавляється від іншого HTTP-запиту.

У WP Rocket є ще один прапорець, щоб легко додати цю оптимізацію на свій сайт.

Це невелика оптимізація, але кожна частина допомагає.

14 Оновіть версію PHP

Сучасні мови кодування дивовижно швидкі.

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

Ця тактика відрізняється тим, що вона насправді прискорює роботу коду на вашому сайті.

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

Зображення надано Kinsta

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

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

Як оновити версію PHP

Ось чому я навчився за ці роки.

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

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

Наприклад, Kinsta має опцію на інформаційній панелі, яку можна використовувати, щоб змінити версію PHP одним клацанням миші.

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

15 Скоротіть використання плагінів

Чи сповільнюють плагіни ваш сайт?

Типу. Це складно. Я наведу кілька прикладів.

Я використовую плагін MonsertInsights, щоб додати Google Analytics на свій сайт. Google Analytics завантажує два файли Javascript на кожну сторінку мого сайту, тому це сповільнює його роботу (більша вага і два HTTP-запити).

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

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

Тепер ви можете зрозуміти, чому твердження «плагіни сповільнюють ваш сайт» не відповідає дійсності. Роблять, ні, роблять за певних умов тощо 🤷‍♂️

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

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

«Фронт-енд» вашого сайту – це те, що бачать відвідувачі. "Беренд" – це ваша інформаційна панель адміністратора.

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

16 Використовуйте зображення webP

Я впевнений, що ви знайомі з такими форматами зображень, як JPG і PNG.

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

Спочатку це звучить чудово, але тут все ускладнюється.

Поки що не всі браузери підтримують зображення webP. Це означає, що якщо ви використовуєте webP для всіх своїх зображень, вони можуть взагалі не відображатися в таких браузерах, як Safari. Наразі вам потрібно обслуговувати зображення webP, а також мати резервну копію кожного зображення у JPG або PNG.

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

Як використовувати зображення webP

Якщо ви використовуєте плагін Optimole, він повністю вирішується за вас.

Насправді для цього навіть немає налаштувань.

Optimole автоматично створює веб-версії ваших зображень і надає їх відвідувачам, якщо їх браузер підтримує це. Невеликий файл Javascript із полізаповненням завантажується для показу версій зображень JPG/PNG, якщо браузер відвідувача не підтримує webP.

17 Використовуйте попередню вибірку DNS

Попередня вибірка DNS дуже крута.

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

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

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

Деталі досить технічні, але це ідея цієї тактики.

Як використовувати попередню вибірку DNS

Існує простий варіант, наданий WP Rocket для попередньої вибірки.

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

Ваш сайт, ймовірно, використовує шрифти Google, тому додавання «//fonts.googleapis.com» увімкнуло б попереднє завантаження для цього доменного імені.

18 Обмежте публікації на сторінці

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

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

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

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

Як обмежити кількість публікацій на сторінці

WordPress має вбудовану опцію для контролю ваших публікацій на сторінці в меню «Налаштування читання».

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

19 Об’єднайте запити Google Font

Я приблизно на 100% впевнений, що ваша тема завантажує шрифти Google.

Якщо це добре закодована тема, має бути лише один запит Google Fonts, тому проблем немає.

Однак є ймовірність, що плагіни на вашому сайті також завантажують шрифти Google, або ви самі додали більше шрифтів. Якщо це так, ваш сайт робить кілька запитів Google Fonts, що означає кілька запитів HTTP. Пам’ятайте: чим менше запитів HTTP, тим краще.

Як поєднати запит Google Fonts

Ви, мабуть, вже звикли до цього…

Щоб об’єднати запити Google Fonts на вашому сайті з WP Rocket, поставте прапорець:

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

20 Оптимізація запитів Gravatar

Коли люди залишають коментарі на вашому сайті, їхні аватарки з’являються автоматично. Це тому, що WordPress інтегрується з Gravatar для отримання аватарів.

Gravatar — це безкоштовний сервіс, і все, що він робить, — це пов’язує аватар з адресою електронної пошти. Якщо ви створите обліковий запис і додасте аватар, ви побачите, що він автоматично відображатиметься на вашому сайті та в усьому Інтернеті.

Ось проблема.

Кожне з цих зображень робить ще один зовнішній запит до серверів Gravatar. Це означає, що якщо ви отримаєте 10 коментарів до публікації, ваш веб-сайт зробить до 10 зовнішніх HTTP-запитів – це багато!

Є три способи оптимізації Gravatar, щоб він не сповільнював роботу вашого сайту.

Як оптимізувати аватари Gravatar

Перший варіант дуже простий: ліниво завантажувати зображення Gravatar.

На жаль, ліниве завантаження Optimole не працює із зображеннями Gravatar. Для того, щоб ліниво завантажувати зображення Gravatar, ви можете використовувати безкоштовний плагін a3 Lazy Load.

Крім того, ви можете повністю вимкнути Gravatar. У налаштуваннях обговорення вимкніть аватари за допомогою цієї опції:

Як випливає з налаштування, це повністю вимикає аватари в коментарях. Якщо ви все ще хочете, щоб аватари за замовчуванням відображалися, ви можете замість цього встановити плагін Disable User Gravatar.

Якщо коментатори мають власні облікові записи на вашому сайті, ви можете використовувати плагін WP User Avatar, щоб дозволити їм завантажувати власні аватари.

Третій варіант — кешувати зображення Gravatar за допомогою такого плагіна, як FV Gravatar Cache, але цей плагін отримав неоднозначні відгуки користувачів.

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

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

Коментарі на вашому сайті з’являються лише після публікації вмісту, тож навіщо завантажувати їх одразу?

Оскільки Optimole не працював над лінивим завантаженням зображень Gravatar, я встановив плагін Lazy Load for Comments, щоб ліниво завантажувати весь розділ коментарів. Проблема вирішена!

Тепер, коли хтось відвідує публікацію, жоден із коментарів чи зображень Gravatar не завантажується, доки вони не прокручуються до розділу коментарів. Це видаляє всі HTTP-запити з Gravatar до моменту початкового завантаження.

Поки ми говоримо про відкладене завантаження, давайте продовжимо ще одну реалізацію.

22 Відкладене завантаження всіх відео

Чи вставляєте ви відео YouTube у свої дописи?

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

Ви можете ліниво завантажувати свої відео (та iframe), як зображення.

Як ліниво завантажувати відео

Я використовую функцію відкладеного завантаження Optimole для зображень, але WP Rocket має опцію спеціально для iframes і відео, які ви можете ввімкнути таким чином:

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

23 Зменшіть перенаправлення

Якщо ви відвідуєте цей веб-сайт за допомогою «http», натомість вас буде перенаправлено на версію «https».

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

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

Посилаючись на свій власний веб-сайт внутрішньо або з іншого веб-сайту, завжди використовуйте кінцеву URL-адресу, на яку приходять відвідувачі. Я завжди використовую «https://www.competethemes.com/ », щоб не було перенаправлень.

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

24 Розмістіть Google Analytics локально

Я вже кілька разів згадував Google Analytics, тому що це неминуче зниження продуктивності.

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

Розміщуючи файли Google Analytics локально, ви можете завантажувати їх трохи швидше.

Як завантажити Google Analytics локально

Ще раз плагін WP Rocket зробив це неймовірно простим і надійним.

У меню «Додатки» є простий параметр, який можна ввімкнути для локального розміщення Google Analytics, а не завантаження його з серверів.

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

Відмінною безкоштовною альтернативою є плагін CAOS.

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

Ви вже оптимізували свої JS та CSS, тож давайте також серйозно познайомитися з оптимізацією шрифтів.

Що стосується продуктивності, то шрифти дорогі.

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

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

Тепер давайте трохи докладніше.

26 Використовуйте меншу вагу шрифту

Кожна вага шрифту збільшує продуктивність вашого вибору шрифту.

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

Якщо ви також використовуєте шрифт Playfair Display і завантажуєте версію, виділену жирним шрифтом і курсивом, тепер ви завантажуєте шість файлів шрифтів, які сильно вплинуть на швидкість вашого сайту.

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

27 Завантажте лише набір символів вашої мови

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

У цьому ж потоці, чим більше символів у шрифті, тим більший файл. Справа в тому, що ви хочете завантажити лише потрібні вам символи.

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

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

28 Вимкніть функції OpenType в Adobe Fonts

Якщо ви використовуєте Adobe Fonts (раніше TypeKit) для своїх шрифтів, то, ймовірно, у вас є доступ до деяких функцій OpenType.

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

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

Під час редагування проекту вимкніть тут функції OpenType:

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

29 Замініть Font Awesome на Fontello

Ця тактика дуже технічна, але оскільки вона допомогла мені, я включаю її для тих, хто читає, чиї зручно писати код.

Якщо ви використовуєте Font Awesome або інший шрифт для значків для свого сайту, ви, швидше за все, завантажуєте весь шрифт, тобто ви завантажуєте сотні значків. Швидше за все, ви використовуєте лише кілька піктограм на своєму сайті.

За допомогою Fontello ви можете створити власний пакет шрифтів значків, використовуючи лише ті піктограми Font Awesome, які ви насправді використовуєте.

Оскільки я використовую лише 26 різних піктограм на цьому сайті, мені вдалося значно зменшити розмір файлу шрифту та його таблиці стилів (приблизно 100 Кб).

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

Інші оптимізації

Я бачу, що інші веб-сайти постійно рекомендують наступні поради, але ось що…

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

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

Ось останні 7 тактик.

30 Вимкніть pingbacks та trackbacks

Більше ніхто не використовує пінгбеки чи трекбеки з законних причин.

Ще до соціальних мереж, коли люди вели особисті блоги, pingbacks були схожі на @-ing. Іншими словами, вони повідомляли б вам, коли інший блогер посилався на ваш сайт.

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

Не потрібні плагіни.

31 Уповільніть Heartbeat API

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

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

Хоча для більшості людей це не так важливо, ви можете також уповільнити його за допомогою цього параметра в плагіні WP Rocket:

Зменшення активності просто вказує API Heartbeat запускатися раз на дві хвилини замість кожної хвилини.

32 Вимкнути гаряче посилання

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

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

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

Вам не подобаються всі ці прості опції, які можна активувати?

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

33 Оптимізуйте свою базу даних

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

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

Існує багато плагінів для оптимізації вашої бази даних, але це те, що я роблю з WP Rocket.

Меню «База даних» у налаштуваннях WP Rocket також містить опції для автоматичного видалення спам-коментарів та інших непотрібних даних із вашої бази даних.

Ще краще, ви можете запланувати цю автоматизацію для вас щодня, тижня чи місяця.

34 Вимкнути або обмежити редагування публікацій

Ви щойно дізналися, що WordPress використовує Heartbeat API для регулярного збереження чернеток ваших публікацій. Ну, WordPress також зберігає версії, які ви можете відновити пізніше, якщо потрібно.

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

Меню «База даних» у WP Rocket містить опцію для видалення редакцій публікації.

Ви можете запустити цю опцію вручну або запланувати її.

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

У мене планується, що WP Rocket запускатиме цю оптимізацію щодня, тому що Kinsta також щодня створює резервні копії мого сайту.

35 Видаліть рядки запиту

Тут потрібно багато пояснити, але оскільки це не прискорить роботу вашого сайту, я просто перейду до суті.

Рядки запиту в URL-адресах файлів потенційно можуть запобігти їх кешування. У більшості плагінів для кешування, як-от WP Rocket, це не так, тому наявність рядків запиту не є проблемою.

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

Просто активуйте цю опцію в WP Rocket і закінчіть з нею:

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

36 Видалити неактивні плагіни

Коли ви деактивуєте плагін, ви просто вимикаєте його. Ви можете повторно активувати його, і ваші попередні налаштування будуть відновлені.

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

Якщо у вас є неактивні плагіни, які ви ще не видалили, їх видалення може допомогти оптимізувати вашу базу даних. Крім того, загалом це просто гарна практика 🙂

Насолоджуйтесь своїм швидшим веб-сайтом

Понад 7000 слів це офіційно найдовша публікація в блозі, яку я коли-небудь писав. Я хотів включити все!

Є ще одне, що я маю тобі сказати…

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

Я вважаю, що мені потрібно повторно оптимізувати свій сайт принаймні раз на рік, щоб підтримувати його у найкращому стані.

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

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

Джерело запису: www.competethemes.com