Заметки SEO-новичка о заработке в интернете и не только…Увеличиваем скорость работы сайта
Оптимизация веб-сайта часто игнорируются из-за лени разработчика или просто незнания того, что можно сделать, чтобы ускорить работу вашего сайта. Некоторые разработчики не понимают, что если страница загружается слишком долго, то посетитель может просто не дождаться окончания загрузки и покинуть сайт.
На сегодняшний день есть сотни способов для повышения производительности веб-сайта. Сейчас я опишу несколько простых способов, которые возможно реализовать менее чем за час и за счет этого ускорить ваш сайт. Попробуйте мои советы и увидите удивительные результаты моментально.
При первой загрузке сайта большая часть времени тратится на загрузку его компонентов: картинок, таблиц стилей, скриптов, Flash, и т.д. Так вот если на странице будет меньше компонентов для загрузки, то будет меньше HTTP-запросов и за счет этого ваш сайт загрузится быстрее.
Используйте CSS спрайты
Наверное многие слышали о CSS спрайтах, но не все знают как они работают. Идея CSS спрайтов заключается в том, что все изображения одного и того же типа объединяются в одно. Далее используя справочные позиции свойств CSS мы выбираем ту часть, которую хотим использовать. Например, вы используете 20 png файлов на своем сайте и на это потратится 20 HTTP запросов, но если эти изображения поместить в 1 png файл, то уйдет всего один HTTP запрос. Выгода на лицо, сократили количество запросов на 19. В настоящее время почти все высокопопулярные порталы используют CSS спрайты для сокращения времени загрузки страниц.
Объединяйте JavaScript и CSS файлы
Если у вас несколько CSS и JavaScript файлов, это также увеличит количество HTTP-запросов. Предлагаю простой выход, объединить все содержимое ваших файлов CSS в один. Например, у вас стоит CMS WordPress с несколькими плагинами. У многих плагинов имеется свой файл CSS, ну и как минимум один основной CSS файл вашей темы. У меня на блоге подгружалось таким образом 5 файлов CSS. Все что нужно сделать это объединить их в один и вы сократите еще несколько HTTP-запросов.
Точно также стоит поступить с JavaScript файлами, которые имеются и у плагинов и в темах WordPress.
Уменьшаем файлы CSS и JavaScript
Здесь вообще все просто, нужно открыть ваш CSS файл убрать все лишнее (пробелы, комментарии, новые строки), т.е. содержимым вашего файла будет одна длинная строка.
Смысл всего этого уменьшить размер подгружаемых файлов. Чтобы самим не заниматься этой ерундой, предлагаю всем использовать вот эти два сервиса: для оптимизации CSS и компрессии JavaScript.
Подключайте скрипты в нижней части страницы
При загрузке страницы браузер полностью останавливается, когда сталкивается с тегом <script> и продолжает загрузку после выполнения скрипта. Нельзя загружать даже изображения, пока это делается. Если JavaScript встречаются в <head> страницы, то браузер загружает все эти скрипты и только после этого переходит на <body> часть вашей страницы.
Вот поэтому важно подключать ваши JavaScript файлы в нижней части документа, желательно, непосредственно перед </body>. Таким образом браузер покажет все важное содержимое вашего сайта до загрузки скриптов.
Но иногда не просто перенести скрипт в нижнюю часть. Если, например, скрипт использует document.write и вставляет какую-то часть в содержание страницы, то он не может быть перемещен.
Используйте CDN
Браузеры могут загружать два или четыре компонента параллельно. Нахождение вашего статического контента (картинок, таблиц стилей и скриптов) на разных серверах увеличит скорость загрузки страниц за счет использования параллельной загрузки.
Согласно результатам экспериментов, проведенных Yahoo! Performance Team, если используется слишком много хостов, то увеличивается количество одновременных запросов HTTP, а также увеличит количество DNS запросов, которое влияет на производительность отрицательно. Performance Team упоминает оптимальный баланс между числом параллельных HTTP-запросов и DNS запросов, он должен быть от 2 до 4 хостов. Большее число хостов отрицательно влияет на производительность.
Gzip сжатие ваших CSS and JavaScript
Ваши CSS и JavaScript файлы могут получиться довольно большими. Gzip-компрессия этих файлов может обеспечить их уменьшение на 70-80% от первоначального размера для больших сайтов.
Для Gzip-компрессии JavaScript или CSS файлов нужно поставить следующий фрагмент кода PHP в верхнею часть документа:
<?php
ob_start (”ob_gzhandler”);
header(”Content-type: text/css; charset: UTF-8″);
header(”Cache-Control: must-revalidate”);
$offset = 60 * 60 ;
$ExpStr = “Expires: ” .
gmdate(”D, d M Y H:i:s”,
time() + $offset) . ” GMT”;
header($ExpStr);
?>
Для использования Gzip сжатия Js-файлов нужно использовать Content-Type: Text/JavaScript.
Код делает следующее:
- Он использует ob_gzhandler для посылки сжатых данных. Эта функция сначала проверяет может ли браузер принять файлы gzip, если нет то она отправляет файлы несжатыми.
- Он посылает заголовок типа содержимого и кодировки файла – в данном случае text/CSS и UTF-8.
- Следующий шаг посылка ‘Cache-Control’. Этот заголовок используется для того, чтобы управлять сохранением его копии в кэше. Директива ‘must-revalidate’ гарантирует точность ваших данных.
- Последний шаг заключается в отправке заголовка ‘Expires’, который установливает срок хранения файла в кэше. Здесь мы устанавливаем его на один час.
Для того чтобы Gzip заработало вам нужно переименовать файлы .CSS в .PHP и подключить их в HTML.
Сделайте JavaScript и CSS внешними файлами
Использование внешних файлов положительно влияет на загрузку страницы, поскольку файлы JavaScript и CSS кэшируются браузером. Код JavaScript и CSS увеличивает размер HTML страницы, но зато сокращает число HTTP-запросов. С использованием внешних файлов размер HTML почти не увеличивается, но при это растет число запросов.
Оптимизируйте изображения
Оптимизация изображений должна происходить по любому, так как в основном они тормозят загрузку страницы. При правильной оптимизации возможно значительно уменьшить их размер и за счет этого уменьшиться время загрузки.
Сейчас полно и онлайн сервисов по оптимизации картинок, и различных программных инструментов. По своему опыту скажу что почти любое найденного изображение для поста возможно сжать на 20-40%, а это весомый аргумент.
P.S. Рекомендую почитать пару интересных статей, Ян Такушевич пишет про необходимые плагины WordPress для web-разработчиков, а Fenris разукрашивает облако тегов.
Как интересно… Будем пытаться. Главное, чтоб не в ущерб дизайну…
Достаточно просто поставить WEBO Site SpeedUp – он сам все сделает
Отличная статья! обязательно возьму на заметку!