25.07.2014.
Як відомо, швидкість відкриття сторінок сайту є одним з факторів ранжирування в пошукових системах. Тому важливо стежити за тим, що б сервер віддавав сторінки вашого сайту як можна швидше.
- Швидкість роботи сервера (сюди ж можна віднести швидкість роботи движка сайту)
- «Вага» сторінки
- «Вага» елементів сторінки (зображення, флеш анімація і т.п.)
- Наявність, кількість і ресурсомісткість скриптів, що виконуються в браузері відвідувача (JS скрипти)
Кожен з цих пунктів гідний окремої статті (а то і цілої серії), а сьогодні я хочу поговорити про вагу сторінки і кількості запитів до сервера.
Я думаю, кожному зрозуміло, що чим коротше код сторінки, тим вона швидше завантажиться. Так само, повинно бути ясно, що чим менше елементів (js скриптів, зображень, swf файлів і т.п.) запрошувати з хостингу відкривається сторінка, тим вона швидше завантажиться. Тому, для прискорення відкриття сторінок сайту, потрібно завжди намагатися оптимізувати html код сторінки:
- Прибираємо css стилі з html коду в файл стилів
- По-можливості, об'єднуємо зображення в один або кілька файлів
- Прибираємо зайвий html код (коментарі, які не використовуються лічильники / кнопки і т.п.)
- Об'єднуємо css і js файли
Отже, відкриваємо будь-яку сторінку вашого сайту, тиснемо CTRL + U (або правий клік в порожньому місці сторінки і пункт «Показати вихідний код / код сторінки»). Дивимося, що ж у нас є в коді. Якщо в коді зустрічаються конструкції виду (пошук за словом »style»):
<Style>
...
</ Style>
Те це прописані стилі будь-яких елементів сторінки в її коді. Ці записи потрібно перенести в css файл, тим самим зменшивши обсяг сторінки.
Якщо в коді сторінки кілька разів зустрічається виклик css файлів (конструкції виду <link rel = "stylesheet» type = "text / css» href = "style.css»>), то їх можна об'єднати в один (увагу, чи не об'єднуйте з основним файлів файли хаков (наприклад, для деяких версій IE)). Аналогічно потрібно поступати і з файлами, що містять java script (.js файлами - конструкції в коді виду <script type = "text / javascript" src = "/ highlight.js»> </ script>) - їх теж потрібно об'єднати і залишити в коді тільки один виклик файлу зі скриптами. Так само, якщо js скрипти прописані прямо в коді сторінки (конструкції виду <script type = "text / javascript"> ... </ script>) - їх виносимо в єдиний файл скриптів.
Якщо на різних сторінках сайту використовуються одні й ті ж зображення, їх можна об'єднати в одне і виводити в потрібному місці частину цього зображення. Ця технологія називається CSS спрайт. Якщо вантажиться одне «велике» зображення, а не багато маленьких, це скорочує кількість http запитів до сервера і дозволяє сторінці швидше завантажитися. До того ж, якщо об'єднати всі картинки в одну, то вага цього файлу будемо менше (за умови оптимізації зображення), ніж сума ваг всіх поєднуваних картинок.
Тепер дивимося на зовнішній вигляд сторінки: якщо є якісь кнопки (в підвалі або в бічній панелі) - замислюємося, а чи потрібні вони нам (можуть бути кнопки каталогів, куди додавався сайт, кнопки від web студії, яка розробила сайт, кнопки / лічильники що не використовуються систем статистики і т.п.). Якщо є такі кнопки - видаляємо.
Далі шукаємо коментарі в коді сторінки, приклад:
<! - header start->
І видаляємо всі зайві коментарі.
Так само не забуваємо оптимізувати розмір зображень, використовуваних на сайті. Зробити це можна в графічному редакторі або за допомогою онлайн сервісів (знайти які можна, задавши пошуковій системі запит виду «оптимізація png онлайн»).
Проробивши ці відносно не складні операції, можна підвищити швидкість відкриття сторінок сайту в рази - а це значить - отримати більше задоволених користувачів, і трохи поліпшити ранжування сайту в пошукових системах.
Про інші способи підвищення швидкості відкриття сторінок сайту поговоримо в наступних статтях, слідкуйте за оновленнями нашого блогу.
Сподобалася статися? Підпишіться на оновлення: 
