Николай Мациевский - Разгони свой сайт

страницы habrahabr.ru

Использование 6 CSS- и 15 JavaScript-файлов (подключаемых в head страницы) сразу портит все впечатление. Загрузка сайта в самый первый раз (или при отключенном кэше) на небыстром соединении может быть похожа на настоящий кошмар: белый экран в браузере даже не пытается пропасть. Хорошей новостью будет то, что все текстовое содержимое архивируется. Замечательно, но файлы все же нужно объединять.

Далее, смотрим на загрузку картинок: в них большой простыней выделяется favicon-группа. Казалось бы, хорошая идея — выкачивать иконки компаний к себе на сервер и отдавать их пользователю намного быстрее. Однако в силу того, что получается очень много небольших объектов, разумнее было бы объединять их в Image Map — например, все, что выводятся на главной странице (кэшировать на 10 минут).

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

В качестве альтернативных методов есть возможность подключить JavaScript через «отложенную» загрузку и загружать рекламные баннеры только после отображения сайт-страницы.

Заключение

В качестве послесловия

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

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

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

И так для каждой отрасли и профессии — клиентская оптимизация нужна всем.

А в завершение хочется пожелать только одного — чтобы быстрых сайтов становилось больше и больше.

Контакты для обратной связи с автором приведены по следующему адресу:

http://webo.in/contacts/

Мациевский Николай Сергеевич — выпускник МФТИ, участник ЕЖЕ-движения и российского крыла WSG. Профессиональные интересы сосредоточены в области клиентской оптимизации и практических методов по уменьшению времени загрузки веб-страниц в несколько раз. Николай работает в области клиентской части и высокой производительности с 2001 года, выступал с серией докладов на эту тему на мероприятиях ClientSide-2007, Веборуб Ice-2008, РИТ-2008, iCamp-2008, RIW-2008, Веборуб Autumn-2008, ClientSide-2008.

К числу наиболее успешных проектов можно отнести www.creative.su (новая версия сайта creative.fizteh.ru, который был дважды награжден интернет-премиями в 2005 и 2006 годах) — творческое сообщество студентов МФТИ, и webo.in, который содержит десятки практических советов, статей, текстов докладов, а также набор инструментов для анализа клиентской производительности.

Книга Николая Мациевского не предлагает применять устаревшие методики и повторять безжизненные примеры. Напротив: это живая демонстрация самых актуальных, более того — авангардных технологий, которыми должен владеть современный профессиональный веб-разработчик. Без сомнения, это --">