1. 1. Кешуються плагіни для WordPress
2. 2. Підключення до мережі доставки контенту
3. 3. Оптимізація зображень
4. 4. Об'єднання і видалення файлів Javascript
5. 5. Об'єднання та мінімізація CSS-файлів
6. 6. Завантаження динамічних частин через AJAX
7. 7. Використання браузерного кешування
8. 8. Використання алгоритму стиснення Gzip
9. 9. Уникання завантаження великої кількості зовнішніх ресурсів
10. 10. Налаштування Google AMP

Автор: Харіс Басич (Haris Bacic) - керівник відділу дизайну та розробки в агентстві пошукового маркетингу AdFicient.

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

1. Кешуються плагіни для WordPress

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

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

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

Найпопулярнішим Кешуються плагіном для WordPress є W3 Total Cache , Проте він досить складний у використанні.

Є ще один плагін, WP Fastest Cache , Працювати з яким набагато простіше. У цього плагіна більш дружній до користувача інтерфейс і його легше встановити.

2. Підключення до мережі доставки контенту

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

CDN - це велика мережа серверів, розподілених по всьому світу, здатна кешувати файли вашого сайту, а потім відправляти ці файли з найближчого до ваших користувачам сервера. Таким чином, в ідеальній ситуації користувач в Нью-Йорку завантажить файли сайту з північного сходу Сполучених Штатів, а не західного узбережжя або Європи.

Маршрутизація трафіку через CloudFlare дозволяє скоротити час завантаження і підвищити безпеку веб-сайту.

Щоб налаштувати CDN, наприклад CloudFlare, виконайте наступні дії:

1. Зареєструйте аккаунт.
2. Додайте в нього свій сайт.
3. Змініть сервери доменних імен, щоб вони вказували на ті сервера, що були надані CDN в процесі установки.
4. При використанні WordPress і CloudFlare встановіть офіційний плагін CloudFlare .
5. При використанні іншої CMS встановіть модуль mod_cloudflare для Apache. Хоча це не обов'язково, але корисно для реєстрації реальних IP-адрес користувачів вашого сайту.

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

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

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

Один з найбільш зручних сайтів для конвертації JPG-зображень в PNG - Tiny PNG . Як видно на скріншоті нижче, з його допомогою нам вдалося зменшити розмір тестового зображення з 9,8 до 4,8 КБ.

Далі можна оптимізувати зображення, використовуючи новіший стандарт WebP. Однак на сьогоднішній день цей стандарт підтримують не всі браузери (тільки Google Chrome, Android і Opera), тому при його застосуванні обов'язково потрібно використовувати резервні методи для коректного завантаження зображень в інших браузерах.

4. Об'єднання і видалення файлів Javascript

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

Якщо ви використовуєте CloudFlare, ви можете включити мінімізацію JavaScript (JavaScript Minification), перейшовши на вкладку Speed ​​і відзначивши галочкою пункт JavaScript в підрозділі Auto Minify.

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

Якщо ви не використовуєте JavaScript, то ви можете стискати JavaScript-файли вручну. Для цього можна використовувати такий інструмент, як JS Compress .

Якщо ви веб-розробник і добре розбираєтеся в коді, ви можете запустити Grunt або Gulp для автоматизації процесу мінімізації JavaScript. існує також модуль Apache, який здатний зменшувати розмір початкового коду JavaScript «на льоту», однак його не можна поєднувати з іншими методами мінімізації.

Після об'єднання і мінімізації ваших файлів JavaScript вам потрібно налаштувати асинхронну або відкладену завантаження скриптів на сайті. Для зовнішніх скриптів краще використовувати атрибут async. Для більшості інших скриптів, які покладаються один на одного для роботи, використовуйте атрибут defer. Більш детальну інформацію можна подивитися тут .

При використанні WordPress ви можете спробувати один з полігонів оптимізації, таких як Hummingbird або Async JavaScript , Які дозволяють легко додати атрибути async або defer до JavaScript-файлів.

5. Об'єднання та мінімізація CSS-файлів

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

Для користувачів CloudFlare функція мінімізації CSS розташована в тому ж розділі Speed. Ви також можете включити мінімізацію HTML.

Як і у випадку з JavaScript, просунуті користувачі можуть використовувати Grunt або Gulp для мінімізації коду CSS на своєму сервері. Існує також модуль Apache, званий mod_ext_filter , Який може бути налаштований для автоматичної мінімізації файлів CSS, проте, оскільки вони не будуть кешуватися як статичні файли, це не є кращим способом мінімізації.

Щоб вручну мінімізувати CSS, можна використовувати спеціальні онлайн-інструменти. наприклад, Minifier .

6. Завантаження динамічних частин через AJAX

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

Наприклад, на сайті PriceListo ті сторінки, на яких знаходяться лічильники репоста в соціальних мережах, могли б завантажуватися повільно, оскільки сайту потрібно зв'язуватися з серверами Facebook і Twitter для правильного розрахунку загального числа репоста.

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

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

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

7. Використання браузерного кешування

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

В CloudFlare цей параметр можна налаштувати, перейшовши на вкладку Caching і вибравши відповідний варіант терміну зберігання даних в кеші - Browser Cache Expiration. Якщо ваші файли оновлюються нечасто, ви можете вибрати більш тривалий термін, наприклад 8-16 днів. Якщо файли оновлюються частіше, то потрібно вибрати менший період.

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

8. Використання алгоритму стиснення Gzip

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

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

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

9. Уникання завантаження великої кількості зовнішніх ресурсів

Завантаження великої кількості зовнішніх ресурсів - це одна з проблем, з якою сьогодні стикаються великі медіасайти. Але це не означає, що дана проблема не може вплинути на ваш сайт. Фактично, це актуально і для більш дрібних сайтів, особливо тих, що використовують рекламні мережі, такі як Google AdSense, Media.net, Taboola і т.д.

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

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

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

10. Налаштування Google AMP

Google AMP (Accelerated Mobile Pages) - це фреймворк для створення полегшених версій веб-сторінок для мобільних пристроїв. Для прискорення завантаження ці сторінки попередньо завантажуються і кешуються серверами Google.

Для настройки AMP користувачам WordPress рекомендується використовувати офіційний AMP-плагін .

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