На жаль, чи на щастя, пошукові системи сьогодні звертають увагу на те, наскільки швидко працює сайт. Це впливає на те, як ресурс ранжируватиметься в пошуку. До того ж, швидкість підвантаження визначає поведінку відвідувачів, яке роботи також враховують.
Ось декілька порад про те, як зробити сайт більш швидким.
Включення CSS в самому початку
Точніше, в Header'e сторінки. Так її елементи будуть завантажуватися послідовно, від заголовка до футера. Що це дасть? Звичайно ж, зручність роботи з сайтом для користувача і підвищення його лояльності. При підключенні CSS в самому низу браузери відмовляються від поступової подгрузки елементів. Тому, сторінка повинна звертатися до файлу CSS вже в тезі head.
JS - в кінець коду
Завдяки підключенню JS файлів в самому кінці завантаження, сторінка з основним вмістом, яке потрібно користувачеві, буде завантажуватися в першу чергу. Головне правило - не примушувати відвідувача чекати того, за чим він прийшов. А численні красиві елементи можна довантажити і потім. До речі, під час підвантаження скрипта інші компоненти сторінки не завантажуються, причому навіть з інших хостів.
Використання піддоменів
На ваших сайтах безліч графічних елементів? Тоді варто подумати про перенесення їх на один або кілька піддоменів, які для браузера вважаються різними серверами. Однак не потрібно використовувати десятки піддоменів: це тільки нашкодить сайту. У всьому потрібно знати міру.
Число HTTP-запитів
Велику частину часу завантажуються різні скрипти, CSS файли, фото і flash. Бажано, щоб браузери довантажувати максимум 2 елементи сторінки з 1-го хоста. У підсумку виходить, що, чим їх менше, тим менше запитів до сервера.
Однак зовнішній вигляд сайту міняти через це не потрібно. Є й інші шляхи.
- Inline-графіка. Вбудовуючи її в CSS, а не в саму сторінку, ви одержите зменшену кількість запитів до сервера, причому розмір сторінок не збільшиться.
- Застосування CSS-спрайтів. Їх суть полягає в тому, що замість кількох дрібних зображень завантажується одне, але велике. За допомогою CSS коду воно розділяється на більш дрібні картинки. Так, наприклад, можна обробити кілька стоять поспіль кнопок, об'єднавши їх в одне зображення. Чим менше завантажень зображень, тим менше HTTP-запитів.
- Кілька файлів в одному. Якщо в шаблоні застосовується більше одного css або js файлу, доцільно зробити з них один файл.
Почистіть всі JS і CSS файли від зайвого коду
Чи не зменшуйте картинку кодом
Якщо вихідний розмір фото вам не підходить, то краще змінити його спочатку, ніж коригувати за допомогою коду CSS або атрибутів тега img.
Застосовуйте CDN для фреймворків
Коли на ресурсі задіяні фреймворки, (такі як jQuery), то для них доцільно застосовувати CDN (Content Delivery Network) - скупчення серверів, які розділені географічно з метою забезпечення максимальної швидкості надання даних клієнта.
Кешування даних в браузерах
Якщо ви активно використовуєте підключення JS і CSS скриптів, то вам життєво необхідно підключити кеш. При першому заході на сайт браузер користувача підвантажує все коди з файлів, а також графічні і flash компоненти. Якщо налаштований HTTP-заголовок Expires, то при повторних заходах відвідувача його браузер буде зберігати всі ці дані, і сторінки будуть завантажуватися швидше.
оптимізовані картинки
Правильно вибирайте формат для зображень, інакше їх розмір може збільшитися. Так, в Gif форматі краще зберігати картинки з декількома квітами, а в JPEG - складну многоцветрую графіку (наприклад, фото). PNG використовується, коли необхідно гарна якість картинки і прозорий фон.
