Янв
13
2013

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

improve-page-load-speed

Время загрузки Вашего сайта является основным фактором, влияющим на юзабилити и поведение посетителя. Интернет пользователи ненавидят ждать загрузку медленных страниц, в то время как «мгновенные» страницы вызывают большее удовлетворение и доставляют больше удовольствия посетителю. Сегодня скорость интернет соединений становится все выше, и много Web-разработчики не задумываются над оптимизацией своих страниц для повышения их скорости, а ведь это очень важный фактор. В этой статье Вы получите фундаментальные советы по повышению скорости web-страниц и улучшению юзабилити ваших web-приложений.

1. Уменьшайте количество файлов

Уменьшение количества файлов на странице, приводит к уменьшению необходимых HTTP соединений для их загрузки, тем самым ускоряя этот процесс. Но как же это сделать? Можно использовать следующие техники:

Используйте CSS спрайты

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

Объединяйте CSS/JS файлы в один

Если вы используете множество CSS/JS файлов на своей странице, то их объединение можно значительно уменьшить количество запросов.

2. Уменьшайте размер файлов

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

Уменьшайте HTML файл

Используйте HTML-минификатор, например HTML Tidy, он уберет лишние пробелы и переносы строк.

Уменьшайте CSS/JS файлы

Использование инструментов вроде jscompress, css-compressor помогут уменьшить размер Ваших JavaScript/CSS файлов за счет их оптимизации, но сделают их совершенно не читаемыми. Поэтому стоит вести разные версии файлов, одну оптимизированную выгружать на сайт, а вторую, в читаемом виде, использовать для разработки.

Упаковывайте JavaScript

JS компрессоры, такие как Packer могут сжать Ваш JS код и довольно неплохо уменьшить его размер, за счет удаления комментариев, изменения форматирования, обускации и переименования переменных.

Оптимизируйте изображения для Web

Перед добавление изображений на страницу, оптимизируйте ее для Web. Если вы создаете изображение в графическом редакторе, таком как Photoshop, то используйте пункт «Сохранить изображение для Web» и выбирайте оптимальные настройки.
smush-it
Так же Вы можете использовать инструменты, такие как Smush.it для оптимизации своих изображений.

3. Оптимизации серверной стороны

Кэшируйте динамические страницы

При использовании кэширования динамических страницы сервер отдает браузеру статические файлы, что занимает гораздо меньше времени, чем генерация страницы. Веб-серверы, такие как Apache оптимизированы для очень эффективного обслуживания статического контента. Если Вы пользуетесь WordPress, то для кэширования страниц Вам подойдет плагин WP-Super Cache.

Включите GZip

Большинство современных браузеров умеют работать с GZip, использование которого на стороне сервера позволяет уменьшить размер HTML, CSS/JS файлов до отправки их браузеру, за счет чего сокращается объем передаваемого трафика.

Используйте заголовки Expires для статического контента

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

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)(\.gz)?$">
Header set Expires "Thu, 31 Dec 2013 12:00:00 GMT"
Header unset ETag
FileETag None
</FilesMatch>

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

Используйте косую черту в URLах

Этот метод мало известен, однако известно что он увеличивает производительность. Всегда добавляйте косую черту (/) в конце адресов гиперссылок. Это уменьшит накладные расходы сервера при необходимости 301 HTTP Redirect, т.е. при перенаправлении на адрес с косой чертой в конце, если Вы заходили по адресу без нее.

Избавьтесь от ошибок 404

Error-40
404 ошибка (Страница не найдена) приводит к накладным расходам как на стороне сервера, так и в браузере. Проверьте серверные логи или найдите битые ссылки и исправьте их.

Всегда используйте favicon.ico

Большинство браузеров пытаются найти favicon.ico для домена, чтобы добавить маленькую иконку сайта, вне зависимости от того указана ли она в html. Если вы не хотите использовать favicon.ico, то просто разместите прозрачную иконку в корень своего сайта, и браузер не будет получать 404 ошибку при попытке ее открыть.

4. Оптимизация HTML

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

Загружайте таблицы стилей в верху страницы

Всегда размещайте таблицы стилей в верхней части Вашей страницы, в теге <head> , это сделает загрузку страницы постепенной. По мере получения браузером HTML контента, он будет выводить его применя к нему CSS стили.

Размещайте JavaScript в низу страницы

Когда браузер встречает JavaScript файл, он начинает загружать его и останавливает загрузку других ресурсов. Поэтому вы должны стараться размещать весь JS код в конце страницы, за исключением важных функций, необходимых для корректного вывода страницы.

Избегайте использования @import

Если вы используете @import для внешних таблиц стилей, то прекратите это делать, т.к. @import может приводить к последовательной загрузке таблиц стилей, вместо параллельной, а при большом количестве подключений таблиц порядок их загрузки также может измениться. Всегда используйте <link> для подключения таблиц стилей.

Узнать больше о работе @import вы можете из статьи Не используйте @import

Избегайте CSS выражений

css-expr
CSS выражения иногда могут быть полезными, но они крайне не эффективно выполняются в браузерах. Браузеры вычисляют CSS выражения при загрузке страницы, при ее прокрутке и вообще при каждом движении мыши. Одно CSS выражение на странице будет вычисляться тысячи раз в браузере. Вы можете проверить это, используя счетчик, внутри выражения.

Указывайте высоту и ширину изображений

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

Избегайте масштабирования изображений в браузере

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

Очевидно, что оба последних совета не применимы в случае использования адаптивности.

Выделяйте JS/CSS код во внешние файлы.

Старайтесь выделять весь JS/CSS код во внешние файлы, вместо того, чтобы размещать его прямо в HTML. Браузеры умеют кэшировать JS/CSS файлы, что будет полезно при возвращении посетителя.

5. Прочие оптимизации

Кроме техник о которых было сказано выше, существуют и другие способы ускорить загрузку страницы.

Сокращайте DNS запросы

Браузеру для разрешения доменного адреса в IP-адрес требует примерно 20-120 милисекунд для каждого нового адреса. Поэтому, если вы используете ресурсы на множестве доменов, например, изображения, скрипты и т.п. то старайтесь перенести их на свой сайт, это уменьшит число DNS запросов.

Используйте несколько доменов для статического контента

Как известно у браузеров существует ограничение на количество одновременно принимаемых файлов с одного домена, поэтому использование поддоменов поможет распараллелить загрузку Вашей страницы. Например если Ваш сайт называется мойсайт.рф, то статичный контент может отдаваться например с доменов стат1.мойсайт.рф и стат2.мойсайт.рф. Это не приведет к увеличению числа DNS запросов, поскольку запрос для мойсайт.рф уже выполнен.

Используйте домены без cookies для статического контента

Если Ваш сайт использует куки, как это делает большинство сайтов сегодня, то Вы должны знать, для каждого запроса к серверу, вместе с запросом отправляются и куки. Это просто накладные расходы для статического контента вроде JS/CSS/изображений. Раздавайте статический контент с доменов без куки, чтобы избежать этого. Многие крупные сайты пользуются этой техникой, например Yahoo использует yimg.com для обслуживания статического контента. YouTube использует ytimg.com для статики.

Используйте сети доставки контента

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

Используйте оптимизационные инструменты

pingdom0
Используйте инструменты вроде PingDom, Firebug, Y Slow, Google PageSpeed для проверки своего сайта. Они будут очень полезны для Вас, т.к. покажут время загрузки Вашего сайта и покажут проблемные области с советами по их устранению, все это поможет сделать Ваш сайт «мгновенным». Если у Вас возникли вопросы — то задавайте их в комментариях.

Похожие записи

Немного об авторе: Сергей Белянин

Основной автор этого блога. Еще совсем недавно студент, а сегодня уже Microsoft Certifed Professional, с неукротимым желанием сделать жизнь людей проще, автоматизировав скучную рутинную работу :)

  • http://ruskweb.ru/ Сергей

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

    • belyan

      а в конце статьи ссылки как раз и есть :)
      откуда такие цифры? мои тесты показывают 5-6 секунд по твоему сайту.

      • http://ruskweb.ru/ Сергей

        странно, не заметил прошу прощения)

        на pingdom только что проверил — выдал 2.47 s опять же это общее время насколько я понимаю, начиная от отклика сервера и заканчивая загрузкой страницы. у меня отклик сервера времени больше занимает чем загрузка)

        на гугле 68 (out of 100) ранг выдал..

        изначально я проверял http://www.seobuilding.ru/site-speed-checker.php там отдельно отклик и отдельно загрузку показывает. возможно сервис кривой, как то гуглу больше доверия)

      • http://ruskweb.ru/ Сергей

        после включения gzipа сервис pingdom выдал 2.18 s в принципе загрузка немного ускорилась)