“Мобильная первых” Средства “Всегда Мобильная первых«

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

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

² Вскоре после нового SmashingMag редизайн пошел живой, мы побежали в вопросах производительности. Статьи Тима Kadlec от 2012 __14 | | 3__6 показывает, что .

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

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

В середине 2013 года, наша главная страница весила 1,4 Мб и производится 90 HTTP запросов.Это просто не работает хорошо.Мы хотели создать замечательную опыт чтения на сайте избегая вспышку без стилей text (FOUT), так веб-шрифты были загружены в заголовке и, следовательно, блокировали предоставление контента (на самом деле it’ S правильное поведениев соответствии с spec __35 | 5 , чтобы избегать нескольких перерисовки и перекомпоновке) . 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 ^{9 | __19 как инструмент для сборки и few 10 | __34 времени saving __36 | 11} Grunt ¹² tasks ¹³ , задача поддержания всю базу кода стало намного проще.Мы создали новый среды тестирования, синхронизируются все с GitHub, назначенных ролей и разрешений, и начал копать.Мы переписали селекторы, reauthored разметки, и рефакторингу и оптимизированы JavaScript.И да, нам потребовалось некоторое время, чтобы получить вещи в порядке, но это действительно не было бы так трудно, если мы hadn’ т имел ряд очень разных стилейиметь дело с .

Большое Back-End Cleanup

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

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

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

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

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

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

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

Front-End Optimization

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Основной contentОсновные HTML-и CSS, использовать не-Java-повышенной 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, улучшение производительности становится просто вопросом добавления несколько фрагментов для загрузки активов правильно отразить эти приоритеты.Даже если ваш сервер логические силы загружать все активы на всех устройствах, сосредоточив внимание на доставке контента первых, вы убедитесь, что контент будет доступен быстро, в то время как все остальное откладывается и загружаются в фоновом режиме, после страницы начал рендеринга.От стратегическогоперспектива, список отражает вашу техническую долга, а также важнейшие вопросы, которые замедляют вас вниз.В самом деле, у нас был целый список вопросов для рассмотрения уже на этом этапе, так что довольно быстро превращается в списке приоритетов контента.И скорее сложный вопрос сидел на самом верху этого списка: добрым веб-шрифтов .

Отсрочка веб Fonts

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

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

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

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

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

Мы экспериментировали с несколькими решениями, прежде чем остановиться на том, что, оказалось, возможно, самым сложным.Во-первых, мы смотрели в использовании Typekit и __14 компании Google | WebFontLoader __16 | 42 , асинхронный скрипт, который дает вам более тонкий контроль того, что появляется на странице в то время как шрифты загружаются.В принципе, скрипт добавляет несколько классов в 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__35 опыт чтения на мобильных устройствах.Так что не было не идти, слишком .

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

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