Данная статья будет посвящена теме, как оптимизировать скорость загрузки сайта. Это один из важнейших факторов, который оказывает влияние на удовлетворенность Ваших посетителей от Вашего сайта. Кроме того, Google также учитывает скорость загрузки сайта при расчете рейтинга в результатах поисковой выдачи.
Под термином хороший сайт важно понимать не только уровень его дизайна и востребованность информационного наполнения, а прежде всего удобство его пользования. Сюда входит и качество панелей навигации, и длительность загрузки проекта, и многое другое. Чем дольше длится загрузка сайта, тем больше посетителей будет утеряно и тем хуже станет отношение к автору такого проекта.
Проверьте, оптимизирована ли графика на вашем сайте? Если нет, то жизненно важно провести эту операцию с помощью специальной программы. Внимательно просмотрите свой сайт и подумайте – не слишком ли много было использовано графических элементов? Если что-нибудь можно заменить текстовым аналогом без особых потерь – не задумываясь заменяйте!
Используйте только несколько счетчиков посещений, дабы посетитель не сильно страдал, ожидая их загрузки. Если вы применяете на сайте анимированные картинки, то подумайте, обосновано ли их включение? Если некоторые из них можно убрать – обязательно это сделайте!
Изучите HTML-код документа и постарайтесь уничтожить лишние тэги. Эффект будет не столь заметен, как хотелось бы, но хороший Web-мастер пойдет на все, дабы уменьшить время загрузки своего проекта. Не советую применять на сайтах Flash анимацию в больших количествах – она тормозит загрузку сайта невероятным образом.
Подумайте, может быть следует пренебречь динамичностью сайта в целях уменьшения длительности его загрузки. Никогда не используйте фреймы. Старайтесь не применять Java приложений на страницах своего проекта. Не используйте pop-up окон! Не включайте на страницу слишком много текста. Чем больше страница, тем дольше она будет загружаться.
Уменьшите количество HTTP-запросов. 80% загрузки страницы ориентировано на загрузку компонентов страницы: скриптов, фотографий, файлов CSS, flash. Спецификация HTTP/1.1 советует, чтобы браузеры параллельно загружали не более 2-х компонентов веб-страницы с одного хоста. Уменьшив количество этих компонентов мы уменьшаем количество HTTP-запросов к серверу и как результат увеличиваем скорость загрузки страницы.
Помещайте CSS файлы в начале страницы. Помещая подключение к css файлам в хедере страницы мы получаем постепенный рендеринг страницы, т.е. страница будет загружаться постепенно — сначала заголовок, потом лого наверху, навигация и т.д. – а это в свою очередь служит отличным индикатором загрузки страницы для пользователя и улучшает общее впечатление от сайта.
Помещайте javascript в конец страницы. Помещая javascript-файлы вниз страницы мы позволяем браузеру загрузить страницу с контентом в первую очередь, а уже потом начать загрузку javascript-файлов. Если же Ваш сайт идет в ногу со временем и содержит все возможные интерактивные «примочки», то этих javascript-файлов может быть несколько и весить они могут несколько сотен килобайт, поэтому перед загрузкой страницы заставлять пользователя ждать пока загрузятся все Ваши javascipt-файлы губительно.
Минимизируйте css и javascript. Минимизация файла — это удаление из кода всех несущественных символов с целью уменьшения объема файла и ускорения его загрузки. В минимизированном файле удаляются все комментарии и незначащие пробелы, переносы строк, символы табуляции. Здесь все просто. Чем меньше объем файла, тем меньше времени понадобится браузеру на его загрузку.
Используйте поддомены для параллельного скачивания. Как я уже говорил согласно спецификации HTTP/1.1 на браузеры накладываются ограничения на количество одновременно загружаемых компонентов сайта, а именно не более 2-х компонентов с одного хоста. Поэтому если на Вашем сайте много графики, то ее лучше вынести на отдельный поддомен или поддомены. Для Вас это будет один и тот же сервер, а для браузера – разные. Чем больше поддоменов Вы создадите, тем больше файлов браузер сможет одновременно загрузить и тем быстрее загрузится вся страница сайта.
Используйте кэш браузера. Кеширование становится крайне важным для современных веб-сайтов, которые используют обширное подключение JavaScript и CSS. Дело в том, что когда посетитель зашел на Ваш сайт в первый раз, то браузер выполнит загрузку всех javascript и css-файлов, также загрузит всю графику и флэш, однако правильно выставив HTTP-заголовок Expires, вы сделаете компоненты страницы кешируемыми. Таким образом, когда посетитель зайдет на Ваш сайт снова или перейдет на следующую страницу Вашего сайта, в кэше его браузера уже будут находится некоторые нужные файлы и браузеру не потребуется загружать их снова.
Оптимизируйте ваши изображения. Необходимо определять подходящий формат для ваших изображений. Выбор неверного формата изображения, может существенно увеличить размер файла. GIF – идеально подходят для изображений с несколькими цветами, например логотип. JPEG – отлично подходят для детализированых изображений с большим количеством цветов, такие как фотографии. PNG – ваш выбор, когда вам нужно высококачественное изображение с прозрачностью.
Не масштабируйте изображения. Не изменяйте размер изображения при помощи атрибутов width и height тега , либо при помощи CSS. Это тоже негативно влияет на скорость загрузки страницы. Если у Вас есть изображение размером 500x500px, а вставить на сайт Вы хотите изображение с размером 100x100px, то лучше изменить размер оригинальной картинки при помощи графического редактора Photoshop, или любого другого. Чем меньший вес картинки, тем меньше времени потребуется для её загрузки.
Это конечно не все факторы влияющие на скорость загрузки страниц сайта, однако основные положения были неречислены. Умейте анализировать свои проекты со стороны простого посетителя. Не торопитесь выпускать новоиспеченный сайт на просторы сети, если не уверены в его хорошей скорости загрузки. Лучше потратьте лишний денек и сделайте по-настоящему хороший оптимизированный проект.
