Як прискорити ваш сайт?

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

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

У моїй минулій статті на дану тему ми визначили, що тривалість завантаження сторінок вашого сайту в браузері визначається кількістю запитів, які він формує, і тривалістю виконання цих запитів. Не будемо знову заглиблюватися в цю тему, а перейдемо безпосередньо до порад щодо прискорення вашого сайту. Ці поради особливо підійдуть власникам порталів, створених на основі CMS, так як проблеми швидкого завантаження сторінок найчастіше зустрічаються якраз на подібних сайтах. Отже, приступимо:

1 рада. Оптимізація таблиць стилів

Таблиці стилів дуже зручні в застосуванні і мають використовуватися на всіх без винятку порталах. Часто буває, особливо при використанні CMS, що таких таблиць стилів виявляється дещо, а, отже, браузер надсилає запит для кожної, на що витрачається більше часу.

У зв'язку з цим перший порада: об'єднуйте всі існуючі таблиці стилів в один файл. Крім того, цей отриманий файл можна і потрібно оптимізувати. Видаляйте непотрібні рядки, прогалини, скорочуйте інформацію про квіти - наприклад, замінюючи білий колір у написанні «#ffffff;» на більш коротке «#fff;», що в кінцевому результаті позначиться на розмірі отриманого файлу і прискорить процес його завантаження. Підключати таблиці стилів в коді сторінки найкраще в області тегів HEAD, тобто у верхній частині сторінки.

2 раду. Оптимізація java-скриптів

При використання java-скриптів часто доводиться підключати відповідні бібліотеки для їх правильної роботи. Часто ці бібліотеки довантажуються безпосередньо з файлів сайту, тоді як можна довантажувати їх у більш стислому вигляді зі спеціалізованих сайтів в Інтернеті, наприклад, з сервісів google.

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

3 раду. Використовуйте css спрайт

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

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

І тепер замість рядків з підключенням кожної з картинок ви кожен раз пишете одну і ту ж рядок з викликом однієї загальної, створеної нами, і за допомогою вказівки певних відступів, а простіше кажучи, координат, вказуєте місце розташування тієї конкретної картинки, яка вам необхідна. Таким чином нам вдається скоротити число запитів браузера з 20 до 1!

4 раду. Використовуйте технологію кешування сторінок вашого сайту

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

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

І нехай сторінки вашого сайту завантажуються з швидкістю блискавки!