Как стать автором
Обновить
  • по релевантности
  • по времени
  • по рейтингу

Производительность браузеров при загрузке страницы

Клиентская оптимизация
Перевод
Примечание: ниже расположен перевод заметки «Browser Page Load Performance» от John Resig, в которой он рассматривает тестовое окружение от Steve Souders для анализа клиентской производительности браузеров. Мои комментарии далее курсивом.

Steve Souders много внес в улучшение производительности браузеров при загрузке страницы и клиентской оптимизации более, чем кто-либо. Во время своей работы в Yahoo! он отвечал за YSlow (великолепный инструмент для измерения производительности вашего сайта) и написал книгу, посвященной улучшению производительности веб-страниц — High Performance Web Sites. Сейчас он работает в Google, но по-прежнему занимается тем же самым: делает загрузку веб-страниц чуточку быстрее.

Я был восхищен выходом одного из его новых проектов — UA Profiler (проект стартовал достаточно давно, но хороших обзоров его работы пока не было). Этот инструмент можно запустить в вашем браузере, чтобы выяснить его текущие возможности касательно клиентской производительности, которые так или иначе ограничивают в нем скорость загрузки страниц.

Давайте взглянем на следующую таблицу:

UA Profiler
Читать дальше на webo.in →
Всего голосов 20: ↑12 и ↓8 +4
Просмотры1K
Комментарии 4

Yet Another cSS selector = YASS

JavaScript
После заметки о Peppy я почти обрадовался — вот оно, счастье. Наконец появился движок CSS-селекторов, который делает тоже самое, что и jQuery, только быстрее. Сильно быстрее.

Радоваться было недолго, как только я посмотрел в код, то немного ужаснулся: он не соответствовал моим представлениям об исключительной производительности. Совсем не соответствовал. Точнее, немного удовлетворял, но не до конца. Поэтому сразу встал вопрос: а если быстрее?

Почему нельзя сделать быстрое мини-ядро для CSS-селекторов, которое обеспечит базовую функциональность для работы с DOM (ну, совсем базовую — просто выборку элементов, например)? И, самое главное, чтобы это работало не медленнее (в идеале, даже быстрее), чем нативные вызовы.
В этом топике нет шлюх и блэкджека
Всего голосов 67: ↑62 и ↓5 +57
Просмотры1.1K
Комментарии 73

Оптимизация изображений, часть 4: последовательные JPEG — быть или не быть?

Клиентская оптимизация
Перевод
Примечание: ниже перевод заметки «Image Optimization, Part 4: Progressive JPEG…Hot or Not?» из блога YUI. В ней уже известный по прошлым статьям Stoyan Stefanov рассматривает использование последовательных (progressive) JPEG с точки зрения клиентской оптимизации. Мои комментарии далее курсивом.

В своей предыдущей статье «Оптимизация изображений, часть 3: 4 шага для уменьшения размера файлов» последовательные JPEG-файлы были вскользь упомянуты как одна из возможностей для оптимизации JPEG. Эта статья рассматривает данный вопрос более глубоко, включая результаты проведенного эксперимента над 10000 изображений.

Базовые (baseline) и последовательные JPEG



Базовые JPEG являются «обычными»: файлы этого типа поддерживаются всеми программами для редактирования изображений. Браузеры загружают их последовательно, сверху вниз, по мере поступления информации из сети.

Загрузка базовых JPEG

Загрузка базового JPEG-файла в браузере. По нажатию откроется полная версия.

Последовательные JPEG являются другой разновидностью данного формата: они загружаются (как можно понять из названия) последовательно. Сначала вы увидите картинку низкого качества. Затем, по мере поступления графической информации, качество изображения будет постепенно улучшаться.

Загрузка последовательных JPEG

Загрузка последовательных JPEG. По нажатию откроется полная версия.

Читать дальше на webo.in →
Всего голосов 77: ↑72 и ↓5 +67
Просмотры5.8K
Комментарии 40

Версия 0.2.4: больше, лучше, быстрее

JavaScript
Много нового и просто хорошего:

  • Поддержка части CSS2/3.
  • Ускорение в 2 раза: быстрее последних Sizzle и Peppy.
  • Размер кода (min.gz): 1066 байтов.
  • Google Code SVN: code.google.com/p/yeasss .
  • Дизайн для yass.webo.in .

Читать дальше →
Всего голосов 27: ↑25 и ↓2 +23
Просмотры369
Комментарии 29

Оптимизация изображений, часть 5: AlphaImageLoader

Клиентская оптимизация
Перевод
Примечание: ниже перевод очередной заметки «Image Optimization, Part 5: AlphaImageLoader» из блога YUI. Stoyan Stefanov на этот раз рассказывает о тонкостях применения фильтра AlphaImageLoader для IE. Мои комментарии далее курсивом.

Это пятая часть серии статей про оптимизацию изображений. С предыдущими частями можно ознакомиться по адресу:

Данная статья из серии, посвященной оптимизации изображений, рассказывает о технике, доступной только в IE, — CSS-фильтре AlphaImageLoader, — который используется разработчиками для решения проблем с прозрачностью для полноцветных PNG-изображений в IE. Основная проблема с AlphaImageLoader заключается в том, что он влияет на производительность страницы, и тем самым ухудшает пользовательское восприятие. Я утверждаю, что стоит избегать использования AlphaImageLoader во всех возможных случаях.

Маленький экскурс


Как было сказано в одной из предыдущих статей, PNG могут быть нескольких видов, которые могут быть разделены на 2 основных:
  • Индексированные (палитра), их также называют PNG8, можно использовать до 256 цветов.
  • Полноцветные PNG, которые также называют PNG32 или PNG24.


Читать дальше на webo.in →
Всего голосов 34: ↑28 и ↓6 +22
Просмотры1.2K
Комментарии 21

Стыкуем компоненты в JavaScript

JavaScript
После заметки Стыкуем асинхронные скрипты и предложенного решения от Steve Souders я подумал о модульной загрузке какого-то сложного JavaScript-приложения. И понял, что предложенный подход в таком случае будет довольно громоздким: нам нужно будет в конец каждого модуля вставлять загрузчик следующих модулей. А если нам на разных страницах требуются различные наборы модулей и разная логика их загрузки? Тупик?

Ан нет. Не зря Steve упоминает в самом начала своей заметки о событии onload / onreadystatechange для скриптов. Используя их, мы можем однозначно привязать некоторый код к окончанию загрузки конкретного модуля. Дело за малым: нам нужно определить этот самый код каким-либо образом.

Решение первое: дерево загрузки



В качестве наиболее простого способа определить порядок загрузки модулей на конкретной странице можно предложить глобальный массив, содержащий в себе дерево зависимостей. Например, такой:
Читать дальше →
Всего голосов 27: ↑27 и ↓0 +27
Просмотры1.7K
Комментарии 59

Архитектура YASS. Часть 2: выборка по CSS-селектору

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

Постановка задачи



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

В качестве иллюстрации спецификации можно привести следующие примеры:

//вернет элемент с идентификатором my_id
querySelectorAll('#my_id')
//вернет все элементы с классом external
querySelectorAll('.external')
//вернет все абзацы на странице
querySelectorAll('p')


Однако уже тут можно отметить один момент: очень часто нам нужно выбрать просто элемент по его идентификатору или найти все элементы с определенным классом. Эти операции встречаются достаточно часто во всех JavaScript-библиотеках, поэтому они должны выполняться максимально быстро. Запускать весь механизм анализа входной строки селектора просто в том случае, когда нам нужно вернуть один-единственный элемент, заданный с помощью идентификатора, крайне неосмотрительно. Здесь мы можем воспользоваться принципом ленивого программирования: «не делай того, чего можно не делать», — и достаточно сильно ускорить работу для простейших случаев.
Читать дальше →
Всего голосов 25: ↑23 и ↓2 +21
Просмотры844
Комментарии 41

Разгони свой сайт. Электронные версии

Чулан
Сегодня закончилась эпопея с выкладыванием электронных версий книги «Разгони свой сайт», их доступно аж три пять шесть:
  1. PDF-версия, аналогичная ушедшему в типографию макету книги (даже немного лучше за счет исправленных опечаток). Идеально подходит для чтения на ПК или самиздата.
  2. FB2-версия (формат Fiction Book). Просили владельцы наладонников для чтения — вроде форматом остались довольны.
  3. CHM-версия. Незаменима в качестве руководства, которое всегда под рукой. Очень удобно искать нужный материал.
  4. HTML-версия. Уж этот-то формат сложно испортить :) Спасибо laik216.
  5. Онлайн-версия. Просто копия HTML-версии, расположенная на сервере.
  6. WOL-версия. Для владельцев lBook V8, спасибо msa
Все версии (последней редакции — 1.4) выложены на сайте книги. Здесь прямых ссылок не будет: мало ли что поменяется, чтобы в нескольких местах не править.

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

Если кто-то возьмется перегнать CHM в человеческие (=красивые внешне и валидные внутри) HTML-страницы — буду крайне признателен.

P.S. судя по логам, книгу скачали уже более 3000 4000 человек

P.P.S. Судя по отзывам, CHM (и не только) кривоват. Если кто-нибудь знает, как его переконвертировать в нормальный файл — напишите, пожалуйста, в комментариях. На сайте доступны и прошлые версии PDF, которые отличаются некоторым количеством опечаток — нужно 1.4 заменить на 1.2.

P.P.P.S. PDF-версия перевыложена (1.4.1)
Всего голосов 59: ↑54 и ↓5 +49
Просмотры301
Комментарии 102

Автогенерация CSS Sprites

Я пиарюсь
Свершилось. Долгие бессонные ночи не прошли даром и мысль, заявленная Вадимом aka pepelsbey, обрела более-менее физические очертания.

sprites.webo.in (сырая-сырая альфа-версия) — название, собственно, говорит само за себя. Вводим URL CSS-файла — на выходе получаем архив с минимизированным (никакой сортировки селекторов, просто базовая минимизация) CSS-файлом и набором свеженьких спрайтов. Здорово?
Читать дальше →
Всего голосов 76: ↑72 и ↓4 +68
Просмотры571
Комментарии 43

Вышла книга «Разгони свой сайт»

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

Буквально на днях из типографии в Москву привезли, наконец, тираж книги (с небольшим опозданием). По словам главного редактора, предзаказанные экземпляры «уже отправляются», а в магазинах сама книга появится, ориентировочно, в конце марта.


Читать дальше →
Всего голосов 91: ↑82 и ↓9 +73
Просмотры261
Комментарии 55

Издание собственной книги: от А до Я

Профессиональная литература
Разгони свой сайтПосле заметки о выходе книги «Разгони свой сайт» ко мне обратились с просьбой осветить процесс публикации собственного издания. Не скажу, что описанные ниже действия были простыми и очевидными: в ходе возникло масса вопросов, на которые я с трудом мог ответить самостоятельно, поэтому приходилось искать совета буквально везде.

Предыстория


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

Если у вас нет четкого плана изложения материала, то лучше вообще не начинать сам процесс написания. В таком случае он может стать долгим, мучительным, а результат совершенно не удовлетворит потенциальных читателей.
Читать дальше →
Всего голосов 96: ↑91 и ↓5 +86
Просмотры1.1K
Комментарии 41

Установка Web Optimizer

Я пиарюсь
Web Optimizer (Веб Оптимизатор) — приложение, автоматизирующее все действия по клиентской оптимизации для произвольного сайта. На данный момент оно существует в виде отдельного приложения (которое нужно самостоятельно установить на сайт). В качестве базы для Web Optimizer использовался PHP Speedy (который также существует в виде дополнения для Wordpress, Joomla и Drupal).

Давайте рассмотрим, каким образом можно установить Web Optimizer.

Шаг 1: загрузка архива


Загрузка архива
Читать дальше →
Всего голосов 59: ↑57 и ↓2 +55
Просмотры679
Комментарии 46

Версия 0.3

Я пиарюсь
Web Optimizer (Веб Оптимизатор) — приложение, автоматизирующее все действия по клиентской оптимизации для произвольного сайта. На данный момент оно существует в виде отдельного приложения (которое нужно самостоятельно установить на сайт). В качестве базы для Web Optimizer использовался PHP Speedy.

Подробное руководство по установке.
Загрузить версию 0.3.
Читать дальше →
Всего голосов 32: ↑28 и ↓4 +24
Просмотры319
Комментарии 11

CSS Sprites 2.0

Я пиарюсь
После публикации серии статей на тему использования, ненужности и даже автоматизации CSS Sprites, после многодневного анализа текущего положения вещей удалось собрать некоторый набор наиболее часто возникающих проблем при использовании CSS Sprites и методов их решения. Также далее рассматривается прикладной способ по автоматизации создания CSS Sprites для произвольного проекта.

Обзор технологии


CSS Sprites, на самом деле, — всего лишь расширенное использование технологии background, заложенной еще в спецификации CSS1. Все, до чего додумалось прогрессивное человечество за эти годы — это множественный фон у элементов (как он будет совместим с концепцией CSS Sprites еще придется проверить). Основные свойства, которые мы используем для задания фонового изображения.
  • background-image — основная «рабочая лошадка». Именно за ней будущее в виде data:URI, который в конце концов победит CSS Sprites. Но произойдет это нескоро.
  • background-repeat — вторая не менее важная составляющая при использовании фонового изображения. Ведь задавая no-repeat для данного свойства, мы намеренно подчеркиваем, что допустимо использование CSS Sprites для «склейки» изображений (по умолчанию используется repeat).
  • background-position — «волшебная палочка» для CSS Sprites, позволяющая спрятать или показать определенные части фонового изображения.

Читать дальше →
Всего голосов 24: ↑24 и ↓0 +24
Просмотры762
Комментарии 15

Версия 0.3.5

Я пиарюсь
Web Optimizer (Веб Оптимизатор) — приложение, автоматизирующее все действия по клиентской оптимизации для произвольного сайта. На данный момент оно существует в виде отдельного приложения (которое нужно самостоятельно установить на сайт). Приложение протестировано и установлено на таких CMS как Drupal 5 и 6, Joomla 1.0 и 1.5, Wordpress 2.7 и многих других.

Подробное руководство по установке.
Загрузить версию 0.3.5.
Загрузить мини-установщик версии 0.3.5.
Читать дальше →
Всего голосов 32: ↑24 и ↓8 +16
Просмотры407
Комментарии 26

Версия 0.4 — Stable Release Candidate

Я пиарюсь
Web Optimizer Веб Оптимизатор (Web Optimizer) — приложение для автоматизации всех действий по клиентской оптимизации — достиг версии 0.4. Список поддерживаемых систем ширится и растет с каждым днем: Drupal 5 и 6, Joomla 1.0 и 1.5, Joostina, Wordpress 2.7, PHP-Nuke, LiveStreet, vBulletin 3.8 и так далее.

Подробное руководство по установке (немного устарело уже, правда)
Загрузить версию 0.4.0
Загрузить мини-установщик
Помочь проекту материально
Читать дальше →
Всего голосов 43: ↑39 и ↓4 +35
Просмотры451
Комментарии 39

Версия 0.4.5 — Release Candidate 2

Я пиарюсь
Загрузить Web OptimizerМожно снова радоваться. Веб-приложение для автоматизации клиентской оптимизации дошло до версии 0.4.5 — RC 2. Значительно улучшено быстродействие, потребление памяти, добавлено много новых возможностей и поддерживаемых CMS.

Подробное руководство по установке (устарело уже, правда)
Загрузить последнюю версию или мини-установщик
Помочь проекту материально
Читать дальше →
Всего голосов 47: ↑41 и ↓6 +35
Просмотры438
Комментарии 30

Рассылка по вопросам клиентской и серверной производительности

Клиентская оптимизация
Хабралюди!

Если вы хотите задать тупой (или не очень вопрос) по клиентской или серверной оптимизации, ответить какому-нибудь ньюбу или просто узнать новости отрасли — милости просим. Специально для этой цели мы завели рассылку через Google Groups — clientside_ru. Теперь мучить меня по ICQ/Skype совсем не обязательно :)

groups.google.com/group/clientside_ru
Всего голосов 8: ↑5 и ↓3 +2
Просмотры486
Комментарии 0

Часто задаваемые вопросы — 1

Я пиарюсь
Загрузить Web OptimizerДобавление DLE в список поддерживаемых систем вызвало бурный отклик (мною замечено порядка 5 новостей на различных про-DLE сайтах), поэтому ниже постараюсь ответить на несколько наиболее распространенных вопросов.

1. Web Optimizer платный проект?
Нет, проект (на данный момент) абсолютно бесплатный и загружаемый свободно. Есть некоторые планы по его монетизации, но они пока не озвучены (может быть, платной будет только установка для сайтов с посещаемостью более 1000 хитов в сутки, например). Если у вас есть предложения, которые позволил бы окупить качественную разработку и были бы выгодны вам лично, их можно написать в комментариях.

2. Web Optimizer от гугла?
Нет, проект разрабатывается группой активистов (прямо или косвенно связанных с webo.in). Google Code — просто хостинг для файлов и SVN, почти что narod.yandex.ru. Вы же сайты на Народе не называете проектами Яндекса, правда?
Читать дальше →
Всего голосов 55: ↑42 и ↓13 +29
Просмотры510
Комментарии 48