Реактивные вебсайты. Оглавление

    Реактивные вебсайтыНе прошло и трех месяцев с момента официального выпуска первой в России специализированной книги, посвященной клиентской оптимизации, а мы уже собрались писать следующую. Почему мы? Потому что теперь уже полноценный авторский коллектив, а не просто «набор советов из разных источников под моей редакцией». Встречайте героев нашего времени: Евгения Степанищева (bolk) и Глеба Кондратенко (gkond).

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

    Итак, оглавление книги «Реактивные веб-сайты. Клиентская оптимизация в алгоритмах и примерах». Здесь сразу указана основная зона авторской ответственности (чтобы потом было ясно, кого за что бить :).
    1. Введение – Николай Мациевский.
      • Благодарности.
      • Текущие проекты по клиентской оптимизации.
      • Обзор среды. Перспективы.
    2. Обзор методов клиентской оптимизации – Глеб Кондратенко.
      • Анализ клиентской производительности веб-страниц. Заголовки и компоненты страницы. Стадии загрузки страницы. Быстродействие клиентских сценариев.
      • Уменьшение размера загружаемых объектов. Сжатие текстовых файлов. Оптимизация изображений.
      • Уменьшение числа загружаемых объектов. Объединение текстовых файлов. Объединение изображений. Настройка кэширования.
      • Оптимизация структуры веб-страниц. Особенности верстки. Исключение встроенного кода. Расположение стилей и сценариев. Предзагрузка и пост-загрузка. Распределенное хранение файлов (CDN). Исключение избыточных HTTP-запросов.
    3. Алгоритмизация сжатия текстовых файлов – Евгений Степанищев.
      • Потоковые алгоритмы сжатия в браузерах (gzip, bzip2, bzip, deflate, compress, identity), сравнение: несжатый, gzip, deflate, bzip2, compress. Альтернативные браузерные методы сжатия: delta, Google Chrome. Bzip2: Chrome, w3m, OmniWeb.
      • Поддержка методов в браузерах (+ ошибки реализации).
      • Автоматизация: поддержка веб-серверами, сжатие на лету (настройка Apache1, 2, nginx, лайти, c комментариями) и статика (настройка Apache1, 2, nginx, лайти). Расход памяти, нагрузка на процессор. Лайти держит bzip2!
      • Сжатие скриптом. Распознавание что умеет браузер (TE, «x-методы», вес), выставление заголовков: Vary, Content-encoding, Content-length.
      • Другие методы: сжатие Canvas, архиваторы на JS (алгоритм работы packer, например).
    4. Алгоритмы уменьшения изображений – Евгений Степанищев.
      • Распространённые форматы изображений: SVG, JPEG, GIF, PNG (вкратце, какой формат для чего используется). JPEG — полноцветные с потерей, PNG — полноцветные без потрерь, альфа, GIF — анимация, мелкие картинки (кратко о MNG и APNG), SVG — вектор (рассказать, что в IE без плагина пахать не будет, там VML, рассказать, что SVG появился из VML, затронуть поддержку мобильных браузеров, см. Википедию), ICO (если только как ссылка на первую книгу), XBM?
      • Подготовка JPEG. Программы постоптимизации (PureJPG, jpegtran).
      • Подготовка PNG. Программы постоптимизации (PMT, OptiPNG, PNGout, TweakPNG).
      • Подготовка GIF. Программы постоптимизации (GIFLite, SuperGIF, gifsicle).
      • Подготовка SVG. Сжатие SVG: gzip, deflate (SVGZ).
    5. Уменьшение числа загружаемых объектов – Мациевский Николай.
      • Автоматическое объединение текстовых файлов.
      • Алгоритм разбора и сбора CSS Sprites (sprites.in) и data:URI (duris.ru).
      • Кэширование на клиентском и серверном уровне (основы, сброс кэша и немного прикладных решений для серверного кэширования).
    6. Оптимизация структуры веб-страниц – Мациевский Николай.
      • Организация «отложенной» загрузки JavaScript при текущей структуре скриптов и библиотек. Теоретические подходы и практические решения.
      • Практическое использование CDN на примере Amazon, Google и NGENIX.
      • Перспективы «быстрого» JavaScript — от одних стандартов к другим. Браузеры против оптимизаторов?
    7. Технологии будущего.
      • CSS3 (YASS) – Мациевский Николай.
      • Canvas / UI / Flex (?) — Мациевский Николай.
      • Клиентские хранилища. Обзор и виды хранилищ. Что можно хранить и что это даёт. – Евгений Степанищев.
      • Конкретные примеры на базе одной из библиотек (PersistJS) – Евгений Степанищев
    8. Автоматизация клиентской оптимизации – Мациевский Николай.
      • Обзор технологий и решений на рынке (PHP Speedy, Minify, Smart Optimizer, Web Optimizer, getRPO).
      • Руководство по установке и настройке Web Optimizer.
      • Алгоритмы работы, основанные на веб-стандартах.
      • Оценка эффективности (серверная нагрузка – клиентская производительность). Практические результаты.
    9. Приложение. Практические примеры – Мациевский Николай.
      • Оптимизация ASP.NET.
      • Оптимизация Drupal.
      • Оптимизация Wordpress.
      • Оптимизация Joomla!.
    10. Заключение – Мациевский Николай.
      • В качестве послесловия.

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

    В общем, любые комментарии приветствуются. Напоминаю, что все материалы первой книги выложена на сайте, полностью ей посвященном.
    Share post

    Comments 79

      +2
      настройка связок Апач + Энджиникс, для чего используется и какие подводные камни.
        0
        если бы кто согласился данную главу написать (окромя Игоря Сысоева :) — было бы просто замечательно. Боюсь, у текущего коллектива авторов нет настолько большого опыта установки таких связок.
          0
          Пункты которые надо будет описать озвучишь?
            +1
            У меня есть, но я приверженец подхода «выкинем из этой связки Apache».
              0
              К сожалению, mod_rewrite over .htaccess очень популярное решение.
              И пока без апача его не запустишь.
              Вот если бы кто-то написал модуль для nginx для обработки директив mod_rewrite из .htaccess или, хотя бы, для конвертации «на лету» mod_rewrite директив из .htaccess в формат rewrite_nginx…
                0
                Зачем нужно конвертировать mod_rewrite в rewrite_nginx? Rewrite у nginx богаче и лучше устроен, лучше сразу его и писать.

                Сысоев, кстати, упоминал, что в планах есть сделать аналог .htaccess, а пока никто не мешает сделать include куска конфига из любого места, только после изменений нужно слать сигнал nginx'у.
                  0
                  Ну это у меня богаче, а для хостинга и юзеров не объяснишь что надо писать отдельные конфиги. Если что-то будет работать не так как привыкли, техподдержку снесут звонками.
                  Я так понимаю инклудить надо кусок nginx конфига?
                  Напрямую .htaccess не получится или нет?
                    0
                    Никаких htaccess в nginx сейчас нет.
              +1
              Единственное, есть ощущение, что это ни разу не клиентская оптимизация.
                0
                Почему окромя?
                  0
                  я лично не знаю ни одного специалиста, который бы занимался «промышленной» установкой таких связок
                    0
                    Что значит промышленной? По 5-6 в день? :)

                    Точно знаю, что Владимир такую связку не одну развернул.
                      0
                      ну, хотя бы по 1-2 в день на протяжении года :)

                      и еще одно обязательное условие: человек должен хотеть что-то рассказать людям :)
                        0
                        А вот это лучше к нему в личку.
                          0
                          Я довольно долго и тщательно работал с nginx. Настолько тщательно, что меня заметили на форуме и приглашали работать в «Рамблер».
                            0
                            тогда, наверное, стоит включить какой-нибудь обзор настройки nginx для нужд клиентской (и серверной) оптимизации. Только пока не понятно, в какой раздел…
                  0
                  Никогда не понимал смысла в такой связке. У Вас какие-то редкие требования, что не подходит только nginx?
                    0
                    подпишитесь на рассылку Игоря и там будет полно примеров
                      0
                      Я читал рассылку Сысоева несколько лет. Примеров там было совсем немного. В основном, из серии «мне нужна экзотика, типа mod_auth_pam» (кстати, именно эта проблема решается со стороны языка программирования).
                    +3
                    а причем тут редкость требований? например веб-приложение на php, а FastCGI использовать не хочется. напрямую phpшку nginx не поймет, для этого и бутерброд. это как один из самых распространенных вариантов. но не единственный конечно.
                      0
                      Что значит «не хочется»? Какие религиозные причины?
                        0
                        Не думаю что есть смысл здесь это обсуждать, сильно отклонимся от темы, да и обсуждений на эту тему в сети масса.
                          0
                          Я совсем не против пообсуждать в личке. :)
                        –1
                        Не совсем понял, что означает «напрямую phpшку nginx не поймет». Для примера, на nnm.ru используется только nginx, без апача.
                          +1
                          А php-fpm уже не считается?
                            0
                            Так это на тему FastCGI. Мне только не понятно было, почему автор комментария не захотел так использовать nginx. Для каких целей (не считая экзотики), может понадобится связка Apache+Nginx?
                              0
                              1) .htaccess
                              2) mod_*
                            0
                            но с FastCGI
                          0
                          действительно хотелось бы узнать всё и сразу не лазая по нету. как мне кажется время апача довольно дорого (много апачевских процессов нельзя создать — память кончиться, если включен mod_php то можно забыть о многопоточности), а время nginx'a дешево (создать множество потоков — если конечно он многопоточный, для отдачи кучи статики).
                          0
                          Неоднократно слышал о такой схеме: nginx отдаёт статику(картинки, видео, прочее), а мол, апач только динамику.
                          +2
                          Мне кажется, в книге достаточно много разных сравнений — может стоит сделать нечто вроде приложения, в котором в таблицах сравнивать все это (оптимизация в разных CMS, поддержка браузерами методов)? такие таблицы очень наглядны и понятны.
                            0
                            Может есть какие-то ещё не раскрытые методы по м… «массовой оптимизации» для разношерстных сайтов, как например, в случае с shared-хостингом?
                            Кроме использования сжатия для всех сайтов ничего пока на ум не приходит.
                              0
                              при таком увеличении количества посещений, когда остро встанет проблема оптимизации вы скорее всего уже переедите на свой сервер, хотя бы виртуальный, и там сможете воспользоваться всеми советами :)
                                0
                                Дело в том, что серверов уже много, а сайтов ещё больше, т.к. занимаюсь хостингом, потому и вопрос такой неординарный (:
                                Многие методы применимы в штучном исполнении, как спрайты, например. А вот кроме сжатия ничего массового пока не замечено.
                                0
                                глава про Web Optimizer на это нацелена. Думается мне, к моменту написания будет весьма достойный материал собран. В том числе, и для разношерстных сайтов
                                0
                                Я бы из вышеперечисленного перечня организовал бы очень хороший журнал для web-программистов и всех тех кто что либо делает для веб, но думаю, что на момент выхода книги технологии быстро поменяются, имхо лучше каждую из этих тем взять за основу новой рубрики и развивать её ввиде статей в журнале.
                                  0
                                  Первая книга была доступна ещё до публикации, а первые статьи ещё задолго до самой книги появились на webo.in
                                    0
                                    ну, если кто пройдется по блогам веб-стандартистов и просто хороших людей, соберет по RSS материалы — то флаг ему в руки. Журнал получится действительно стоящий.

                                    Все статьи и основная часть материалов будет опубликована на webo.in/ (если еще этого не сделано).
                                  • UFO just landed and posted this here
                                      0
                                      Flex — это технология, а не только плеер.
                                      Для главы «Технологии будущего», Flex подходит по многим параметрам:
                                      1. Гибкое и визуальное построение интерфейса.
                                      2. Клиент — серверная работа с возможностью минимизации обменнного трафика ( читай нагрузки и скорости ).
                                      3. Возможность создания оф-лайн приложений использующих он-лайн сервисы — AIR.
                                      4. Расширение базовых возможностей HTML / Браузеров. ( выбор множества файлов для закачки, индикаторы процесса выполнения и более динамические flash объекты ).
                                      5. Возможность использования единой для браузеров flash-памяти.

                                      Как часть главы по новым технологиям и возможностям которые они представляют — довольно интересный пункт.
                                      • UFO just landed and posted this here
                                          0
                                          видимо, Flex все же стоит выкинуть. Вопрос про производительности текущих технологий Flash весьма велик, а освещать его полностью должной квалификации не хватает
                                        +3
                                        А как успехи у первой книги?
                                          0
                                          информация будет к концу этого месяца, наверное. Пока весьма хорошие :)
                                          0
                                          Это не эту крижечку продавали недавно на конфе в Минске?
                                            0
                                            Нет. То была первая.
                                            0
                                            искренне рад за авторов, молодцы! следил за проектом с первого его упоминания на хабре, в моих глазах проект вырос с домена третьего уровня до книги, что говорит о многом!
                                            • UFO just landed and posted this here
                                                0
                                                в первой книге было мало (почти не было) информации по IIS
                                                тут стоит или не говорить про ASP.NET вообще или давать информацию и по IIS
                                                  0
                                                  Дополнительные главы предлагать можно?
                                                    0
                                                    Конечно, предлагайте!
                                                    0
                                                    Add new:
                                                    «Оптимизация Movable Type»
                                                      +1
                                                      Можем подготовить заметку по оптимизации DataLife Engine как встроенными средствами, так и детальное описание оптимизации с помощью Web Optimizer — с учетом особенностей архитектуры данной CMS, в том числе и правильная установка Web Optimizer на эту CMS.
                                                        0
                                                        /me краснея

                                                        было бы просто замечательно, если бы про MODx такое написали =)
                                                          0
                                                          а кто-нибудь готов написать про нее? Я вот, например, с ней вообще не работал (за исключением прикручивания Web Optimizer :)
                                                        0
                                                        А я и первую Вашу книгу не могу найти в магазинах своего города :(
                                                          0
                                                          Можно с доставкой по почте заказать.
                                                            0
                                                            Выходит быстро и недорого, что приятно.
                                                          +1
                                                          1) оптимизацию запросов AJAX предполагается рассмотреть? к примеру хотя бы реализация пакетных вызовов
                                                          2) в главе Автоматизация клиентской оптимизации — а duris.ru где? или мы теперь конкуренты?
                                                            0
                                                            черт, извини, основное оглавление писалось до того, как duris.ru вышел в версии 1.1 :)

                                                            про оптимизацию AJAX ничего не знаю :(
                                                              0
                                                              может написать вам раздельчик про AJAX и AHAH оптимизацию :), ну ближе к делу помогу материалом
                                                                0
                                                                только не говори, что я не предлагал :)
                                                                  +3
                                                                  ну на большой разделище точно времени не будет :), может пару статей что-ли
                                                            0
                                                            >Алгоритм разбора и сбора CSS Sprites (sprites.in) и data:URI (duris.ru).

                                                            В части «Автоматизация клиентской оптимизации» про утилиты скорее всего.
                                                            +3
                                                            Оптимизация Drupal — там есть 4 вида оптимизации:
                                                            — оптимизация сервера и на сервере (софт, п.о., сжатие и т.д.)
                                                            — оптимизация сервера под Drupal (описана в книге Pro Drupal Development)
                                                            — в Drupal есть встроенная оптимизация контента
                                                            — оптимизация Drupal с помощью модулей… тут не паханное поле: от модулей сохраняющих страницы в HTML и выдающих готовые страницы из memcached до модулей подгрузки этих страниц через AJAX. Ну и конечно всяческие модули сжатия и оптимизации CSS и т.п. Огромное поле для деятельности, по объёму равное одной книге :)

                                                            Удачи в написании, рад буду помочь если нужно с Drupal.

                                                              0
                                                              Также могу помочь с Drupal.
                                                                0
                                                                Drupal + nginx ?!
                                                                какой правильный вариант замены .htaccess ???

                                                                я пользую:

                                                                server {
                                                                listen 80;
                                                                server_name xxx.test;

                                                                access_log /var/log/nginx/localhost.access.log;
                                                                gzip on;
                                                                gzip_comp_level 9;
                                                                gzip_proxied any;
                                                                gzip_types text/html image/png image/gif text/css image/jpeg;
                                                                index index.php;
                                                                root /home/www/xxx;
                                                                location / {
                                                                if (!-e $request_filename) {
                                                                rewrite ^/(.*)$ /index.php?q=$1 last;
                                                                break;
                                                                }
                                                                }

                                                                location ~ \.php$ {
                                                                include /etc/nginx/fastcgi_params;
                                                                fastcgi_param script_FILENAME /home/www/xxx$fastcgi_script_name;
                                                                fastcgi_pass 127.0.0.1:9545;
                                                                fastcgi_index index.php;
                                                                }
                                                                location ~* /files/.*\.(gif|jpg|jpeg|png|css)$ {
                                                                expires max;
                                                                }
                                                                location /misc/feed.png {
                                                                expires max;
                                                                }
                                                                }

                                                                PS вроде работает (сильно не всматривался, на рабочем сервере пока Апач)
                                                                  0
                                                                  хмм, у меня такое ощущение, что правильных статей все же не хватает :)

                                                                  gzip_types text/html image/png image/gif text/css image/jpeg;


                                                                  стоит заменить на

                                                                  gzip_types text/html text/xml image/x-icon text/css application/x-javascript;
                                                                    0
                                                                    +1 согласен
                                                                    только сейчас присмотрелся :)
                                                              0
                                                              Есть проблемы с книгой в pdf формате, скачанной с оф.сайта. Не хватает шрифта в котором набран текст, шрифт мне не известнен.
                                                                0
                                                                Книга супер, авторам респект,

                                                                в варианте CHM «беда с кодировками» (под gnochm редкий случай)
                                                                0
                                                                Вы занимаетесь очень полезной и классной работой :) Спасибо! Надеюсь, книгу не сложно будет купить в печатном варианте в Украине :) Успехов!
                                                                  0
                                                                  Спасибо вам, приятно видеть что издаются книги профессионального уровня. а то рынок и так заполнен всякими «PHP за 24 часа», и как верстать сайты в дримвивере((
                                                                    0
                                                                    Практическое использование CDN на примере Amazon, Google и NGENIX.

                                                                    Можно попросить в этой главе описать в какой момент я должен понять что мне нужно использовать CDN.
                                                                    Какая геоаудитория должна быть, какие свойства у сайта (фотогаллерея, интернет-магазин), посещаемость и т.п. Можно ли самому сделать CDN прикупив второй хостинг?
                                                                      0
                                                                      наверное, да. Только сейчас CDN настолько дешево обходятся, что практичнее «облако» взять, чем второй сервер.
                                                                      0
                                                                      Воспользовался советами, предлагаемыми в книге, еще до оформления ее в виде издания (просто читая материалы на сайте, плавно переходя по ссылкам). Скорость работы реально возросла. Авторам — большое человеческое спасибо.

                                                                      Only users with full accounts can post comments. Log in, please.