Главная Услуги Работы Персона Юзабилити анализы
IMG тел. +7(98I) 7608865
Почему оптимизация?




ПОИСК по сайту


    Полный список статей
/ Почему оптимизация? / Версия для печати / translit / абракадабра :-)


<-предыдущая следующая ->

 
  google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru smi2.ru twitter.com Яндекс закладки text20.ru RuSpace RuSpace toodoo

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

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

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

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

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

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

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

WEBoptimizator

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

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

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

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

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

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

Что дальше?

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

На данным момент для проекта нужно:

  1. Хостинговая площадка поближе к центральному узлу. Трафика ресурс на данный момент генерит не так много (в основном, входящий) и нагрузка от него небольшая, но требуется хороший канал для доступа к любому произвольному вебсайту. Сейчас наблюдаются некоторые проблемы с доступом к определенным ресурсам.
  2. Дизайн и графические рюшечки. Сейчас дизайн выполнен в минималистичном стиле, возможно, его концепцию стоит пересмотреть и сделать проект более ярким и запоминающимся.
  3. Алгоритмы и дополнительные инструменты. При анализе скорости загрузки не все еще обсчитывается правильно, и есть несколько идей по созданию ряда вспомогательных сервисов.

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

Спасибо всем, кто читает и комментирует мои статьи и переводы. Сейчас я обращаюсь к вам с просьбой помочь улучшить то, чем вы будете пользоваться (или уже пользуетесь) — 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.

Подробная статистика


Файл Тип / MIME Размер Мин. размер ETag Время кеша (с)
Всего файлов: 29 114613 95686 Выигрыш при сжатии: 18927
Всего дублирующихся файлов: 4 1164
Выигрыш без дубликатов: 1164

Общий выиг


3
Создание эксклюзивных сайтов, юзибилити анализ и бесплатный анализ под запросы основных поисковых машин
Контактная информация :
тел. +7(98I) 7608865

Написать письмо на e-mail
icq 415547094  romverрейтинг на mail.ru сайта romverinbox.ru
© 1997 - 2024 romver.ru

Полная карта сайта Display Pagerank