Выносим CSS в пост-загрузку

    После сравнительной заметки о CSS Sprites и data:URL все мои мысли были направлены на решение основной проблемы:

    В общем случае [при использовании data:URL], загрузка страницы не ускорится, а даже может замедлиться, потому что фоновые картинки (включенные через data:URL) будут грузиться в один поток, а не в несколько при обычном использовании спрайтов. Если фоновых картинок достаточно много (несколько десятков Кб), то это окажется существенным.

    Данная статья как раз посвящена тому, как можно достаточно успешно справиться с указанной проблемой. Интересно? Тогда, поехали.

    Читать дальше на webo.in→
    Поделиться публикацией

    Комментарии 45

      0
      Люблю я Ваши статьи. Очень помогают в разработке. Руководствуюсь ими при создании CMS/CMF
        0
        Пойду сделаю кофе, вникать долго, но интересно. :)
        • НЛО прилетело и опубликовало эту надпись здесь
            +1
            помогает
            0
            Во-вторых, сообщить браузерам, что они могут отобразить страницу без первого массива правил (ведь если в нем содержатся только фоновые изображения, то они могут и подождать чуть-чуть).
            и пусть весь мир подождет… извините, не сдержался)
            Далеко не всегда фоновые изображения могут подождать, особенно если это фоновое изображение для какой-нибудь кнопки, или заголовка, чего конечно же не должно быть, но у дизайнеров другая точка зрения)
              0
              есть хорошее английское слово accessibility — это когда мы думаем о разных пользователях, а не только с безлимитным каналом и самым продвинутым браузером. Поэтому протестировать страницу «без картинок» просто необходимо перед ее публикацией. А уж как она должна выглядеть при этом — лучше решить дизайнерам и тех. директору
                0
                вот именно accessibility это и касается в первую голову, и «первое» правило accessibility говорит о том что заголовки должны быть текстовые, по-этому в html делается текстовый заголовок, который потом скрывается стилями, и вместо него подкладывается картинка, потому что дизайнер решил что здесь должен быть именно такой шрифт и никакой другой, а @font-face поддерживают единицы. В данном случае, сначала отобразится вся страница и только потом появятся заголовки, что, согласитесь, не есть хорошо. Конечно, эту проблему можно решать и с помошью sIFR, например, но не всем такой способ по душе)
                  –1
                  В данном случае в пост-загружаемый стиль нужно вынести правила скрытия заголовка.
                    0
                    я об этом тоже подумал, но тогда пользователь сначала увидит текстовые заголовки, потом они дружно подмигнут и станут картинками, что тоже не очень хорошо
                      0
                      тут уже каждый сам решает, что лучше, а что хуже. Однако, я бы предпочел начать читать статью на 1-2 секунды быстрее, чем ждать, пока доедут все красивости
                0
                >если это фоновое изображение для какой-нибудь кнопки, или заголовка,
                >чего конечно же не должно быть, но у дизайнеров другая точка зрения)
                Если невозможно объяснить, что сайт должен быть работоспособен при отключенных картинках, от такого «дизайнера» надо избавляться.
                В качестве альтернативы можно предложить вариант текстовых блоков, заменяющих картинки.
                При загрузке картинки либо текст вытесняется в overflow hidden либо показывается/прячется через JS. В этом случе еще и бонус можно получить от SE ( а можно и бан)
                +1
                Заметил интересную особенность при таком подходе в IE6.
                А именно, обратил внимание на поведение фоновых картинок, если их много и если на странице они повторяются.

                например:

                css
                div.my_div {background-img: url('./my_img.gif'); width: 100px; height: 100px}

                html

                <div class=«my_div»></div>
                <div class=«my_div»></div>
                <div class=«my_div»></div>
                <div class=«my_div»></div>

                В этом случае ие6 начинает грузить для каждого дива ЗАНОВО картинку.
                Другие браузеры (и ие7) этого не делают.
                Как только загрузилась картинка они сразу покажут ее во всех дивах.

                PS. Это замечено, если css грузиться после загрузки всей страницы. То есть после официального onload

                PSS.
                >В этом случае ие6 начинает грузить для каждого дива ЗАНОВО картинку.
                Поправка:
                Он заново не грузит, точнее он посылает запрос на загрузку картинки, получает 304 и только потом берет ее из кеша.

                  0
                  наблюдал такое. Однако, было тестирование на mhtml-картинках? У них ресурсный файл-то один. Причем IE его кеширует очень здорово (потом фиг обновишь)
                    +1
                    должно помочь для IE6. видел в mootools.
                    try {
                    document.execCommand(«BackgroundImageCache», false, true);
                    }
                    catch(e){};
                      0
                      это направлено на другой баг IE: обновление картинки при наведении мыши. Но может помочь и в этом случае
                    0
                    сегодня как раз этим и занимался :)
                    летает в воздухе наверное ;)
                      +1
                      Ничего не понял, но все равно круто, смогу лишь только повторить по аналогии. Спасибо автору!
                      +2
                      Скромно замечу, что похоже, у автора навязчивое желание использовать узкий термин reflow там, где можно обойтись русским и априори гораздо более понятным для более широких масс «перерисовка страницы». Более того, термин reflow введён и используется, насколько мне известно, главным образом, в Mozilla, и применительно к другим браузерам такую перерисовку так обычно не называют. ;-)
                        +1
                        спасибо, поправил. Просто немного ум за разум заходит от всех этих последовательностей сразу и не поймешь, где FOUC, где reflow, а где — просто отрисовка :)
                        +1
                        По моему, достаточно сомнительный прирост скорости в 12% с учетом проблем которые с этим возникают.
                          0
                          :) CSS Sprites тоже достаточно сомнительная техника, а использовать ее сложнее в свете данной статьи
                            0
                            Это все хорошо, и я поддерживаю такого рода изыскания. Вот сейчас воодушевленные специалисты по верстке все кинулись оптимизировать, расковыривать свои таблицы в несколько потоков, время тратят…

                            А php/asp/pithon и т. д. (подставьте что больше нравиться) программер не озаботился оптимизацией серверной и на фоне 5 секунд загрузки на нагруженном сервере прирост скорости на 0.1 сек не очень заметен. Или контент менеджер вставляет в статью картинку в 600Кб и в ус не дует.

                              0
                              *python конечно же :)
                                0
                                Да, безусловно повышение качества верстки необходимо. Но не стоит впадать в крайности. Многие верстальшьики сейчас не могут пройти простой тест на css select'ы не говоря уже о нюансах оптимизации. Я тоже согласен с тем, что такие лабораторные работы по нахождению различных новых техник подталкивают к более углубленному изучению вопроса.
                                +1
                                Зато сайт автора грузится быстрее всех, что я встречал
                                +1
                                интересный поход, спасибо за статью. возникли вопросы
                                1) как бы нормально автоматизировать сборку таких CSS файлов.
                                2) для Safari я так понял проблема в том что, он не начинает отображать страницу пока не загрузит все стили? можно запросить стили используя AJAX + после загрузки затолкать css в head через style

                                  0
                                  автоматизировать просто: достаточно собирать все CSS-файлы в один, потом выделять правила, содержащие background: ... url(), в одном файле оставлять только цвет фона (если есть в правиле), в другой — отделять полностью селектор с фоновой картинкой, повтором и позиционированием. Дальше прогонять второй файл (или дробить дальше) через инструмент, заменяющий вызовы картинок на комбинированный data:URL

                                  Насчет Safari — спасибо за совет. Только ведь у нас второй файл ресурсный, в нем кроме самих CSS-объявлений еще и комментарии с mhtml-картинками зашиты… И как их скормить IE через AJAX — это еще придумать надо…
                                    0
                                    скорее всего придется отказаться от CSS спрайтов, ваш подход видится мне более привлекательным.
                                    для ИЕ можно и не закачивать через АЯКС, а так как вы писали. ну и возможно все ж как то можно затолкать в ИЕ mhtml :)
                                      0
                                      да я чуток обмозговал — проблема же только в Safari, а ему mhtml не нужен… В общем, буду думать на досуге :)
                                        0
                                        а почему не отделить MHTML от dataURL, разделить на два файла
                                          0
                                          еще интереснее. Однако, тяжелее поддерживать. Т. е. тут без автоматической системы сборки уже не обойтись.

                                          Обязательно рассмотрю этот подход
                                            0
                                            да, вот имено, я про это и говорил в пункте 1, чтобы конечный скрипт собирался автоматом через .bat или .sh, сделать чтото на подобии как YUICompressor
                                        0
                                        хотя если MHTML не поддерживает прозрачные картинки, это гораздо хуже, у меня последнее время чуть ли не одни полупрозрачные изображения
                                          0
                                          а может возможно использовать MHTML + Filter для прозрачности?
                                            0
                                            если можно решить вопрос с прозрачностью мне тогда интересно будет сделать авто сборщик css -> dataURL + MHTML, который в последующем при договоренности можно будет вставить как сервис в webo.in.
                                              0
                                              буду копать, как решать вопрос с прозрачностью. Но в любом случае для IE можно клеить прозрачные спрайты, а для всех (и всего) остальных в data:URL + mhtml
                                                0
                                                если клеить для ИЕ прозрачные спрайты, тогда нет смысла делать автосборщик data:URL, потому что получается 2 работы направлены на решение одной задачи.
                                                  0
                                                  частично соглашусь, однако, через полгода после выхода IE8, доля «IE» (который не понимает data:URI) сократится до 30-40%. Поэтому я бы предпочел все же 2 работы :)
                                                    0
                                                    я думаю можно спрайты упустить, т. е. для ИЕ качать поотдельности каждую картинку.
                                                    спрайты реально убивают много времени.
                                                    надеюсь всеже что можно както решить опрос с прозрачностью и MHTML
                                                      0
                                                      Итак. Проблемы абсолютно те же самые, что и для обычного PNG. А именно: нужен AlphaImageLoader для IE6-. Если нужно повторение картинки по осям — методы решения абсолютно аналогичны (дополнительная разметка).

                                                      Я собрал две страницы
                                                      webo.in/tests/mhtml-transparency/50kb/
                                                      webo.in/tests/mhtml-transparency/100kb/

                                                      IE позволяет запихивать в mhtml достаточно большие картинки (показывает корректно обе страницы). FF/Opera только первую (data:URI больше ~30Кб не лезет).

                                                      Естественно, используется PNG-24. Возможно, есть какие-то грабли конкретно для PNG-8 или GIF. Но поднятый вопрос (пока) решен успешно.
                                                        0
                                                        ну вот и отлично, я так и думал что решение то же что и для обычного ПНГ.
                                                        грабля с размером неприятна. для полного счастья нехватает все ж «больше-размерности». ну все рано, появился основательный повод сделать автосборщик.
                                                          0
                                                          да, меня уже просили прикрутить что-то подобное для webo.in, но пока это нужно лишь единицам, как я понимаю.

                                                          В общем, это стоит в to-do листе, но в любом случае, нужен URL CSS-файла, чтобы прикручивать (для mhtml). Т. е. будет доступно только для проверенных сайтов. + я бы разграничивал по объему изображений (т. е. до 10Кб клеил, остальное — пусть отдельными файлами).
                                    +1
                                    прочел статью, на которую дана ссылка в начале топика, пробежал глазами сам топик.

                                    по поводу проблемы сложилось четкое ощущение: высосано из пальца.

                                    мотивирую:
                                    1. проблемы css-спрайтов обрисованы для тех случаев, когда они (спрайты) используются «без головы», а некоторые упомянутые проблемы, весьма спорны (в том смысле, что являются ли они проблемами, — к примеру, в статье «спрайты — зло» написано, что они (спрайты) требуют введения доп. несемантической разметки, заменяющей, в принципе, тег img и это дано как проблема; однако так ли это — бооольшой вопрос)
                                    2. весьма странно, что в оригинале статьи о том, что спрайты — зло, автор указывает на невозможность позиционирования фонового png с прозрачностью для IE6… есть же уже IE PNG fix 2 пусть и альфа, но вполне работает.
                                    3. описанная в этом топике методология, по моему скромному мнению, весьма специфична и может использоваться на ресурсах со сверхвысокой посещаемостью, коих в сети весьма и весьма немного.

                                    резюме: выигрыш по скорости 12% — рассчетный. тестов с описанием методологии тестирования нет.

                                    описанное решение, на мой взгляд, является пока слишком сырым для практического использования.

                                    предпочитаю нормально сделанные спрайты.
                                      0
                                      1. Классическим примером является создание блока со скругленными уголками. В большинстве случаев требуется введение дополнительной разметки (вложенных div'ов или псевдо-картинок)

                                      2. Не совсем понял мысль. Процитирую из статьи
                                      Спасибо rsa, также у IE возникают проблемы с позиционированием полупрозрачных PNG-картинок (которые нужно вставлять через AlpaImageLoader). Таким образом, больше одной такой картинки в спрайт не добавить (в левый верхний угол). Спасибо sirus, это можно обойти при помощи crop или, как указал pepelsbey, абсолютного позиционирования и дополнительной разметки.

                                      3. Описанная методология может использоваться на любых ресурсах. Вы же не будете делать дерьмовый дизайн для сайта с 5 посетителями в день? А если эти 5 человек заходят, чтобы выбрать коттедж на Новой Риге?

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

                                    Самое читаемое