Примерно четыре недели назад стартовал проект, посвященный методам оптимизации времени загрузки веб-страницы на клиенте.

Примерно три недели назад стартовал проект, посвященный методам оптимизации времени загрузки веб-страницы на клиенте.

Почему оптимизация?

На мой взгляд, на текущий момент веб-разработчики очень мало уделяют внимания доступности (accessibility) и удобству пользования (usability) проектов, над которыми работают. Для них сайт — это килобайты кода и пара картинок, которые нужно как-то показать клиенту. О пользователе никто при этом не думает, в лучшем случае, прикрываясь такими выражениями, как: «у меня отсюда и так все быстро грузится» или «каналы сейчас не те, что 10 лет назад».

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

Почему клиентской части?

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

Очередной анализатор?

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

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

Более подробно о предпосылках появления проекта и ситуации в данной области можно прочитать здесь webo.sunnybear.ru/.

Для кого этот проект?

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

Что дальше?

Сайт без пользователей мертв, как книга без читателей. Но ведь книгу не будут читать, если она скучна и банальна? Мне кажется, что естественным путем формирования такого проекта будет создания сообщества пользователей, которые как сами заботятся о качестве своих сайтов, так и помогают другим больше понять и разобраться в их конкретных проблемах. Однако, в данном случае хочется сделать больше упор на профессионализм основных участников, а не создание очередной «курилки» на свободные темы. Наверное, в ближайшем будущем у проекта появятся все атрибуты Веб2.0 сервиса: облака тегов, RSS, рейтинги, mushap'ы и т.д. Но ведь это не главное. Главное — это люди, для которых все это будет работать, или которые сами будут работать над этим.

Если у кого-то появятся мысли по любому из пунктов — их можно написать прямо здесь в комментариях либо обсудить со мной в привате более подробно. Мне бы очень хотелось получить отклик у сообщества, ибо проект создавался как рабочий инструмент, и здесь главное — «вовремя наточить свой топор» :)

Спасибо всем, кто читает и комментирует мои статьи и переводы. Сейчас я обращаюсь к вам с просьбой помочь улучшить то, чем вы будете пользоваться (или уже пользуетесь) — WEBoptimizator. Буду рад любым вашим мыслям и соображениям.

Результаты проверки

Exclusive web design - разработка сайтов в Петербурге, веб дизайн и анализ сайтов на юзабилити, изготовление эксклюзивного дизайна сайтов

Название: Exclusive web design - разработка сайтов в Петербурге, веб дизайн и анализ сайтов на юзабилити, изго
Адрес (URL): www.romver.ru
Фактический адрес: www.romver.ru
Дата проверки: 5 Февраля 2008
Оценка: 63 / 100
Интегральная оценка: 41 / 100

Общая статистика

Число файлов: 29
Суммарный размер файлов: 114613
Время загрузки (модем, 33,6kbps): 42.9 с
Время загрузки (скоростной канал, 100 KB/s): 5.03 с
Возможное ускорение: 279% (4352%)

Рекомендации

HTML-файлы могут быть уменьшены в размере. Рекомендуется применить для них технику minify, также размер файлов может быть существенно (до 80%) уменьшен через архивирование (gzip). Подробнее о mod_gzip для Apache.
CSS-файлы можно уменьшить в размере. Рекомендуется воспользоваться инструментом для сжатия CSS-файлов (основанном на проекте CSS Tidy). После этого можно отдавать CSS-файлы в виде архивов с сервера (общий выигрыш до 85%). Подробнее о сжатии CSS-файлов.
Не включено кеширование для статических файлов. Рекомендуется отдавать все ресурсы (картинки, CSS-, JS- и мультимедиа файлы) с кеширующими заголовками (уменьшая тем самым количество запросов с клиента при последующих посещениях или использовании этих файлов для просмотра других страниц сайта). Подробнее о включении кеширования для Apache.
На сервере не включены ETag. Рекомендуется отдавать все статические файлы c кеширующим ETag-заголовком (уменьшая тем самым количество запросов с клиента при последующих посещениях или использовании этих файлов для просмотра других страниц сайта). Подробнее о включении ETag для Apache.
JS-файлы можно уменьшить в размере. Рекомендуется воспользоваться инструментом для сжатия JS-файлов от Dean Edwards или YUI Compressor (подробнее о минимизации JS-кода). После этого можно отдавать JS-файлы в виде архивов с сервера (общий выигрыш до 70%). Подробнее о сжатии JS-файлов.
Загружается более 1 фоновой картинки. Возможно, их можно объединить, используя технику CSS sprites (и следующий инструмент). Это позволит сократить количество запросов к серверу.
Размер фоновых картинок очень большой. Возможно, его можно уменьшить, если подключать только необходимые на данной странице файлы или использовать другой формат для изображений.
Загружается более 5 картинок. Возможно, стоит сократить их количество, например, используя технику Image Map.
Присутствуют дублирующиеся запросы. Дублирование CSS- и JS-файлов необходимо устранить. Многократного использования одних и тех же картинок можно избежать, используя стили. Повторение фоновых картинок устраняется путем объединения селекторов.
При загрузке вебсайта обнаружены редиректы. Каждое перенаправление (redirect) запрос увеличивает время загрузки конечного ресурса на клиенте, необходимо устранить все таки перенаправления. Всего зафиксировано редиректов: 2.

www.romver.ru / Раздел Статьи / Почему оптимизация?