Вплив швидкості сторінки
Швидкість сторінки значно впливає на користувацький досвід відвідувачів, а отже, і на ваш трафік. Більшість користувачів залишають сайт, якщо сторінки або елементи сторінки завантажуються повільно. Це призводить до зменшення доходу та падіння рейтингу. Крім того, швидкість сторінки враховується пошуковими системами, і через це вона може трохи вплинути на загальний рейтинг сайту.
Як виміряти швидкість сайту?
Швидкість сторінки - це параметр, що вимірює швидкість завантаження сайту. Існує кілька способів виміряти її. Вони описані в цій статті (додати посилання).
Як прискорити ваш сайт?
Червоний - дуже важливо, помаранчевий - рекомендовано, зелений - необов'язково.
1. Оптимізуйте зображення.
Цілком очевидно, що великі зображення завантажуються досить повільно.
На сьогодні існує безліч різних онлайн-редакторів та мінімайзерів зображень. Compressor є одним з найпопулярніших інструментів, що дозволяє зменшити розмір зображення або фотографії як з втратою якості, так і без неї. Він може стискати зображення до 90%. Інший інструмент, Imagify, може не лише стискати зображення, але й оптимізувати всі зображення одночасно. Що стосується оптимізації gif, немає сенсу розглядати всі інструменти, оскільки їх досить багато, і кожен з них має свої плюси та мінуси.
Також можливо зменшити розмір зображення вручну за допомогою Adobe PhotoShop або будь-якого іншого графічного редактора. Ми рекомендуємо виконувати більш-менш безвтратне стиснення. Якщо зображення дуже поганої якості, користувачі не будуть дуже охоче відвідувати ваш сайт, оскільки він буде виглядати жахливо. У цьому випадку краще прискорити сайт іншими способами.
Розширення файлу. Ми пропонуємо використовувати png та jpg. Перше має найвищий рівень стиснення, а друге підтримує прозорість. Ми також настійно рекомендуємо використовувати розширення WebP. WebP - це сучасний формат зображень, що забезпечує безвтратне та з втратами стиснення для зображень в Інтернеті.
Безвтратні зображення WebP на 26% менші за розміром у порівнянні з PNG. Зображення WebP з втратами на 25-34% менші у порівнянні з JPEG при еквівалентному рівні стиснення.
2. Налаштуйте кешування браузера
Коли хтось відвідує ваш сайт, ваш браузер завантажує всі його елементи (зображення, CSS-стилі, текст тощо) з сервера, де зберігається сайт. Кешування браузера - це процес тимчасового зберігання цих даних на жорсткому диску відвідувача. Це означає, що наступного разу, коли користувач відвідає ваш сайт, він завантажиться набагато швидше, оскільки браузер завантажить лише ті елементи, які змінилися, а всі інші візьме з пам'яті (кешу). Що зберігати, визначається сайтом.
Щоб увімкнути кешування, вам потрібно додати наступний код до файлу .htaccess (зверніть увагу, що це застосовується лише для веб-сервера Apache, а не для Nginx):
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType text/css "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
</IfModule>
Час зберігання в цьому коді встановлено на 1 місяць, оскільки ми вважаємо цей період оптимальним. Ви можете встановити інші значення, наприклад, 7 днів, 1 рік тощо.
Зверніть увагу, що модуль mod_expires.c повинен бути увімкнений на стороні вашого хостинг-провайдера, щоб цей код виконувався. Більшість хостинг-компаній мають цей модуль увімкненим за замовчуванням. Проте все ще є кілька компаній, які мають його вимкненим, і вам може знадобитися звернутися до їхньої підтримки, щоб вирішити цю проблему.
Ви можете додати наступний код для оптимізації кешування скриптів:
FileETag MTime Size
<ifmodule mod_expires.c>
<filesmatch ".(jpg|jpeg|gif|png|ico|css|js)$">
ExpiresActive on
ExpiresDefault "access plus 1 month"
</filesmatch>
</ifmodule>
Великі хостинг-провайдери мають всі ці функції інтегровані в свої панелі управління хостингом, тому ви можете вмикати/вимикати їх без ручного редагування файлу .htaccess.
3. Увімкніть стиснення gZip
Як це працює: коли користувач намагається відкрити веб-сторінку, сервер, де розташований сайт, бере запитувані дані та зменшує їх (стискає). Отже, обсяг даних, що передається користувачеві, менший і отримується швидше, ніж якби він передавався без стиснення. Після прибуття на пристрій користувача дані відновлюються шляхом розпакування браузером, і ваша веб-сторінка відображається. Перевага тут полягає в тому, що навіть якщо процес займає трохи часу, це все одно менше, ніж знадобилося б для завантаження файлу повного розміру.
Оскільки багато хостинг-провайдерів мають gZip увімкненим на рівні сервера за замовчуванням, вам не доведеться вмикати його самостійно. Це рідко згадується на веб-сторінці хостинг-провайдера, і вам може знадобитися перевірити з їхньою підтримкою, чи він увімкнений.
Ось керівництво (додати посилання) для тих, хто повинен буде увімкнути його вручну.
4. Оптимізуйте CSS файли
Оптимізація CSS не забезпечує значної різниці в користувацькому досвіді. Проте, це покращить швидкість сторінки. Існує багато онлайн-сервісів, які ви можете використовувати для цієї мети.
Ваші стилі працюватимуть як задумано. Непотрібні пробіли будуть видалені, а дані будуть стиснуті там, де це можливо. Нічого іншого не зміниться.
Ми рекомендуємо використовувати cleancss.com. Альтернативно, ви можете використовувати наступні інструменти:
- CSS Compressor (зніміть прапорець "Output using smallest size", щоб зберегти структуру CSS).
- YUI Compressor (рекомендовано Google), який ми не вважаємо дуже зручним.
Хостинг-провайдери прагнуть зробити все можливе, щоб утримати клієнта, надаючи більше інструментів. Таким чином, ви можете мати можливість оптимізувати CSS у вашій панелі управління хостингом.
5. Оптимізуйте JavaScript
Так само, як і оптимізація CSS файлів, варто оптимізувати JavaScript, хоча це не забезпечить значного покращення користувацького досвіду. Вставте код JavaScript у цей онлайн-сервіс (рекомендовано Google) і отримайте скрипт, який мінімізований і завантажується швидше. jslint.com (від Yahoo) може вважатися розумною альтернативою.
Хостинг-провайдер може додати подібні інструменти до вашої панелі управління хостингом. Ці інструменти працюватимуть так само добре, як і ті, що ми надали, тому не соромтеся їх використовувати.
6. Оптимізуйте запити до бази даних
Якщо ваш сайт використовує базу даних, можливо, вам варто перевірити запити, які можуть бути оптимізовані. Якщо їх не оптимізувати, вони можуть навантажувати сервер і впливати на швидкість сторінки.
Перевірте, чи пропонує ваш хостинг-провайдер будь-яку систему моніторингу бази даних для виявлення повільних запитів. Це дозволить вам аналізувати продуктивність веб-сторінки та виділяти точки, які потребують змін.
У найкращому випадку запити до бази даних повинні виконуватися менш ніж за 15 секунд.
7. Асинхронне завантаження JavaScript та CSS
Зазвичай веб-сторінки завантажуються таким чином: спочатку завантажуються стилі та скрипти, а потім решта контенту. Весь цей контент завантажується синхронно, і поки обидва (JS та CSS) не завантажаться, вміст сторінки не буде відображатися користувачеві. Рекомендується налаштувати асинхронне завантаження CSS, JS та основного контенту (текст, зображення тощо).
Ми не рекомендуємо цього робити. Якщо завантаження скрипту або CSS-файлу займає деякий час, це займе стільки ж часу з асинхронним завантаженням. У разі увімкнення асинхронного завантаження користувач побачить текст веб-сторінки трохи раніше. Якщо він поспішить натиснути щось, що використовує JavaScript, поки він ще завантажується, він, швидше за все, отримає повідомлення про помилку.
Щоб уникнути цього, ми радимо оптимізувати ваші скрипти та стилі, щоб вони завантажувалися швидше.
8. Верхня частина веб-сторінки закодована першою
Спробуйте організувати свій код таким чином, щоб елементи, розташовані у верхній частині фактичної веб-сторінки, були розташовані у верхній частині коду (щоб вони виконувалися перед елементами, розташованими нижче на сторінці). Це корисно, якщо у вас довга веб-сторінка. Таким чином, користувач побачить верхню частину якомога швидше. Решта вмісту сторінки завантажиться, поки користувач переглядає верхню частину.
9. Використовуйте інструмент Page Speed
Page Speed - це інструмент, наданий Google. Він визначає основні проблеми швидкості веб-сторінки та надає корисні поради щодо їх усунення.
10. Перевірте інструменти панелі управління хостинг-провайдера
Більшість хостинг-компаній мають досить широкий набір інструментів у панелі управління. Там ви можете знайти більшість інструментів, які допоможуть прискорити ваш сайт.
Ми радимо використовувати їх. Якщо щось піде не так і сайт перестане працювати, ви завжди можете звернутися до підтримки провайдера, і вони допоможуть.
11. Використовуйте OpCache або Memcache/Memcached
Ми рекомендуємо використовувати OpCache/Memcache. Обидва ці інструменти працюють подібним чином, але OpCache оптимізує скрипти, тоді як Memcache/Memcached призначений для оптимізації запитів до бази даних.
OpCache покращує продуктивність PHP, зберігаючи попередньо скомпільований байт-код скриптів у спільній пам'яті, що прискорює їх функціонування. Memcache/Memcached (який використовувати визначається версією PHP) кешує запити до бази даних.
Якщо у вас є якісь поради щодо покращення швидкості сторінки, будь ласка, залиште їх у коментарях нижче, і ми будемо раді додати їх до статті.
Не соромтеся задавати будь-які пов'язані питання в коментарях також. Наші експерти дадуть відповідь якомога швидше.
