Официальный сайт движения «Москва без Лужкова!»
Главная Новости Москвы Наши новости Популярное
  • Новости
  • Новости
  • ВХОД В ЛИЧНЫЙ КАБИНЕТ
    логин
    пароль
       
    Новости

    Что такое Google AMP и как он работает?

    1. AMP JS
    2. AMP HTML
    3. Кэш AMP от Google
    4. Как работает AMP

    AMP означает   Ускоренные мобильные страницы   ,  Это способ создания веб-страниц, которые будут быстро отображаться для статического содержимого

    AMP означает Ускоренные мобильные страницы , Это способ создания веб-страниц, которые будут быстро отображаться для статического содержимого. При запуске AMP состоит из AMP HTML, библиотеки AMP JS и Google AMP Cache. Если страница не оптимизирована для мобильного использования, вы рискуете увеличить показатель отказов - 30% пользователей покидают страницу, если она не загружается в течение 3 секунд. Конечный продукт AMP значительно повышает производительность мобильных веб-сайтов в Интернете - настолько, что время загрузки часто кажется мгновенным. Он опирается на существующие технологии и работает в сотрудничестве с крупнейшими именами Интернета. AMP - это не совсем другой метод создания страниц - он на самом деле состоит из обычного HTML с несколькими ограничениями и добавленными специализированными тегами и не требует большой дополнительной работы. AMP JS стремится обеспечить быструю и четкую загрузку наиболее важного контента, в то время как сторонний контент, например реклама, не находится на переднем крае, поэтому пользователи увидят предпочитаемый контент как можно скорее. AMP обнаружил, что контент, который загружается быстро, приводит к более быстрому чтению и, в свою очередь, приводит к большему потреблению.

    AMP JS

    Библиотека AMP JavaScript (JS) использует все лучшие практики производительности, управляет загрузкой ресурсов и предоставляет пользователю свои пользовательские теги - все для того, чтобы обеспечить максимально быстрое отображение страницы. Одним из самых больших преимуществ является то, что все элементы, даже те из внешних источников, синхронизированы так, что ничто на странице не может быть заблокировано от рендеринга.
    Другие методы, используемые для повышения производительности, включают предварительный расчет макета всех элементов на странице до того, как ресурсы могут быть загружены, отключение медленных селекторов CSS и песочница для всех iframe.

    AMP HTML

    Это HTML-код, имеющий ряд ограничений, связанных с надежной производительностью, и несколько расширений для создания многофункционального контента, который представляет собой нечто большее, чем просто базовый HTML-код. Библиотека AMP JS помогает быстро отображать HTML-страницы AMP, а AMP Cache от Google помогает кэшировать HTML-страницы AMP.
    Короче говоря, AMP HTML - это стандартный HTML, который включает в себя пользовательские свойства AMP. Большинство тегов в AMP HTML являются стандартными тегами, но некоторые из них заменены, чтобы соответствовать компонентам AMP. Эти пользовательские элементы обеспечивают простоту использования общих шаблонов.

    Кэш AMP от Google

    AMP Cache от Google - это сеть доставки, основанная на прокси-сервере и используемая для распространения всех действующих документов AMP. Он передает HTML-страницы AMP, затем кэширует их, а затем автоматически повышает производительность их страниц. При использовании этого кэша AMP документ со всеми его JS-файлами и изображениями будет загружаться из того же источника, который использует HTTP 2.0 для большей эффективности. Существует система проверки, которая поставляется с системой кэширования, которая будет проверять, будет ли страница работать независимо от внешних ресурсов. Система проверки пройдет через своего рода контрольный список, чтобы подтвердить, что разметка страницы соответствует спецификациям HTML AMP.
    Другая версия механизма проверки по умолчанию поставляется с каждой страницей AMP. Этот может записывать ошибки проверки прямо на консоль браузера, когда страница отображается. Это позволяет пользователю увидеть, как сложные изменения в коде будут влиять на производительность и пользовательский опыт.

    Как работает AMP

    AMP, работающий над созданием страниц с быстрой загрузкой, представляет собой комбинацию из ряда элементов, используемых для оптимизации страницы.

    JavaScript может использоваться для изменения практически любой части веб-страницы, но он также может использоваться для блокирования построения DOM и задержки рендеринга страниц. Чтобы избежать задержки рендеринга страниц из-за JavaScript, AMP допускает только асинхронный JavaScript. Эти страницы AMP запрещают использовать любой JavaScript, написанный веб-мастером, и вместо обычного JavaScript, интерактивная страница должна состоять только из пользовательских элементов AMP. Эти пользовательские элементы могут быть составлены из ядра JavaScript, но они должны быть специально разработаны, чтобы убедиться, что они не вызывают каких-либо ограничений в работе веб-страницы. Сторонний JavaScript разрешен в пределах iframes, но он не может блокировать рендеринг.
    Внешние ресурсы, такие как iframes, реклама или изображения, должны указывать свой размер в HTML-коде страницы, чтобы AMP могла определить размер каждого элемента, а также его позицию, прежде чем будут загружены все ресурсы. AMP загрузит макет страницы до загрузки ресурсов. AMP работает для отключения макета документа от макета ресурса, и для макета всего документа требуется всего один HTTP-запрос. Поскольку AMP оптимизирован таким образом, что он работает с дорогостоящими перерасчетами макетов в браузере, при загрузке ресурсов повторных макетов не будет.
    AMP не позволяет механизмам расширения блокировать рендеринг страниц. AMP способствует расширениям для таких вещей, как встраивание в Instagram, лайтбоксы, твиты и тому подобное. Эти вещи требуют дополнительных HTTP-запросов, и эти запросы не могут блокировать макеты страниц и рендеринг. Страницы, использующие пользовательский скрипт, должны уведомить систему AMP о том, что в конечном итоге ей понадобится собственный тег.
    Сторонний JavaScript предпочитает использовать синхронизированную загрузку JS. Предположим, что на странице 5 рекламных объявлений, каждая из которых вызывает 3 синхронные загрузки - каждая из которых имеет задержку в 1 секунду, и у вас будет 18 секунд, кроме времени загрузки, просто вызванного загрузкой JA. Страницы AMP допускают использование сторонних JS, но только в фреймах с песочницей. Когда сторонние JS ограничены фреймами, они не могут быть заблокированы при выполнении главной страницы. Даже когда они вызвали много пересчетов стиля, у маленьких iframe есть только маленький DOM. Время, необходимое для пересчета стиля и макетов, ограничено размером DOM, и пересчеты iframe довольно быстрые по сравнению с пересчетом стилей и макетов для страницы.
    CSS сдерживает весь рендеринг, загрузку страницы, а также может сделать код немного пушистым. При использовании AMP HTML допускаются только те стили, которые остаются встроенными. Часто это удаляет один или несколько HTTP-запросов из важного пути рендеринга по сравнению со многими веб-страницами. Кроме того, встроенная таблица стилей имеет порог в 50 килобайт. Этот размер достаточно велик даже для самых сложных страниц, но веб-мастеру все еще нужно позаботиться о том, чтобы правильно ввести CSS.
    Шрифты в Интернете большие, поэтому оптимизация веб-шрифтов важна для производительности веб-сайтов. Как правило, на обычной странице будет только несколько сценариев синхронизации и несколько внешних таблиц стилей, браузер будет ждать значительное количество времени, чтобы начать загрузку этих больших файлов шрифтов. Система AMP не будет отправлять запросы HTTP, пока шрифты не начнут загружаться. Это возможно, потому что весь JavaScript в AMP имеет атрибут асинхронности и допускает только встроенные таблицы стилей. HTTP-запросы не блокируют браузер от загрузки любых необходимых шрифтов. Типографика является важным инструментом, который помогает в брендинге, удобочитаемости и дизайне, а оптимизация веб-шрифтов будет способствовать вашей общей стратегии повышения производительности. Это может уменьшить общий размер страницы, тем самым способствуя улучшению общего времени загрузки.
    Каждый раз, когда что-то измеряется на странице, оно вызывает пересчет стиля. Это дорого, потому что веб-браузер должен настроить весь макет страницы. На страницах AMP все чтения DOM происходят до того, как что-либо написано. Это сделано для того, чтобы обеспечить максимум одного перерасчета стилей на кадр. Когда свойство, такое как макет, изменяется, оно редактирует геометрию веб-сайта, например его высоту и ширину. Когда макет редактируется, браузер должен проверить все остальные элементы и реорганизовать поток, если страница. Все области, на которые это влияет, необходимо пересчитать, а затем эти элементы необходимо будет снова объединить.
    Выполнение оптимизаций на GPU - единственный способ убедиться, что они работают быстро. GPU знаком со слоями и знает, как выполнять с ними действия. Он также может перемещать их, затухать, но не может обновлять макет страницы. Когда это происходит, браузер должен обновить макет страницы, и это абсолютно не рекомендуется. CSS, связанный с анимацией, использует правила, которые гарантируют, что анимация может быть ускорена графическим процессором. AMP разрешает анимацию и переход только при преобразовании и непрозрачности, поэтому макет страницы не требуется. Когда окрашенные части веб-страницы объединяются и отображаются на экране, это называется композитингом. Количество составных слоев, для которых требуется управление, и свойства, используемые для анимации, - это две области, которые будут влиять на производительность веб-страницы. Для анимаций было бы разумно придерживаться изменений трансформации и непрозрачности, чтобы обеспечить быстрое рендеринг AMP. При использовании этих двух свойств элементы должны находиться на собственном составном слое.
    AMP полностью контролирует загрузку ресурсов - он устанавливает приоритеты загрузки, а это означает, что он будет загружать только то, что необходимо, и будет преждевременно извлекать ресурсы, для загрузки которых требуется много времени. Когда AMP работает для загрузки любых ресурсов, он оптимизирует загрузку так, чтобы первыми загруженными ресурсами были те, которые являются наиболее важными. Рекламные объявления и изображения загружаются только в том случае, если у них есть высокая вероятность того, что их увидит пользователь или если пользователь может быстро прокрутить их. AMP также будет преждевременно извлекать любые ресурсы, которые долго загружаются. Они загружаются как можно скорее, а загружаются как можно позже. Из-за этого элементы будут загружаться быстро, но ЦП используется только тогда, когда пользователи действительно видят ресурсы.
    AMP помогает загружать страницы очень быстро. Preconnect API - это новая система, которая используется для обеспечения успешного выполнения HTTP-запросов. Используя это, веб-страница может быть визуализирована до того, как пользователь явно заявит, что он хотел бы перейти на нее. Эта страница, вероятно, будет готова к тому моменту, когда пользователь физически выберет ее, что позволит мгновенно загрузить страницу. Этот тип предварительного рендеринга может быть применен к контенту в сети, но он также может занимать много ресурсов процессора и пропускной способности. Обе эти вещи могут быть уменьшены с помощью AMP. Ресурсы выше сгиба загружаются только с предварительным рендерингом, а вещи, которые могут быть дорогостоящими для ЦП, не отображаются. Документы AMP могут быть предоставлены для мгновенной загрузки, будут загружены только ресурсы, расположенные выше сгиба. Это также относится к таким элементам, как встроенные фреймы сторонних производителей, поскольку они могут занимать много ресурсов процессора.
    Accelerated Mobile Pages (AMP) - это программа с открытым исходным кодом. В качестве способа создания страниц для статического содержимого AMP помогает обеспечить максимально быстрое отображение содержимого. Чтобы убедиться, что HTML действительно AMP HTML, не требуется много дополнительных усилий. Есть только несколько дополнительных расширений, необходимых для расширенного содержимого, а также некоторые ограничения, которые обеспечивают надежную работу, но если сайт довольно прост для начала, он может уже соответствовать AMP HTML. Благодаря тому, что все больше и больше людей получают доступ к информации на ходу со своих мобильных устройств, AMP является шагом в правильном направлении.

    Основатель DYNO Mapper и представитель Консультативного комитета в W3C.


    назад


     

    Найди свой район!

    Восточный

    Западный

    Зеленоградский

    Северный

    Северо-Восточный

    Северо-Западный

    Центральный

    Юго-Восточный

    Юго-Западный

    Южный

    Поиск:      


     
    Rambler's Top100
    © 2007 Движение «Москва без Лужкова!»