вебмастер, фидошник
0,2
рейтинг
11 октября 2011 в 15:38

Дизайн → Пример ≈двукратного ускорения загрузки шрифта для заголовков из Google Web Fonts, осуществляемого выборкою оптимальной версии его tutorial

[иллюстрация-скриншот]Если на сайт вики-энциклопедии «Циклопедия» забредёт пользователь компьютера, оснащённого современным программным обеспечением Корпорации Microsoft, то тогда взгляд его прежде всего окажется привлечён шрифтом заголовков первого и второго уровня («Циклопедия», «Культура», «Общество», «Наука и техника», «Природа и человек», «Быт»): такой шрифт нынче не часто встречается во Всемирной Паутине (это вы можете без труда смекнуть и самостоятельно, когда сравните фрагмент скриншота, мною справа для того приложенный, с собственным вашим опытом).

Но этот шрифт, господа, да станет всем нам примером того, как не следует оформлять наши заголовки. А угадаете ли, почему это так? Да потому, что шрифт этот — Candara (и это нетрудно увидать воочию: достаточно прибегнуть к расширению «Context Font» или вглядеться в нынешний вики-код заглавной страницы Циклопедии и её подшаблона «Раздел»). Некоторые из нас ужé знают или хотя бы догадываются (а другим достаточно взглянуть в Википедию, чтобы узнать) о том, что Candara — это шрифт эксклюзивный, который встречается только в сравнительно недавних продуктах Корпорации Microsoft, таких как последние Windows (Vista, Windows 7) и Office 2007, да ещё раздаётся в составе Microsoft Powerpoint Viewer 2007 и Microsoft Office Compatibility Pack (в том числе для более ранних систем — для Windows XP, для Windows 2000). Если же на такой сайт забредёт читатель с Линуксом, или Маком, или Андроидом, или Айфоном, или Айпадом — то тогда, сами понимаете, «Кандару» взять ему будет неоткуда — и вид заголовка поневоле станет далеко отличаться от желаемого.

А ведь можно обеспечить единообразное отображение заголовка во всех системах и браузерах; для этого достаточно попросту отгрузить всем читателям один и тот же шрифт. Шрифт можно раздавать с собственного же сайта (добавив продуманные правила @font-face в свой CSS), а можно воспользоваться услугами внешнего хостинга шрифтов — например, услугами коллекции свободных и бесплатных шрифтов «Google Web Fonts», чей красивый новый интерфейс обсуждали на Хабрахабре в конце июня. О ней-то и поговорим под хабракатом.

Что следует сказать по поводу употребления Google Web Fonts при оформлении заголовков?

Уместно отметить для начала, что коллекция Google Web Fonts, как и вообще загрузка шрифта через @font-face, наилучшим образом подходит именно для заголовков. Предшествовавшие ей «костыли» (навроде sIFR или Cufón) также употреблялись только для заголовков: разумный автор сайта нипочём не стал бы употреблять их для основного текста страницы потому, что эдак и рендеринг мог бы стормозить, да и выделение текста мышью могло захромать. Однако, как ни странно, у шрифтов @font-face также есть свой бич — и это значительный объём их.

Чтобы удостовериться в этом, попробуйте выбрать на сайте Google Web Fonts все четыре стиля шрифта PT Serif («Normal 400», «Normal 400 Italic», «Bold 700», «Blod 700 Italic»), и стрелка индикатора «Page Load» перейдёт в красную область шкалы, показав значение «350». Если же вы отметите чуть ниже галочками оба набора символов (и «Latin», и «Cyrillic»), то тогда стрелочку зашкалит, а индикатор покажет значение «700».

Честно говоря, господа, я не имею совершенного представления о том, что значат эти числа: разработчики Google не озаботились никак надписать их, и даже нельзя быть совершенно уверенным в том, пропорциональны ли они некоторому времени закачки или всё же объёму закачиваемой информации (хотя последнее вероятнее). Я, однако же, не постеснялся провести опыт: зашедши Файерфоксом, оставил единственную галочку на стиле «Normal 400» (после чего индикатор «Page Load» показал значение «90») и затем прочитал код CSS по адресу http://fonts.googleapis.com/css?family=PT+Serif и скачал шрифт по URLу, содержавшемуся в этом коде. Скачался файл WOFF размером 43 880 байтов, так что я имею основание думать, что если индикатор «Page Load» показывает некоторый объём, то это уж точно не количество килобайтов шрифта в формате WOFF — вероятно, речь идёт скорее об объёме шрифта в формате EOT (в котором шрифты обыкновенно бывают ≈вдвое более увесисты, чем в WOFF). Кстати, если открыть тот же адрес Эксплорером, то в коде CSS является ещё другой URL, ведущий ко шрифту EOT — тот шрифт весит 87 122 байта, а значит, косвенно подтверждает моё предположение. (Показания индикатора «Page Load», возможно, являются округлёнными.)

Да ведь это же много. Если при первом посещении сайта из Интернета станут скачиваться шрифты на несколько сотен килобайтов (что необходимо для четырёх различных стилей), то тогда разве что пользователи безлимитного высокоскоростного Интернета (LTE, WiMAX, GPON, ETTH, FTTB, ADSL), возможно, ничего не заметят — а все остальные читатели сайта, безусловно, вознегодуют. И они будут правы в своём негодовании. Особенно жаль тех пользователей мобильного Интернета, у которых оплата траффика идёт помегабайтно, и тех пользователей корпоративного Интернета, у которых объём траффика является жёстко ограниченным.

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

Более того: если все заголовки ваши состоят только из букв русского алфавита (а ведь это именно так в случае с «Циклопедией», ставшей нашим примером), то можно ещё дополнительно экономить на объёме файла со шрифтом.

Зайдите на сайт Google Web Fonts и выберите шрифт «Cuprum», который имеет единственный (прямой) стиль начертания символов. Индикатор «Page Load» покажет значение «43». Внизу вы увидите галочки «Latin» и «Cyrillic», предназначенные для настройки набора символов: галочка «Latin» установлена (и является серенькою: снять её не удастся), а галочка «Cyrillic» не установлена, но её можно поставить, после чего индикатор «Page Load» покажет значение «86». Обратите внимание на то, что после этого (по крайней мере, в Файерфоксе) галочка «Latin» перестаёт быть серенькою, её можно снимать и устанавливать, однако на показания индикатора «Page Load» её состояние никак не влияет.

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

Способ, позволяющий невозбранно достигнуть этого, без труда отыскивается в документации по Google Web Fonts — в разделе «Optimizing your font requests (Beta)». Оказывается, URL скачиваемого CSS-кода может быть дополнен параметром «text», содержащим все необходимые символы шрифта; тогда в файле скачиваемого шрифта не будет никаких символов, кроме этих.

Таким образом, прежде чем снабдить заголовки на сайте вожделенным правилом «font-family: Cuprum, sans-serif;», наиболее уместно уложить в начало CSS-кода вот какую директиву:

@import url('http://fonts.googleapis.com/css?family=Cuprum&text=%D0%90%D0%91%D0%92%D0%93%D0%94%D0%95%D0%81%D0%96%D0%97%D0%98%D0%9A%D0%9B%D0%9C%D0%9D%D0%9E%D0%9F%D0%A0%D0%A1%D0%A2%D0%A3%D0%A4%D0%A5%D0%A6%D0%A7%D0%A8%D0%A9%D0%AA%D0%AB%D0%AC%D0%AD%D0%AE%D0%AF%D0%B0%D0%B1%D0%B2%D0%B3%D0%B4%D0%B5%D1%91%D0%B6%D0%B7%D0%B8%D0%BA%D0%BB%D0%BC%D0%BD%D0%BE%D0%BF%D1%80%D1%81%D1%82%D1%83%D1%84%D1%85%D1%86%D1%87%D1%88%D1%89%D1%8A%D1%8B%D1%8C%D1%8D%D1%8E%D1%8F0123456789%20%A0');

Объём скачивающегося при этом файла WOFF сокращается до 20840 байтов за счёт оптимизации, а именно за счёт выборочного подбора ограниченного множества символов:

  • пробел («%20»), неразрывный пробел («%A0»);
     
  • цифры («0123456789»);
     
  • строчные буквы: «абвгдеёжзиклмнопрстуфхцчшщъыьэюя»;
     
  • заглавные буквы: «АБВГДЕЁЖЗИКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ».

Разумеется, возможно и дальнейшее уменьшение объёма файла со шрифтом — оно достигается, если в параметре «text» ограничиться одними только реально используемыми в заголовках заглавными буквами, а не перечислять все их. Тем не менее, это отнюдь не целесообразно, так как резко ограничивает дальнейшее редактирование заголовков на той странице, где шрифт используется. Типичная экономия на буквах составляет ≈4 килобайта — а значит, не стóит этого.

Наглядным примером вышеприведённого @import и последующего употребления шрифта «Cuprum» является заглавная страница вики-энциклопедии «Традиция».

Полагаю, что все вы догадались уж, что этот метод с лёгкостью может быть перенесён и на оформление заголовков любым другим шрифтом из числа имеющихся в коллекции Google Web Fonts. Достаточно переменить значение параметра «family» и подобрать собственное значение параметра «text» (например, включив туда также тире, запятую, многоточие и другую пунктуацию, если заголовки на вашем сайте содержат их).
Mithgol the Webmaster @Mithgol
карма
59,5
рейтинг 0,2
вебмастер, фидошник
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Дизайн

Комментарии (76)

  • +37
    Пример ≈двукратного ускорения загрузки шрифта для заголовков из Google Web Fonts, осуществляемого выборкою оптимальной версии его

    Воистину воскрес.
    • +25
      У меня монитор замироточил.
      • –1
        Я так понял обсуждать тему мы в коментах не будем?

        В сафари данное решение кто-то проверял? а то он скрывал перед загрузкой шрифта все надписи скрывал
  • +3
    Тысяча и один способ сломать верстку на хабре.
    • +1
      В чём ваша проблема с вёрсткою?
      • –1
        С версткой. Без «ю».
        • +8
          Выбор полногласной или неполногласной формы творительного падежа в русском языке является выбором автора текста.
      • +1
        Вот в чем. Chrome 14.
        • –1
          Ничем не могу помочь.

          Слишком длинная строка в моём коде CSS. Браузер Firefox переносит её, а Chrome нет.

          Правило «white-space: pre-wrap» имеется в коде CSS Хабрахабра, однако, видимо, Хрому не хватает его.
          • 0
            Никаких претензий к вам нет и быть не может.
            Это, скорее, к разработчикам Хрома. Ну и к верстальщикам заодно.
            • +1
              У меня складывается такое впечатление, что у верстальщиков не так много способов достичь желаемого — ну, разве что на стороне сервера повтыкать «<wbr>» после каждого символа в достаточно длинных «словах». (А это изврат.) Идеальным же способом станет свойство «overflow-wrap» в CSS3, однако его-то, кажется, как раз никто ещё и не поддерживает. (Или я пропустил.)
              • +1
                overflow: auto
  • +34
    Заголовок лишь читая, приятно осознать, кто топика автор.
  • 0
    Мастер?
  • 0
    43 880 байт * 8 = 351 040 бит ≈ 350кбит.
    87 122 байт * 8 = 696 976 бит ≈ 700кбит.

    Видимо, эти цифры и показывает загадочный Page Load.
    • –1
      Нет, не сходится.

      43 880 байтов — размер одного стиля, а «350» — показание индикатора для четырёх стилей (обычного, жирного, курсивного, жирного курсива).

      Для одного стиля (обычного) индикатор показывает «90», как я и сказал.
  • НЛО прилетело и опубликовало эту надпись здесь
    • +12
      А я вот не заметил ничего необычного. Грамотный, богатый, полнокровный язык. Поотвыкали от такого.
      • НЛО прилетело и опубликовало эту надпись здесь
      • НЛО прилетело и опубликовало эту надпись здесь
      • +3
        Грамотный? Вы шутите?
        — сравните фрагмент скриншота с собственным вашим опытом — Британские ученые любили сравнивали скорость света с температурой на Луне.
        — увидать воочию — а масло на Руси издревле масляным было.
        — взглянуть в Википедию — Пушкин взглянул в пост и застрелился.
        — читатель с Линуксом — и с чашкой чая.
        — далеко отличаться — и близко быть похожим, я полагаю

        Дальше лень.
        • 0
          Это вы что цитируете? В топике я не вижу таких фрагментов.
          • 0
            Ну поищите получше.
            • 0
              Про британских учёных ни слова не нашёл, после тире это отсебятина. Я ни вижу никаких проблем с конструкциями «взглянуть в Википедию», «читатель с Линуксом», и никаких непреодолимых со всеми остальными. У автора такой стиль. Вы Платонова читали?
              • –1
                Ну да, после тире — это мой комментарий. Взглянуть можно на что-то, а заглянуть во что-то. Читатель с Линуксом тоже где-то за гранью нормы. Собственно, текст с такими ляпами нельзя назвать грамотным, о чем я вам и пытался сказать.
                • 0
                  «Андрий стоял ни жив ни мёртв, не имея ду­ха взглянуть в лицо отцу». Это написал Николай Васильевич Гоголь — современник того сáмого Пушкина, которого Вы так необдуманно упомянули.
                  • –2
                    Ушаков: ВЗГЛЯНУТЬ, взгляну, взглянешь, ·совер., на кого-что.
                    Ожегов: Взглянуть — -яну, -янешь; сов., на кого-что

                    Проблема в том, что а) вы не Гоголь б) ваша статья — не Тарас Бульба
        • +2
          Дионисий Галикарнасский заповедал, что плеоназм — это обогащение речи словами, на первый взгляд излишними, но в действительности придающими ей ясность, силу, ритмичность, убедительность, пафос, неосуществимые в речи лаконической.

          Из уважения к этому древнему ритору прошу Вас не путать плеоназм и тавтологию.
          • +3
            Да, это сразу, резко, бескомпромиссно и стремительно помогло, пособило, выручило во всех вышназванных мно случаях, да и не в названных за неимением времени тоже.

            Сергей, вам правильно сказали ниже, что иногда такой стиль неуместен, тем более владеете вы им не очень хорошо. А, глядя на смешение устревшх слов и неологизмами вроде «браузер», это выглядит откровенно уныло. Да и посмотрите, во что превратился топик. Вы хотели блеснуть красноречием или устроить обсуждение своего стиля? Такое происходит не в первый раз. Если бы вы действительно хотели донести информацию до людей, то учли бы предыдущий опыт. А так это выглядит как позерство и смотрится просто глупо. А пафос, конечно, очень важен в технических статьях. Всепренепременно, ритмично и убидетельно сие есть.
            • +3
              А, глядя на смешение устревшх слов и неологизмами вроде «браузер», это выглядит откровенно уныло.


              Неправильное употребление деепричастного оборота — глаз режет куда более, нежели возвышенный стиль топикстартера.
              • –4
                Ну да, опечатался, вместо «и» надо «с». Мысль опережает руки. Но я, как бы, ни на что и не претендую, в отличие от топикстартера.
                • +2
                  Я не об этом. Предложение не согласовано — «глядя…, это выглядит…»: выходит, что «это» и глядит и выглядит.
                  • –5
                    Да, хорошо, если вас это успокоит, я пишу не очень грамотно. Предложение должно выглядеть так: А, учитывая смешение устревшх слов с неологизмами вроде «браузер», это все выглядит откровенно уныло. Но ведь речь не обо мне, правда?
                    • +2
                      Да нет же, чёрт побери. Предложение не должно так выглядеть. Я же указал, что ́ у Вас неправильно — употребление деепричастного оборота.
                      • –2
                        Ну ок, я с этим ужасно лажанулся. Простите меня пожалуйста, я последние годы живу вне русскоязычной среды. Возможно, причина в этом. Но какое отношение это все имеет к тому, что я пытался сказать? Текст Мицгола стал грамотнее? Я в чем-то сильно ошибся в изначальном комменте по сути, а не в форме? Все эти странные обороты куда-то исчезли? Мы вдруг оказались в 19 веке? Или хабр перестал быть техническим ресурсом?
                        • +1
                          Да, текст Мицгола вполне грамотен и приятен для чтения, хотя и своеобычен, возможно, сверх меры. Полагаю, что чувство языка отказало Вам как в форме, так и в содержании Вашего первоначального комментария.
                          • –1
                            Т.е., я правильно понял, что далеко отличаться — это норма? Равно как и просторечные «навроде», и все, что я указал выше. Ну пусть будет так. Что тут скажешь.
                            • 0
                              Вы исходите из убеждения в том, что искоренение просторечий является борьбою за грамотность, а я исхожу из убеждения в том, что чрезмерное искоренение просторечий является пахманизмом.
                              • –4
                                Сергей, хабр — это не литературный кружок, и ваш стиль здесь не совсем к месту. Вас это, наверное, мало волнует, но подобное выглядит нелепо и смешно, и провоцирует дебаты не о проблеме, поднятой в топике, но о форме подачи. Всему свое время. Неужели вы не видите, что мало кто воспринимает вас всерьез. По-моему, хороший повод задуматься, до чего вы «доборолись».
                            • 0
                              А почему нет? Грамматически всё корректно, а ограничивать свободу творчества на «Хабре» стилистически — я не понимаю, на каком основании? Это свободное сообщество, а не академическое издание. Чем просторечие или архаизмы в данном контексте менее допустимы, нежели олбанизмы или стилистически нейтральная речь, тем более не всегда вполне грамотная?
      • +1
        Вот и меня стало удивлять что-то только когда долистал до комментариев, и скорее это были комментарии, чем заголовок.
    • +2
      Автор просто не в курсе, что неоправданное употребление устаревших слов — это стилистическая ошибка.
      • +1
        Лишь только в том случае, если они выбиваются из общего стиля текста.
        • 0
          Поэтому и «неоправданное»
          • +1
            В данной статье общий старомодный стиль текста оправдывает употребление устаревших слов. Стилистическая ошибка — когда вы в тексте по неведению употребляете стилистически выбивающиеся слова или формы. Здесь же автор употребляет устаревшие формы и слова сознательно, поскольку на них строится его авторский стиль. Соответственно, стилистической ошибкой это не является.
            Пардон за занудство.
  • +2
    А если по делу, то мне интересно, есть ли пользователи, которые без секундомера заметили перемены?
  • 0
    Осуществляемый (кем? чем?) выборкой. Я бы написал в приват, но есть у меня странное подозрение, что вы эту ошибку специально делаете.

    Зачем вы пишите безграмотно?
    • +5
      Раньше это было нормою. :)
      • +1
        Насколько я знаю его возраст — он этого времени даже в пелёнках не застал. А значит, делает это специально. Мотивы не знаю, но могу предположить, что таким образом он хочет доказать, что раньше писали и делали лучше. Особенно умилительно это выглядит в описании современных технологий.

        Я бы понял, если бы человек так писал в статье про преимущества html3.2 над css, но в упомянутом сочетании — это откровенная безвкусица.
    • +13
      Это не ошибка, а несколько устаревшая форма, которая, учитывая общий уровень текста, просто непременно употребляется намеренно. Обратили бы лучи грамматики на 95% прочих топик-стартеров, которые реально писать не умеют.
    • +6
      Есть две формы: полногласная и неполногласная. По большому счету это всё на усмотрение автора.
      • 0
        А ещё есть понятие «стиль» и «жанр». Использование в публицистике без стилистических надобностей приёмов других жанров — явная ошибка. Как если бы в научной статье вдруг кто-то написал «очаровательная финтифлюшечка в предыдущей формуле...».
        • 0
          Ну вот придет мицгол и всё объяснит, если захочет. Я не его защитник, и что у него творится в голове я тоже без понятия. А обсуждать его мотивы и как человека, мне почему-то не хочется.

          А что касается надобности приёмов, то, к счастью, это решает автор. А конкретный читатель лишь может оценить, но ничего не решает. А стиль и жанр существуют лишь для классификации и направления на путь истинный неумелых авторов. Хороший авторский текст может переплетать в себе различные стили и жанры абсолютно без проблем. В этом и прелесть авторских текстов.
    • +1
      Он имперец.
      • 0
        Так он им-перец или таки веб-технологиями интересуется? Как-то плохо сочетается. Я даже поинтересовался только что, был ли хоть в одной империи Интернет. Нет, говорят, не был.
        • –1
          Вот к сожалению так и происходит, что вроде и топик попадается интересный, и автор ужé того.

          А чем Северная Корея не империя? =)
          • –1
            Поскольку у них там чуть интернета есть, то они уже не могут считаться настоящей империей. Вот появился в Советском Союзе интернет — и не стало Советского Союза. Если бы в Римской Империи интернет появился, то она бы даже Г.Ю. Цезаря не пережила бы — рассыпалась.

            (вы только представьте себе количество твитов в момент пересечения Рубикона)
            • +2
              Ваша шутка не подтверждается наличием интернета во многих частях британской империи.
              Можно, конечно, отмазаться и сказать, что она теперь зовётся «Содружеством государств». ;)
              • +1
                И у вас повернётся это назвать империей? Мирное такое европейское государство…
                • 0
                  Да, за исключением того, что оно во-первых, не мирное, а во-вторых, не европейское.
                  Но, судя по вашей репутации, с вами спорить бесполезно, так что я умолкаю.
          • +1
            Ничем не империя. Для начала, отсутствием колоний.
        • +10
          Так или иначе, тексты Сергея с точки зрения русского языка лучше и качественнее очень и очень многих на хабре. Лично меня вообще никак не коробит, не задевает и внимания этому не придаю. Читать приятно. Имхо, вы на ровном месте проблему нашли. Текст написан полностью в соответствии с правилами русского языка.
          • +4
            Я убеждён, что у него проблема не с правописанием.
            • –2
              А с чем? Ксенофобией он кажется обделен, что нельзя сказать о его оппоненте.
          • 0
            Мицгол скоро будет писать на глаголице, вот тогда и поговорим.
            • +1
              Да и пусть пишет, в чем проблема-то. Хабр система саморегулируемая. Десяток фейлов и писать он больше не сможет. А пока что, очевидно, что это всё мало кого напрягает. Статьи читают, плюсуют, минусуют и т.д. и т.п., но пока в плюсе.
        • –1
          Говорят, есть :) В Российской империи 2011-го года разлива. :)
          • 0
            Нет такого государства.
  • +1
    >@import url('http://fonts.googleapis.com/css?..

    Флуд

    использование в комментариях или хабратопиках html-кода (даже включающего разрешённые html-теги), искажающего внешний вид страниц сайта;
    • +2

      Конечно, тут, пожалуй, косяк инопланетян, но, всё-таки, неприятно когда неожиданный горизонтальный скролл)
    • 0
      Чуть выше уже писали, что данное явление свойственно не всем браузерам. FF всё переносит.
  • +2
    Спасибо за интересную и познавательную статью, однако вынужден придраться к следующей фразе
    А ведь можно обеспечить единообразное отображение заголовка во всех системах и браузерах

    Единообразное отображение заголовка во всех системах и браузерах можно обеспечить разве что путем отображения картинки или иными побочными способами т.к. в реальности вся возня со шрифтами может разбиться об различия в отображении шрифтов между различными системами, браузерами, их версиями, а также такой банальностью как разницей в состоянии ClearType (включен он или выключен).
  • –1
    Прочел с удовольствием
  • +1
    Отличная статья, сподвигла попробовать.

    Всё бы хорошо, но в Опере google web fonts отображаются Times`ом.
    Есть какие-нибудь идеи?

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