Сегодня Smashing Magazine исполняется восемь лет.

Восемь лет долгое время в Интернете, но для нас это действительно doesn’ т чувствовать себя, как долгое путешествие вообще.Ситуация изменилась, развивалась и двинулись дальше, и мы с благодарностью принять на себя новые задачи по одному.Чтобы отметить этот особый маленький день, мы хотели бы поделиться несколько вещей, которые мы узнали за последний год о производительности challenges этого самого сайта, а также о работе, которую мы сделали в последнее время.Если вы хотите, чтобы обработать быстрый отзывчивый сайт, вы можете найти несколько интересных самородков, стоит прислушаться.–   Эд .

Улучшение является вопрос устойчивого, постоянного повторения.Когда мы переработали Smashing Magazine Вернуться в 2012 году, наша главная цель состояла в том, чтобы установить достоверную брендинг, который отражал бы амбициозную редакционную направление журнала.Мы сделали это, прежде всего, путем сосредоточения внимания на разработке восхитительный опыт чтения.На протяжении многих лет, наш фокус не изменилась;однако, что очень актив, который помог установить наш бренд превратился в крупный bottleneck .

Good Old-Fashioned Сайт Decay

Оглядываясь на первые дни нашего реконструкции, некоторые из наших решений кажутся quick’n'dirty исправления, а не звук долгосрочные решения.Наши рекламные ограничения подталкивали нас к компромиссам.Старые браузеры отвез нас в зависимость от (относительно) тяжелых библиотек JavaScript.Наша техническая инфраструктура привели нас к тяжело настроить WordPress плагины и комплекс PHP логика.С каждым новым добавлена ​​функция, наш технический долг вырос, и наш стилей, разметки и JavaScript не получали какой-либо компактной .

Звучит знакомо?Правда, отзывчивый веб-дизайн, как техника часто получает очень плохо rap для вздутие живота веб-сайты и делает их трудно поддерживать.(Не то, чтобы не отвечающих сайты по-другому, но это уже другая история). На практике, все активы на гибкой сайте появится довольно много everywhere ¹ : будь то медленно смартфон,причудливый таблетки или фантазии ноутбук с экраном Retina.И потому, что запросы средств массовой информации просто предоставляют возможность respond к Размер экрана — и нет, скорее, имеют более локальный, автономный области видимости — добавить новую функцию и регулировать опыт чтения потенциально означает идти через каждый икаждый медиа-запрос, чтобы предотвратить неразбериху и исправить Проблемы компоновки .

“Мобильная первых” означает “Всегда Mobile First”

Когда дело доходит до установления приоритетов для содержания и функциональности на веб-сайте, “мобильный первый” является одним из тех сложных, но невероятно мощных ограничений, которые помогут вам сосредоточиться на том, что действительно имеет значение, и определить критические компоненты вашего сайта.Мы обнаружили, что проектирование мобильных сначала одна вещь;Здание мобильноеПервый совсем другая история.В нашем случае, оба проектирования и разработки были сильно мобильного первой, которая помогла нам сфокусироваться только на контента и его презентации.Но в то время как процесс проектирования было достаточно просто, реализация оказалась довольно трудно .

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

² Вскоре после нового SmashingMag редизайн продолжал жить, мы столкнулись с проблемами производительности. Статьи Тима Kadlec от 2012 ³ показывает, что .

Мы оказались в ловушке: разработка и ведение принимают много времени, базовый код был полон мелких и крупных исправлений, а инфраструктура становится слишком медленно.Мы закончили с кодовой базе, которая стала раздутой до редизайн даже был издан — очень bloated ⁴ , на самом деле .

Производительность Issues

В середине 2013 года, наша главная страница весил 1,4 Мб и производится 90 HTTP-запросов.Это просто не работает хорошо.Мы хотели создать замечательную опыт чтения на сайте избегая при этом вспышку без стилей text (FOUT), так веб-шрифты были загружены в заголовке и, следовательно, блокировали предоставление контента (на самом деле it’ ˘S правильное поведениев соответствии с spec ⁵ , разработаны, чтобы избежать нескольких перерисовки и перекомпоновке) . JQuery была необходима для ads будет отображаться, а через несколько сценариев JavaScript зависит от JQuery, поэтому все они блокировалиоказание, а также.Объявления были загружены и вынесли before Содержание для того, чтобы они появились как можно быстрее .

Изображения поставляемые нашими партнерами рекламных были, как правило, тяжелые и неоптимизированная, замедляя страницу дальше.Мы также загружаются Respond.js и Modernizr дело со старыми браузерами и расширить опыт для умныхбраузеры.В результате, статьи были практически недоступны на медленных и нестабильных сетей и начать предоставлять время на мобильный телефон был разочаровывающим в лучшем .

Это была не просто передний конец, который был показывает свой возраст, хотя.Фоновых не становится лучше либо.В 2012 году мы играли с мыслью о том, полностью независимых секций журнала — разделы, которые будут жить своей жизнью, развивается и растет с течением времени в качестве независимых установок WordPress, с помощью пользовательских функций и типов контента, которые не обязательно будут совместно использоватьсявсе разделы .

⁶
Да, мы наслаждаемся вполне здравый смысл пользовательская база, поэтому оптимизация IE8 действительно не проблема. Большая вид . ⁷

Потому что WordPress мульти-установки не был доступен в то время, мы закончили с шестью независимыми, автономными WordPress устанавливает с шестью независимыми, автономными таблиц стилей.Эти Установлено были подключены к 6 × 2 баз данных (медиа-сервера и статический контент-сервера).Мы столкнулись с дилемм.Например, что делать, если автор писал в течение двух секций, и мы хотели бы показать свои статьи из обеих секций на биологическое странице один единственный автора?Ну, we’ d нужно как-то тянуть статьи из обеих установок и добавить перенаправления для каждого author’ сек страницу этого единую странице, или мы должны просто использовать один из этих страниц как “ host”?Ну, вы знаете, где это происходит: увеличение сложности и увеличения затрат на техническое обслуживание.В конце концов, секции не удалось развиваться значительно — крайней мере, не с точки зрения содержания — еще мы уже настроены техническую основу каждой секции, добавив к сложности CSS пыли и PHP .

(Потому что мы аутсорсинг WordPress задач, некоторые плагины зависели друг от друга Так что, если мы должны были отключить один, мы могли бы невольно отключить два или три других в процессе, и они должны быть снова включен в.частности для того, чтобы работать должным образом. Были даже различия в HTML, выдаваемые шаблоны сайтов PHP за кулисами, таких как классы и идентификаторы, которые отличались от одной установки к другой. Это не удивительно, что эта установка сделана развитие немного расстраивает.)

Движение было на прежнем уровне, читатели постоянно жаловались выступления на сайте и только очень небольшая часть пользователей посетили более 2 страниц за посещение.Визуальная обратная связь при просмотре сайт visible и, конечно, wasn’ т мгновенно, и это отставание за рулем читателиот места к Instapaper и карманные — как в мобильных и настольных.Мы знали, что, потому что мы попросили наших читателей, и обратная связь была вполне понятно (и немного расстраивает) .

Пришло время отодвинуть — тяжело, с крупного рефакторинга кода base.Мы внимательно смотрел под капот, открывая несколько довольно страшных (и неприятные) вещи, и начал решении проблем, один за другим.Это заняло у нас совсем немного времени, чтобы сделать все правильно, и мы узнали довольно много вещей по пути .

Переключение Gears

До середины 2013 года, мы не были не используете CSS препроцессора, ни какие-либо инструменты разработки.Хорошие долгосрочные решения требуют хорошего долгосрочную основу, поэтому первые вопросы, которые мы не ставятся были оснастки и способ кодовой базы был организован.Потому что количество людей, работал на кодовой базе на протяжении многих лет, некоторые вещи оказались достаточно mysterious… или сложным, если не сказать больше .

Мы начали с Код inventory, и мы тщательно смотрели на каждого класса, ID и CSS селектор.Конечно, мы хотели построить систему модульных компонентов, поэтому первой задачей было превратить наши семь больших файлов CSS в сопровождении, хорошо документированы и легко читаемые модулей.В то время, мы бы выбрали менее, без особой причины, и поэтому наша передний конец инженера Marco ⁸ начал переписывать CSS и построить модульную, масштабируемую архитектуру.Конечно, мы могли бы очень хорошо использовали Sass вместо этого, но Марко чувствовал себя вполне комфортно с менее во время .

С новым CSS архитектуры, Grunt ⁹ как инструмент для сборки и few ¹⁰ времени saving ¹¹ Grunt ¹² tasks ¹³ , задача поддержания всю базу кода стало гораздо легче.Мы создали совершенно новую среду тестирования, синхронизируются все с GitHub, назначенными ролями и разрешениями, и начал копать.Мы переписали селекторы, reauthored разметки, и рефакторингу и оптимизированы JavaScript.И да, это заняло у нас некоторое время, чтобы получить вещи в порядке, но это действительно не было бы так сложно, если мы hadn’ т было несколько очень разных стилей для борьбы с .

Большое Back-End Cleanup

С введением многоузловое создания единого WordPress установкиот наших шесть отдельных установок, стал необходимой задачей для наших друзей в Inpsyde ¹⁴ .В течение пяти месяцев, Кристиан Брюкнер и Томас Херцог очищены шаблоны PHP, ногами ненужные плагины на орбиту, переписал плагины Мы должны были держать и добавил новые, где это необходимо.Они очистили базы данных всех беспорядок, что старые плагины создал — одна из баз данных весом в 70 GB (нет, это не опечатка, мы действительно имею в виду гигабайт) — объединены все базы данных в один, а затем создал единственный свежий и, самое главное, maintainable WordPress многоузлового установка .

Увеличение скорости от тех оптимизаций было замечательно.Мы говорим о от 400 до 500 миллисекунд improvement избегая перенаправления поддомена и унификации базы кода и серверную код.Те redirects ¹⁵ действительно основным виновником производительность, да и просто избежать их является одним из тех методов, которые, как правило, повышают производительность значительно, потому что вы избежать полного поиска в DNS, улучшить время первого байта и уменьшить круглые поездкив сети .

Томас и Кристиан также реструктурировать всю нашу тему WordPress в соответствии со стандартом кодирования собственного архитектуры теме, которая в основном сложный способ написания PHP на основе стандарта WordPress.Они написали собственные падения модули, которые мы используем для отображения содержимого в определенной точке макета.Написание PHP строго в соответствии с официальной API WordPress “чувствовал, что выходит из конном экипаже и в гоночном автомобиле.Все изменения были сделаны, не касаясь ядро ​​WordPress ‘, который является прекрасным, потому что мы никогда не будем должны бояться обновления самого WordPress больше .

We’ ве также отметил несколько миллионов комментарии спам во всех разделах журнала.И прежде чем вы спросите: нет, мы не импортировать их в новую установку .

Мы переселились установок во время медленного выходные в середине апреля 2014 года было огромным достижением, и наш сервер был несколько икота во время процесса.Мы приняли участие более 2500 статей, в том числе около 15 000 изображений, все разбросаны по шести баз данных, которые также имели несколько серьезных несоответствий.В то время как это было очень грубое начало, на первый — много перенаправлений должен быть создан, вопросы кэширования на нашем сервере складывается, и некоторые статьи потерялся между __35 старые и новые установки | Результат был хорошо стоит усилий.

Наша редакция, в первую очередь Iris ¹⁶ , Melanie ¹⁷ и Markus ¹⁸ , работал очень трудно довести эти потерянные вещи обратно в life путем анализа нашего404-с Google Webmaster Tools,.Мы провели несколько выходных для того, чтобы каждый статья была восстановлена ​​и остается доступной.Потеря статьи, в том числе своих комментариях, было просто недопустимо .

Мы хорошо знаем, сколько времени требуется для хорошей статьи получить опубликованы, и у нас есть большое уважение к авторам и их работы, и обеспечить, чтобы содержание остается здесь было вопрос уважения к труду published,Нам потребовалось несколько недель, чтобы попасть туда, и это не было самым приятным опытом для конечно, но мы использовали возможность представить более последовательными в нашей информационной архитектуры и настройки тегов и категорий соответственно.(Ах, если бы вы все-таки найти статью, которая заблудилась по дороге, пожалуйста дайте нам know ¹⁹ и мы исправим это прямо сейчас спасибо.!)

Front-End Optimization

В апреле 2014 года, когда новая система была на месте и был гладко в течение нескольких дней, мы переписали Чем меньше файлы, основываясь на том, что осталось от всех установок.Упорядочение классы для сообщений и страниц, избавляясь от всех ненужных идентификаторов, сокращая селекторы за счет снижения их специфику, и искоренение ничего в CSS мы могли жить без хрустел CSS от 91 КБ до всего лишь 45 KB .

После CSS код база в надлежащей форме, это было время, чтобы пересмотреть, как активы будут загружены на странице, и как мы можем улучшить начальную рендеринг за имея чистую, хорошо структурированную базу кода.Учитывая кошмар мы испытали с бэк-конец ранее, можно предположить, что улучшение показателей деятельности в настоящее время было бы сложным, трудоемким занятием, но на самом деле это было довольно немного легче, чем это.В принципе, это было просто вопросом получать наши приоритеты right за счет оптимизации критического рендеринг путь .

Значение для повышения эффективности том, чтобы сосредоточиться на самом важном: содержание, и самый быстрый способ для читателей, чтобы действительно начать читать наши статьи на своих устройствах.Так в течение течение нескольких месяцев мы продолжали изменения приоритетов.С каждым обновлением, мы ввели мини-оптимизации, основанной на очень простом, почти очевидный принцип: оптимизации доставки контента, а отложить rest — без каких-либо компромиссов в любом месте .

Наши оптимизации были под сильным влиянием работы, проделанной Скотт Jehl ²⁰ , а такжекак Guardian ²¹ и BBC ²² команды (оба из которых с открытым кодом свою работу).В то время как Скотт был обмен ценной insight ²³ в интерфейсные методы, которые накаливания Группа использует, BBC и The Guardian помогли нам определить и уточнить понятие основной experienceна веб-сайте и использовать его в качестве основы.Общая главная цель в том, чтобы доставить содержимое как можно быстрее, чтобы столько людей, сколько возможно, независимо от их устройства или сетевых возможностей и повышения опыт работы с прогрессивного улучшения для способные браузеры .

Тем не менее, исторически у нас не было много JavaScript или сложных взаимодействий на Smashing Magazine, таким образом, мы не чувствовали, что это было необходимо ввести сложного нагружения логику Preloaders JavaScript.Однако, будучи содержание веб-сайта ориентированы, мы did хотят сократить время, необходимое для статьи, чтобы начать показ, насколько это в человеческих силах .

Исполнение бюджета: Индекс скорости < = 1000

Как быстро происходит достаточно быстро ? ²⁴ Ну, that’ са сложный вопрос.В общем, это довольно трудно представить себе работу и объяснить, почему каждую миллисекунду считает, если только у вас нет достоверных данных.В то же время, попадая в ловушку абсолютных и опираясь на самом деле не полезных показателей производительности очень легко.В прошлом, наиболее часто упоминаемых показатель производительности был в среднем время загрузки.Тем не менее, сама по себе, среднее время загрузки не that полезно, потому что он не говорит вам много о том, когда пользователь может на самом деле начать использовать веб-сайт.Вот почему говорю о “ быстрого enough” Часто так сложно .

²⁵
хороший способ визуализации производительности является использование WebPageTest для создания фактического видео на страницу загрузки и запуска теста между двумя конкурирующими веб-сайтов.Кроме того, Индекс скорости metric ²⁶ часто оказывается очень полезным .

Различные компоненты требуют разного количества времени для загрузки, но некоторые компонентыстраницы являются более важными, чем другие.НапримерВы don’ т необходимо загрузить колонтитула content быстро, но it’ са хорошая идея, чтобы сделать видимую часть страницы быстро.Вы знаете, где it’ сек заголовок: конечно, мы говорим о “выше сгиба” Посмотри здесь.Как Илья Grigorik раз said ²⁷ , “ Нам не нужно, чтобы сделать всю страницу в одну секунду, [только] в верхней части содержания .” Чтобы добиться этого, в соответствии сисследования Скотта и результаты испытаний Google, it’ ˘S полезно ставить перед собой амбициозные цели по показателям:

• На WebPageTest ^{64 28} , стремиться к Скорость Index ²⁹ значение при 1000 .
• Убедитесь, что все HTML, CSS и подходят JavaScript в течение первых 14 Кбайт .

Что это значит и почему они важны?По данным исследования, HCl, “ для приложения, чтобы чувствовать себя мгновенно, заметно ответ на действия пользователя должны быть обеспечены в пределах сотен milliseconds ³⁰ .После второй или более, поток пользователя и взаимодействие с инициированной задачи чувствует себя сломанной .” С первого гола, мы стремимся к тому, мгновенный ответ на нашем сайте.Это относится к так называемым Скорость Index метрика для начать rendering время — среднее время (в мс), при котором видимые части страницы отображаются, или становятся доступными.Так первый гол в основном отражает то, что страница начинается rendering под 1000ms, и да, it’ са довольно сложная задача взять на .

³¹
Илья Grigorik’ Книга для Высокая производительность браузера Networking ³² является очень полезным руководством с полезными руководящими принципами и рекомендациямио внесении сайты быстро.И it’ ˘S доступна в качестве бесплатного HTML книге, тоже .

Вторая цель может помочь в достижении первый.Значение 14 КБ был измеряетсяempirically ³³ по Google и порог для первого пакета, которыми обмениваются сервер и клиент с помощью башен на клеточном связи.Вам не нужно, чтобы включить изображения в 14 Кб, но вы можете поставить разметку, таблицы стилей и любой наличие, требуемую для визуализации видимую часть страницы в этой порога.Конечно, на практике это значение может только быть реально достигнуто при сжатии GZIP .

Комбинируя два гола, мы в основном определили производительности budget что мы устанавливаем для сайта — порог для того, что является приемлемым.Правда, мы не касаемся с началом оказания время на разных устройствах в различных сетях, в основном потому, что мы действительно хотели отодвинуть, насколько это возможно всё, что не требуется, чтобы начать предоставлять страницу.Таким образом, идеальным результатом будет значение индекса скорости, которая way ниже, чем тот, который мы уже установленной — как можно более низкой, на самом деле — во всех учреждениях и на всех соединениях, как шатких и стабильных, медленных и быстрых,Это может показаться наивным, но мы хотели выяснить, как быстро мы could быть, а не как быстро мы should быть.Мы не меру начать оказание время для первой и последующих страниц нагрузок, но мы сделали это намного позже, после оптимизации уже сделано, и просто отслеживать вопросов на передний конец .

Наш следующий шаг будет заключаться в интеграции __17 Тима Kadlec в | Perf-сметной Грунт task ³⁴ включить исполнении бюджета прямо в процессе сборки и, таким образом, работать каждый новый принятие на тесте производительности WebPagetest-х годов.Если это не удается, мы знаем, что новая функция замедлился нас вниз, так что мы, вероятно, придется пересмотреть, как it’ ы реализован с учетом его пределах нашего бюджета, или, по крайней мере, мы знаем, где мы находимся, и может иметь содержательные дискуссии о его влиянии наОбщая производительность .

Приоритетности и разделение Concerns

Если вы следили за Guardian ‘ сек работа в последнее время, вы можете быть знакомы со строгим разделением опасений, что они introduced ³⁵ В течение большей 2013 редизайн.Хранитель separated ³⁶ вся его содержание в три основные группы:

• Основной contentОсновные HTML и CSS, пригодный для использования без JavaScript повышенной experience
• EnhancementНаличие геолокации, поддержку сенсорного, повышение CSS, веб-шрифты, изображения, widgets
• LeftoversАналитика, реклама,сторонних content

³⁷
строгое разделение интересов или приоритетов загрузки, как это определено в команде Гардиан. Большая вид . ³⁸

После того как вы определили, подтвердил и согласованы этих приоритетов, вы можете нажать оптимизации производительности довольно далеко.Просто, будучи очень конкретную информацию о каждом типе контента у вас есть и четко определить, что “ядро” , вы сможете загружать Core, content как можно быстрее, то нагрузка Enhancements разстраница начинается оказание (после DOMContentLoaded срабатывает событие), а затем загрузите Leftovers раз страница была полностью оказанные (после load срабатывает событие) .

Основной принцип здесь, конечно, является строго отделить загрузку assets на протяжении этих трех фаз, так что нагрузка на Основной content никогда не должны быть заблокированы какими-либо ресурсами, сгруппированных в Enhancement или Leftovers (мы haven’ т достигается превосходное разделение только пока, но мы на него).Другими словами, вы пытаетесь сократить путь критического рендеринга, который требуется для содержания начать отображение, нажав на содержание вниз линию как можно быстрее и отложить в значительной степени все еще .

Мы последовали этому же разделение задач, группировка наши типы контента на те же категории и определения того, что важно, то, что важно, а что второстепенное.В нашем случае, мы определили и разделены содержание следующим образом:

• Основной contentТолько важно HTML и CSS
• EnhancementJavaScript, код подсветка синтаксиса, полный CSS, веб-шрифты, комментарий ratings
• LeftoversАналитика, реклама, Gravatars

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

Отсрочка Web Fonts

Несмотря на то, что доля читателей Smashing Magazine на мобильный телефон всегда был довольно скромным (всего около 15% -mainly из-за длины статей), мы никогда не считали мобильного машинально, но мы никогда не толкнул пользовательский опыт на мобильном телефонелибо.И когда мы говорим об опыте пользователя на мобильный телефон, мы в основном говорим о скорости, с типографика был в значительной степени хорошо разработана с первого дня .

Мы беседовали в течение 2012 редизайн о том, как иметь дело со шрифтами, но мы не могли найти решение, которое сделал все счастливы.Внешний вид контента было важно, и потому, что новый Smashing Magazine все о красивой, богатой типографии, не загружая веб-шрифтов у всех на мобильный телефон на самом деле не вариант .

С редизайн тогда, мы перешли на Skolar для заголовков и Proxima Nova для основного текста, с которым выступил Fontdeck.В целом, у нас было три шрифтов для каждой гарнитуры — обычный, курсив и смелые — на общую сумму в шесть файлы шрифта, должны быть доставлены по сети.Даже после того как наши дорогие друзья на Fontdeck subsetted и оптимизированы шрифты, активы были довольно тяжелые с более чем 300 КБ в целом, и потому что мы хотели избежать частого вспышку без стилей текста (FOUT), мы их загрузки в заголовке каждогостраница.Первоначально мы думали, что шрифты надежно будет сохраняться в HTTP кэша, так что они не будут извлечены с каждым загрузке страницы.Тем не менее, оказалось, что HTTP кэш был довольно unreliable: шрифты появился в водопад загрузки графике и теперь каждый раз без всякой видимой причины, как на рабочем столе и на мобильном .

Большая проблема, конечно, в том, что шрифты были блокировки rendering ³⁹ .Даже если HTML, CSS и JavaScript уже загружен полностью, содержание не будет появляться до тех пор, шрифты не были загружены и вынесли.Таким образом, вы имели этот прекрасный опыт наблюдения ссылку подчеркивает, затем несколько ключевых слов жирным шрифтом здесь и там, то подзаголовки в середине страницы, а затем, наконец, остальные страницы.В некоторых случаях, когда Fontdeck были проблемы сервера, содержание не появляется вообще, хотя это уже сидел в DOM, ожидая, чтобы быть отображены .

⁴⁰
В своей статье Web Fonts и критической Path ⁴¹ Ян перо обеспечивает очень подробный обзор вопросов FOUT и погрузочных шрифта решений.Мы протестировали их всех .

Мы экспериментировали с несколькими решениями, прежде чем остановиться на том, что оказался, пожалуй, самым трудным.Во-первых, мы посмотрели в использовании Typekit и Google, WebFontLoader ⁴² , асинхронный скрипт, который дает вам более тонкий контроль того, что появляется на странице в то время как шрифты загружаются.В принципе, скрипт добавляет несколько классов в body элемента, который позволяет указать стиль контента в CSS во время погрузки и после шрифты загружены.Таким образом, вы можете быть очень точным о том, как отображается содержимое в резервных шрифтов во-первых, прежде чем пользователи видят переход от резервных шрифтов для веб-шрифтов .

Мы добавили резервные шрифты declarations и в конечном итоге с довольно многословных стеков CSS шрифта, используя IOS шрифты, Android шрифты, Windows Phone шрифты и добрым веб-сейф шрифты как откаты — мы все еще используем эти шрифта стеки сегодня.Напримермы использовали этот каскад для основных рубрик (он отражает порядок популярности мобильных операционных систем в наших аналитики):

h2 {
   font-family: "Skolar Bold",
   AvenirNext-Bold, "Avenir Bold",
   "Roboto Slab", "Droid Serif",
   "Segoe UI Bold",
   Georgia, "Times New Roman", Times, serif;
}

Так читатели увидят шрифт мобильной ОС (или любой другой шрифт запасной первый), и это, вероятно, будет шрифт, что они хорошо знакомы с их устройством, а затем один раз шрифты загружены, они будут видеть переключатель,вызвано WebFontLoader.Тем не менее, мы обнаружили, что после перехода на WebFontLoader, мы начали видеть нестилизованного текста слишком часто, с HTTP кэш быть весьма ненадежны снова, и что постоянное переключение с запасного шрифта на веб-шрифте очень раздражает, в основном губят опыт чтения .

Таким образом, мы искали альтернативы.Одним из решений было включают директиву @ шрифта лица только на больших screens обернув его в средствах массовой информации запроса, что позволяет избежать загрузки веб-шрифты на мобильных устройствах и в устаревших браузерах в целом.(На самом деле, если вы объявите веб-шрифты в СМИ запроса, они будут загружены только тогда, когда запрос носителя соответствует размеру экрана. Так не влияет на производительность не попал туда.) Очевидно, что помогли нам улучшить производительность на мобильных устройствах в кратчайшие сроки, но мыне чувствовать себя с наличием “ simplified” опыт чтения на мобильных устройствах.Так было не идти, слишком .

Что еще мы можем сделать?Единственный вариант был улучшить кэширование fonts.Мы не могли сделать с HTTP кэша, но там был один вариант мы не посмотрел в: хранение шрифтов в AppCache или localStorage.Статья Джейк Арчибальда на прекрасном сложность AppCache ⁴³ увели нас от AppCache экспериментировать с localStorage, в Technique ⁴⁴ , что команда Хранителя использует во время .

Сейчас на форуме кэширование поставляется с одним основным требованием: нужно have фактические файлы шрифтов, чтобы иметь возможность кэшировать их локально в браузере клиента.И вы не можете кэшировать в lot потому что localStorage пространство очень limited ⁴⁵ , иногда только с 5Mb доступной для каждого домена.К счастью, ребята Fontdeck были очень полезны и предстоящим с нашего предприятия, поэтому, несмотря на то, что службы доставки шрифта, как правило, требуют, чтобы вы загружать файлы и иметь синхронный или асинхронный обратный вызов, чтобы подсчитать количество впечатлений, Fontdeck был прекрасно с нами захватаWOFF-файлы из кэша браузера Google Chrome и создание “плоской” цены на основе количества показов страниц в новейшей истории .

Таким образом, мы схватили Woff файлы и встроенные их, в кодировке base64, в одном файле CSS, переходя от шести внешних HTTP-запросов с примерно 50 KB файл каждый более чем с одной HTTP запроса на первой загрузки и 400 Кбиз CSS.Очевидно, что мы не хотим, чтобы этот файл будет загружен при каждом посещении.Так что, если localStorage доступно на компьютере пользователя, мы храним весь файл CSS в localStorage, установить куки переходить от запасного шрифта на веб-шрифт.Этот переключа� …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров