Разгони свой сайт

Разгони свой сайт

Методы клиентской оптимизации веб-страниц

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

Оглавление

Введение4

Глава 1. Что такое клиентская оптимизация?7

Глава 2. Уменьшение размера17

Глава 3. Кэширование45

Глава 4. Уменьшение числа запросов55

Глава 5. Параллельные соединения84

Глава 6. CSS оптимизация110

Глава 7. Оптимизация JavaScript128

Глава 8. Приложение169

Заключение207

Введение

Об этой книге и проекте webo.in

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

За последние 10 лет уже многократно менялся сам подход к созданию сайтов. В эпоху браузерных войн и ограниченного доступа по модему наиболее важными аспектами клиентской производительности (отвечающей за скорость загрузки и работы веб-страницы) были ускорение передачи данных и ускорение отображения этих данных при использовании многоуровневых таблиц на странице. О блочной верстке и семантической разметке тогда просто не думали.

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

Данное издание старается объединить в себе все современные подходы к построению высокопроизводительных веб-приложений и просто веб-сайтов, которые быстро загружаются. Подавляющая часть материалов книги уже была опубликована в 2008 году на сайте Web Optimizator ( http://webo.in/ ), из них были отобраны наиболее актуальные и проверенные на практике решения, которые и вошли в основу этой книги.

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

Web Optimizator

Идея организовать ресурс, как посвященный теоретическим аспектам оптимизации времени загрузки веб-страницы, так и предлагающий online-инструменты для этой самой оптимизации, появилась после обсуждения на конференции ClientSide'2007 ( http://client2007.ru/ ), где на фоне общего интереса к затронутой проблеме была задана пара вопросов о рассмотрении частных практических случаев.

За основу online-инструмента были взяты замечательные примеры с Web Site Optimization ( http://www.websiteoptimization.com/ ), OctaGate SiteTimer ( http://www.octagate.com/service/SiteTimer/ ) и Pingdom Tools ( http://tools.pingdom.com/fpt/ ), краткий обзор которых приводится в восьмой главе. Все эти сервисы являются англоязычными и предлагают достаточно широкий спектр инструментов для анализа скорости загрузки сайта. Однако русскоязычного сервиса на тот момент на было, и выдаваемая информация не являлась достаточно точной. Поэтому основным отличием от этих инструментов стало наличие максимально детальных советов по каждому анализируемому веб-сайту, которые, по идее, должны помочь веб-разработчикам предпринять конкретные действия для улучшения качества своего продукта.

Именно с этой целью и был создан Web Optimizator ( http://webo.in/ ).

Благодарности