Мы на Facebook

Мы ВКонтакте

Мы на Одноклассниках

Мы в Twitter

Высокая скорость загрузки страниц сайта не только обеспечит комфорт и лояльность пользователей, но и напрямую влияет на позиции сайта в поисковых системах. Поэтому чем быстрее будет наш сайт, тем успешнее он будет. Мы дадим несколько советов по ускорению HTML-кода, мобильных сайтов и CMS.

Как увеличить скорость загрузки сайта, сокращая число HTTP-запросов

Почти 80% времени загрузки сайта приходится на различные изображения, скрипты, таблицы CSS, видео и flash ролики. Спецификация HTTP/1.1, предусматривает только две параллельных загрузки и если уменьшить количество компонентов и HTTP-запросов мы увеличим среднюю скорость загрузки страниц

Есть несколько способов уменьшить число запросов к серверу без изменения внешнего вида страницы:

• CSS-спрайты - изображение, состоящее из нескольких малых изображений, которые извлекаются в нужный момент с помощью параметров: background-position и background-image.

• Использование inline-изображений. Вставить inline-изображения на страницу можно двумя способами: с помощью URL-тега data: или непосредственно в CSS-таблицу сайта. Во втором случае мы уменьшим количество запросов к серверу и HTML-код страницы не увеличится.

• Объединение файлов. Если на странице загружается несколько таблиц стилей или файлов JavaScript, то рекомендуется объединить файлы в одну таблицу или скрипт. Это уменьшит время загрузки и количество запросов к серверу. Для разработки вы можете сохранить весь набор скриптов или CSS и объединять их в один только перед загрузкой на сервер.

Подключайте таблицы CSS в начале страницы

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

Если таблицы CSS подключаются в конце страницы, то это не позволит браузеру сразу корректно обрабатывать интерфейсные элементы. Некоторые версии браузеров вообще не перерисовывают элементы, если их стиль меняется после загрузки страницы.

Подключайте JavaScript внизу страницы

В отличие от CSS подключать файлы JavaScript рекомендуется в конце страницы. Этим мы позволим браузеру в первую очередь загрузить весь контент и только затем загрузить необходимые скрипты. Все современные сайты содержат множество скриптов для поддержки различных слайдеров, Ajax-меню, форм обратной связи и т.д. Все это может весить несколько сотен килобайт и долгое ожидание полной загрузки сайта может привести к уходу пользователя.

Также необходимо помнить, что загрузка JavaScript может блокировать параллельные загрузки. В спецификации HTTP/1.1 предусмотрено не более двух параллельных загрузок контекстных элементов с одного хоста. Если элементы находятся на разных хостах, что часто бывает с картинками или скриптами, то мы имеем более 2-х загрузок. Такая сложная очередь неизбежно уменьшит среднюю скорость загрузки страниц. Составьте схему загрузки элементов страницы и вы сразу увидите как увеличить скорость загрузки сайта, сократив количество хостов.


Уменьшите CSS и JavaScript файлы

Удалите из файлов ненужные проблемы и еще раз проанализируйте код на наличие неиспользуемых или неоптимизированных фрагментов. Кроме пробелов удаляются комментарии, переносы и табуляции. Даже незначительное уменьшение размера таблиц стилей и скриптов дает существенное снижение трафика на сайт и как следствие увеличение скорости загрузки страниц, особенно для высоконагруженных сайтов. Для оптимизации файлов воспользуйтесь одним из онлайн-сервисов, которых достаточно в Интернет. На рисунке пример статистики сервиса YSlow. Посмотрите на размер JavaScript –если это высоконагруженный сайт, то уменьшение размера скриптов пусть даже на 100-200Кб это приведет с снижению нагрузки на сервер и повышению скорости сайта.

Задействуйте кэш браузера

Как увеличить скорость загрузки сайта с помощью кэша браузера написано достаточно, но как это ни странно, многие веб-разработчики до сих пор забывают его использовать. Не заставляйте пользователя каждый раз загружать одни и те же картинки, скрипты JavaScript и таблицы CSS. Кэш избавит сервер от лишней загрузки и ускорит загрузку страниц, что очень важно при мобильном доступе. Для того чтобы сделать определенные элементы страницы кешируемыми используйте заголовок Expires в файле .htaccess, который поместите в корневой каталог сайта. Следующий код указывает серверу Apache, что необходимо кешировать загружаемые изображения и хранить их в течение года:

Если контент сайта часто меняется, рекомендуется уменьшить срок хранения кешируемых данных.

Используйте общедоступный CDN для подключения JavaScript-библиотек

Если на сайте используются популярные библиотеки, таких как jQuery или MooTools, то для их подключения лучше воспользоваться CDN-сервисом, таким как Google Librares. CDN выбирает ближайший к пользователю сервер и загружает требуемую библиотеку. Такой способ подключения библиотек гораздо быстрее и надежнее, чем загрузка напрямую с веб-сервера. Кроме быстрой загрузки мы всегда будем работать с самыми последними версиями программного обеспечения.

Для параллельных загрузок используйте отдельные поддомены

Как уже говорилось, в спецификации HTTP/1.1 допускается только две одновременных загрузки браузером с одного хоста. Поэтому если сайт предусматривает много графики, то можно расположить ее на отдельном поддомене. С точки зрения разработчика мы используем один сервер, но браузер воспринимает их как два отдельных. Разделение контента между отдельными поддоменами один из самых простых и эффективных способов, как увеличить скорость загрузки сайта и количество параллельных загрузок.

Оптимизируйте графику

Постоянное увеличение пропускной способности Интернет каналов не означает, что фон сайта или иконки должны быть по несколько мегабайт. Не забывайте, что скорость мобильного Интернета у большинства пользователей оставляет желать лучшего, а количество мобильных устройств с доступом в Интернет продолжает расти. Оптимизируйте размер графических файлов, и вы мгновенно получите увеличение скорости доступа к сайту. Функция оптимизации файлов для Интернет, присутствует во всех популярных графических редакторах. Вы можете воспользоваться онлайн-сервисами сжатия графики, такими как PunyPng или JpegMini.

Нет масштабированию изображений

Не меняйте размеры графики с помощью свойств width и height, или используя CSS. Такое масштабирование создает дополнительную загрузку на браузер и увеличивает время полного отображения страницы. Если на странице должен быть логотип 200х200рх, то лучше иметь необходимую копию изображения на сервере, а не заставлять браузер масштабировать исходник размером 1000х1000px.

Включите Gzip - сжатие трафика

Gzip – сжатие передаваемых Интернет-страниц, по результатам тестов, позволяет сократить объем передаваемой информации на 60-70%. Если хранить статические страницы виде Gzip-архивов непосредственно на сервере, то скорость загрузки можно уменьшить в 3-4 раза.

Все современные веб-серверы и браузеры имеют поддержку Gzip-архивирования без дополнительных модулей или плагинов. Единственным недостатком сжатия является дополнительная нагрузка на веб-сервер, но увеличить мощность сервера в настоящий момент не будет проблемой, особенно при использовании облачных сервисов таких как Amazon или Windows Azure.

Как увеличить скорость загрузки сайта в мобильных браузерах

Недостаточная оптимизация интерфейса мобильного приложения может свести на нет быструю загрузку страницы. В чем смысл загрузить страницу за три секунды и заставить пользователя потратить еще 7 секунд на процесс попадания по нужной кнопке. В итоге сайт все-равно будет казаться медленным. Поэтому несколько рекомендаций по улучшению мобильных приложений:

• Правильная область просмотра. Если на странице не указан тег viewport, мобильный браузер может не не найти версию страницы для мобильных устройств, и отобразит версию для ПК. И как результат сайт отображается не совсем корректно. Обязательно указывайте параметр meta name=viewport и width=device-width.

• Адаптируйте контент. На мобильных сайтах предпочтительней вертикальная, а не горизонтальная прокрутка. Убедитесь, что контент не выходит за пределы области просмотра и пользователи не должны тратить время на лишние прокрутки.

• Проверьте размер шрифтов. Если пользователю придется постоянно увеличивать масштаб, чтобы прочесть текст то сайт нельзя считать оптимизированным для мобильных браузеров.

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

• Не используйте устаревшие плагины и технологии. Например, мобильные операционные системы Android и iOS, перестали поддерживать Flash поэтому нет смысла поддерживать их в мобильной версии.

Для контроля правильности изменений на сайте есть отличный бесплатный инструмент анализа производительности Google Page Speed. Он тестирует скорость загрузки элементов сайта и выводит нужные рекомендации. Пример статистики на рисунке:


Увеличиваем скорость работы CMS

Почти все современные сайты работают под управлением системы управления сайтом (CMS), таких как Joomla или разработаны с использованием какого-либо фремворка, например BootStrap. Такие системы сами по себе достаточно объемны и медленны, что является оборотной стороной универсальности и расширяемости. Если они недостаточно оптимизированы, то могут стать «тормозом» сайта независимо от настроек сервера.

К оптимизации CMS можно применить все вышеперечисленные методы - оптимизация графики, Gzip-архивирование т.д. Но есть несколько особенностей, которые часто забываются разработчиками:

• Регулярно обновляйте CMS. Все новые версии кроме новых функций всегда быстрее предыдущих, поэтому не заставляйте сайт работать на «древнем» ПО.

• Включите внутренний кэш. Он не имеет ничего общего с общим кешем сайта и оптимизирован именно под страницы, генерируемые CMS. Включите его в настройках и скорость сайта резко возрастет.

• Удалите ненужные модули и плагины. Простота установки расширений часто приводит к тому, что CMS превращается в неповоротливого монстра со списком плагинов на три страницы. Что делает большинство расширений уже давно никто не помнит, но регулярно добавляются новые. Остановитесь, удалите весь ненужный хлам, и вы увидите как скорость загрузки сайта WordPress или Joomla изменятся в лучшую сторону.

Мы перечислили только базовые способы, как увеличить скорость загрузки сайта, но они применимы к большинству включая мобильные версии. Проверить скорость загрузки вы можете с помощью онлайн-сервисов, таких как Google Analytics. Источник: Webmaster.ukatalog.ru

comments powered by HyperComments