Сім простих шляхів оптимізації Вашого веб-сайту

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

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

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

Є велика кількість інструментів, які можуть допомогти з цим питанням: JPEGmini, Yahoo! Smush.it і ImageOptim.

2) Включення Gzip стиснення

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

Активувати цю функцію доволі легко, наприклад, якщо Ви використовуєте Apache, все, що Вам потрібно, це додати певні налаштування до .htaccess.

# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

Цей невеликий фрагмент коду дозволить значно поліпшити продуктивність Вашого сайту.

3) Мінімізація ваших файлів

Завдяки таким інструментам, як Codekit, Prepos і CLI-інструментам, як Grunt, мініфікація стає все більш поширеною.

4) Об'єднання CSS і JavaScript

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

5) Використання спрайтів

Кожне зображення - це HTTP-запит. Можна просто перетворити зображення у спрайти і завантажувати тільки один раз, і потім просто змінювати CSS background позиції кожного елемента, для корректного відображення. Є інструменти для створення спрайтів: CSS Sprite Generator і Stitches.

6) Використання мережі доставки контенту (CDN)

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

Список популярних CDN:

• CDN Google
• Microsoft CDN
• jQuery CDN
• CDNJS CDN
• jsDelivr CDN

7) використовування кешування

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

<ifModule mod_headers.c>
ExpiresActive On

# Закінчується через 2 тижні
<filesMatch ".(gif|png|jpg|jpeg|txt)$">
Header set Cache-Control "max-age=1209600"
</filesMatch>

# Закінчується через 1 день
<filesMatch ".(css|js)$">
Header set Cache-Control "max-age=86400"
</filesMatch>
</ifModule>

З допомогою mod_headers, Ви можете задати тип файлів і період придатності в секундах.

Оптимізація сайту - дуже важливий процес Наступні кроки будуть гарантувати, що Ваш сайт буде якомога швидше завантажуватись браузером користувача через Wi-Fi або 3G.