Топ-10 порад про те, як збільшити швидкість завантаження сторінки
Я думаю ні для кого не секрет, що швидкість завантаження сторінки впливає на безліч факторів. Якщо хтось не в курсі, то коротко скажу наступне, що швидкість завантаження впливає не тільки на те, чи дочекається відвідувач, коли завантажиться Ваш сайт, але і на SEO оптимізацію. Адже на сьогоднішній день вже багато пошукові системи при ранжируванні сайтів, почали враховувати швидкість завантаження сторінки. Тому чим швидше буде завантажуватися Ваш сайт, тим більше відвідувачів Ви можете отримати з пошукових систем, а, отже, і більше грошей на цьому заробити.
MarkDay.ru - спільнота оптимізаторів, веб-майстрів та манимейкеров.
1. Зменшіть кількість HTTP-запитів
80% завантаження сторінки орієнтоване на завантаження компонентів сторінки: скриптів, фотографій, файлів CSS. flash. Специфікація HTTP / 1.1 радить, щоб браузери паралельно завантажували не більше 2-х компонентів веб-сторінки з одного хоста. Зменшивши кількість цих компонентів ми зменшуємо кількість HTTP-запитів до сервера і як результат збільшуємо швидкість завантаження сторінки.
Але як зменшити кількість запитів до сервера не зачіпаючи зовнішній вигляд сторінки?
Насправді є кілька спосіб.
- Використання CSS-спрайтів. CSS-спрайт - це комбіноване зображення, яке містить в собі кілька маленьких зображень, які в потрібний момент для потрібного елемента сторінки вирізаються використовуючи властивості: background-image і background-position.
- Використання Inline-картинок. Inline-картинки використовують URL-схему data. для вбудовування картинки в саму сторінку. Це, однак, збільшить розмір HTML-документа. Вбудовуючи inline-картинки в ваші таблиці стилів ви досягнете зменшення запитів до сервера, а розмір HTML залишиться колишнім.
- Об'єднання декількох файлів в один. Якщо у Вас на сторінці підключається більше одного css- або js-файлу, то Ви можете об'єднати їх в один. Це дуже простий, але дієвий спосіб зменшення кількості http-запитів на сервер. Про те, як це робити на льоту я писав у своїй замітці тут "Розжени свій сайт. Статична стиснення css- і js- файлів на льоту"
2. Поміщайте CSS файли на початку сторінки
Помістивши підключення до css файлів в хедері сторінки ми отримуємо поступовий рендеринг сторінки, тобто сторінка буде завантажуватися поступово - спочатку заголовок, потім лого нагорі, навігація і т.д. - а це в свою чергу служить відмінним індикатором завантаження сторінки для користувача і покращує загальне враження від сайту.
Якщо розміщувати CSS файли внизу сторінки, то це не дозволяє багатьом браузерам рендерить сторінку поступово. Це пояснюється тим, що браузер «не хоче» перемальовувати елементи, у яких після завантаження сторінки може змінитися стиль. Так що всі свої CSS файли завжди підключайте у верхній частині сторінки в секції HEAD.
Крім того, зовнішні .js-файли блокують паралельну завантаження. Специфікація HTTP / 1.1 радить, щоб браузери паралельно завантажували не більше 2-х компонентів веб-сторінки з одного хоста. Таким чином, якщо картинки для вашого сайту розташовуються на різних хостах, ви отримаєте більше 2-х паралельних завантажень. А коли завантажується скрипт, браузер не буде починати жодних інших завантажень, навіть з інших хостів.
5. Використовуйте піддомени для паралельного скачування
6. Використовуйте кеш браузера
Тому виставляйте HTTP-заголовок Expires всюди, де тільки це можливо, на кілька днів або навіть місяців вперед. Для того, щоб веб-сервер Apache віддавав відповідні рекомендаціям HTTP-заголовки Expires, необхідно додати в файл .htaccess, що знаходиться в кореневій папці сайту, такі рядки:
8. Оптимізуйте ваші зображення
Необхідно визначати відповідний формат для ваших зображень. Вибір невірного формату зображення, може істотно збільшити розмір файлу.
- GIF - ідеально підходять для зображень з декількома квітами, наприклад логотип.
- JPEG - відмінно підходять для деталізованості зображень з великою кількістю квітів, такі як фотографії.
- PNG - ваш вибір, коли вам потрібно високоякісне зображення з прозорістю.
Оптимізувати зображення можна двома способами: використовуючи програми або онлайн сервіси за допомогою Інтернет для стиснення зображень. У першому випадку від Вас будуть потрібні певні знання для роботи з тією чи іншою програмою, а ось скористатися онлайн сервісами може кожен. Від Вас лише потрібно завантажити потрібні зображення, а сервіс сам оптимізує їх і видасть посилання на скачування вже стислі файли.
Ось кілька онлайн сервісів для оптимізації зображень:
9. Не масштабуйте зображення
10. Використовуйте Gzip- стиснення
Як показали проведені дослідження, gzip-стиснення текстового файлу «на льоту» в 95-98% випадків дозволяє скоротити час на передачу файлу браузеру. Якщо зберігати заархівовані копії файлів на сервері (в пам'яті proxy-сервера або просто на диску), то з'єднання в загальному випадку вдається звільнити в 3-4 рази швидше.
Починаючи з версії протоколу HTTP / 1.1, веб-клієнти вказують, які типи стиснення вони підтримують, встановлюючи заголовок Accept-Encoding в HTTP-запиті.
Accept-Encoding: gzip, deflate
Якщо веб-сервер бачить такий заголовок в запиті, він може застосувати стиснення відповіді одним з методів, перерахованих клієнтом. При видачі відповіді за допомогою заголовка Content-Encoding сервер повідомляє клієнта про те, яким методом стискалася відповідь.
Передані таким чином дані менша первісних приблизно в 5 разів, і це істотно прискорює їх доставку. Однак тут є один недолік: збільшується навантаження на веб-сервер. Але питання з сервером завжди можна вирішити. Так що не будемо звертати на це увагу.
Для того, щоб включити GZIP-стиснення на своєму сайті, необхідно в файлі .htaccess прописати наступні рядки коду:
Якщо цей спосіб спрацював, то добре, якщо ні, то можна спробувати ось такий ось код:
Але знову таки, даний код працює не на всіх серверах, тому краще звернутися в службу підтримки Вашого хостинг-провайдера і уточнити це питання.
Ну ось власне і все, що я хотів розповісти. У даній статті я постарався перелічити всі основні способи клієнтської оптимізації для збільшення швидкості завантаження веб-сторінки. Крім клієнтської оптимізації існує ще і серверна оптимізація. Але це вже тема для окремої статті.
Оцініть цю статтю: