Как увеличить скорость сайта

•  Печать 

Скорость загрузки страницы - важный фактор для пользователей и поисковых систем. Чем дольше грузится страница тем меньше у вас будет посещений!

Пусть мы живем в век быстрого интернета и смотрим видео онлайн, но все же я решил написать эту статью и дать советы  по повышению скорости загрузки страничек сайта.

Любой поисковик хочет, чтобы сайты, которые выдаются в поисковой выдаче были не только полезные, но и быстро грузились. Быстрый ресурс позволяет обслужить большее количество пользователей уменьшить количество отказов (тех, кто не дождался полной загрузки сайта и закрыл страницу). Трудно спорить с тем, что каждый хочет получить ответ на свой вопрос и при том БЫСТРО.

Сейчас приведу немного статистики. По результатам экспериментов в буржуйнете было установлено, что если увеличить время загрузки сайта со 100мс до 400мс, то количество поисков для каждого пользователя уменьшится примерно на пол процента. А это очень невыгодно!

Советы по увеличению скорости сайта

1. Активизация GZIP

GZIP - замечательная технология, которая позволяет сократить вес передаваемых страниц за счет их сжатия. При каждом обращении клиента к серверу сервер сжимает исходную страницу для более быстрой загрузки. Активизация GZIP, конечно будет сильней нагружать сервер с, одной стороны, но, с другой стороны, страницы будут передаваться быстрей. Для активации этой функции нужно прописать в файл .htaccess код:

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/css
  <IfModule mod_setenvif.c>
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch ^Mozilla/4\.0[678] no-gzip
    BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  </IfModule>
</IfModule>

А на всех страницах необходимо добавить (в CMS это файл index.php):

ini_set('zlib.output_compression', 'On');
ini_set('zlib.output_compression_level', '1');

2. Использование кэша браузера

Большая часть сайтов в интернете имеет одинаковую структуру на всех страницах. Это шапка сайта с логотипом, левое и/или правое меню и футер с авторскими правами. А теперь представьте, что пользователь начал читать ваш сайт и переходить от одной страницы к другой. Каждый грузится целая страница с теми же блоками, что были на предыдущей странице и пользователь ждет, ждет, ждет пока же все загрузится. Вместо этого лучше было бы закэшировать или сохранить неизменяемые блоки и значительно увеличить скорость сайта - ведь теперь будут загружаться только новые элементы, а старые будут браться их кэша браузера. Для включения кэширвоания браузера добавьте в файл .htaccess код:

<IfModule mod_expires.c>
ExpiresActive On
  <FilesMatch "\.(jpg|jpeg|png|gif|svg)$">
  	ExpiresDefault "access plus 1 month"
  </FilesMatch>
</IfModule>

3. Минимизация кода

Зачастую код, который содержится в html-страницах, javaScript файлах, в стилях CSS содержит комментарии, переносы строк, лишние пробелы, а все это замедляет загрузку страниц. Для быстрого удаления лишних символов существуют специальные сервисы по минимизации кода. Ссылка на один из таких сервисов тут.

Из такого кода:

/* Список */
.content_ul {
    margin-top: 10px;
	padding-left:35px;
    list-style: none;
	min-height:600px;
}

Можно получить всего одну строку:

/* Список */.content_ul{margin-top:10px;padding-left:35px;list-style:none;min-height:600px;}

Для больших документов исходный размер и минифицированный будут на порядок отличаться.

4. Слияние файлов CSS и JavaScript

В таком случае не предется дергать сервер несколько раз для загрузки каждого файла по-отдельности. Будет достаточно сделать всего один HTTP-запрос.

5. Удаление неиспользуемых компонентов

Если вы не используете какие-либо элементы, то вы не должны их загружать. Ничего трудного: используете - загружаете, не используете - не загружаете.

6. Оптимизация изображений

Если у вас на сайте есть много графических элементов небольшого размера, то было бы логичней уменьшит их размер на сервере. Нет смысла загружать картинку размером 1200 на 1200 пикселей и вывести ее в блок 50 на 50 пикселей. Для изображений предпочтительно использовать два формата: JPG и PNG.

7. Использование спрайтов для показа изображений.

Спрайты позволят сократить количество запросов к серверу и, соответственно, увеличить скорость загрузки вашей странички. Пример кода для вывода спрайта:

.spr {
    width: 15px;
    height: 165px;
    background: url("spr.png") 0 0 no-repeat;
}
 
.spr.first { background-position: 0 -1px; }
.spr.second { background-position: 0 -3px; }

8. Уменьшение количества переадресаций

Часто бывает, что необходимо воспользоваться редиректом, не нужно этого бояться. Но, если использовать переадресации необоснованно и повсюду, то вы увеличите нагрузку на сервер и заставите ждать пользователя пока браузер пройдется по всем адресам страниц в переадресации. Итого: каждая переадресация добавляет задержку, поэтому использовать их надо с осторожностью.

9. Замена JavaScript на CSS 3.0

Несколько лет назад было нормальным использовать код:

$(«#id»).fade()
$(«#id»).slideDown()

 Но сейчас, когда появилась такая чудесная технология как CSS 3.0, можно обойтись и меньшей кровью :)

10. Удаление ненужных скриптов

Конечно здорово использовать на сайте десяток навороченных шрифтов, но это имеет свои минусы. Во-первых, шрифты нужно грузить на устройство клиента, а во-вторых обилие разных шрифтов (более 3х-4х) на сайте - это перебор. Не стоит грузить шрифт в 200кб-300кб ради одной красивой надписи.

Применяйте данные советы на практике и ваши странички будут грузиться на много быстрее!

Советуем почитать

301 редирект для Joomla на .htaccess	Дизайн юзабилити. Не заставляйте меня напрягать мозги	Понятие и основы юзабилити
Adult-сайты: как продвинуть сайт для взрослых с клубничкой	Как уменьшить показатель отказов на сайте	Умная методика и пример семантического ядра