Все про Блоггинг

AMP — LinuxReviews

AMP — это структура веб-разметки, разработанная и активно продвигаемая Google посредством комбинации своего браузера Google Chrome и продуктов Google Search и Google AdSense. Он похож на HTML, но более ограничен. Предполагается, что страницы AMP загружаются быстрее, а в некоторых случаях и загружаются.

История[edit]

AMP был запущен под названием «Ускоренные мобильные страницы» после обсуждений с технологическими гигантами из Сан-Франциско, такими как Twitter, Pinterest и LinkedIn, а также его «партнерами» по «Инициативе цифровых новостей» (DNI). DNI был описан Вейтом Денглером, председателем Совета Фонда DNI, как:

«PR-инструмент Google для завоевания европейской издательской индустрии«

Вейт Денглер, председатель Совета фонда DNI[1]

Название «Ускоренные мобильные страницы» позже было заменено сокращенным AMP.[2]

Google немедленно начал продвигать AMP-версии веб-страниц в мобильных результатах своих поисковых продуктов, когда в феврале 2016 года в Интернете появились первые AMP-страницы. Страницы AMP сначала рекламировались как «Главные новости». Google начал продвигать истории AMP в обычную область результатов поиска в сентябре 2016 года. В том же месяце Microsoft добавила поддержку страниц AMP в свои приложения Bing для Android и IOS. Веб-сайты, оптимизированные для мобильных устройств, которые предпочитают не использовать платформу Google AMP, с того времени оказались в невыгодном положении в результатах Google.

Twitter начал связывать пользователей своего мобильного приложения с AMP-версиями ссылок, опубликованных на этой платформе, в июне 2017 года.

Microsoft объявила о поддержке AMP и кэшировании страниц AMP в своей поисковой системе Bing в сентябре 2018 г.[3].

Спектакль «Преимущества»[edit]

AMP-страницы должны загружаться быстрее. Кэширование — это основной метод, который Google, Bing и Cloudflare используют для ускорения загрузки сторонних AMP-страниц. AMP-страницы, найденные в Google и Bing, будут обслуживается непосредственно из этих поисковых систем в обход фактического веб-сайта, на котором они размещены. AMP-страницы с веб-сайтов, находящихся за прокси-системой Cloudflare, обслуживаются из кеша Cloudflare. Ссылки, указывающие непосредственно на AMP-страницу на веб-сайте, который не находится за сетью обратного прокси-сервера Cloudflare «человек посередине», будут обслуживаться непосредственно с этого веб-сайта.

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

«7 способов сделать ваши страницы быстрыми с помощью AMP»[edit]

Промо-страница сайта AMP «Как работает AMP»[4] есть встроенное видео YouTube под названием «7 способов сделать ваши страницы с помощью AMP быстрее»[5].

Углубленное изучение этих «7 способов, которыми AMP делает ваши страницы быстрыми» дает некоторое представление о структуре AMP, которые стоит учитывать при рассмотрении достоинств AMP и его агрессивного продвижения.

«1. Никогда не останавливайте контент».[edit]

«Большинство веб-сайтов включают ресурсы и скрипты, которые синхронно загружаются в указанном порядке, поэтому отрисовка страницы блокируется. Это может быть, например, стороннее приложение, подобное этому красному домино, которое появляется между двумя блоками на странице. AMP решает эту проблему, создавая все его собственные сценарии загружаются параллельно в одно и то же время и не разрешают какой-либо пользовательский JavaScript, который может нарушить эти правила.

Большинство библиотек JavaScript всегда использовали асинхронные вызовы, поэтому разницы между AMP и HTML нет.

«2. Макет, независимый от активов».[edit]

На обычной HTML-странице браузер часто не знает, какой будет макет до загрузки ресурсов. Это демонстрируется на свернутом листе бумаги, причем дело в том, что вы не знаете, как он будет выглядеть, пока лист бумаги не будет развернут и вы не увидите, что на нем. В AMP все внешние изображения, объявления или окна iframe должны указывать свой размер в HTML, чтобы AMP могла определять размер и положение каждого элемента до загрузки дополнительного ресурса. Таким образом, AMP загружает макет страницы, не дожидаясь загрузки каких-либо ресурсов.

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



HTML-эквивалент в HTML будет выглядеть так:

Добро пожаловать

Однако HTML не требовать больше, чем


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

Одним из основных различий между тегом изображения HTML и тегом изображения AMP является не упомянутые в промо-ролике AMP из 7 пунктов: воля работает только при включенном JavaScript.[6]. Да, действительно — просто отображение изображения требует JavaScript. Имея резервные теги с использованием и

«3. Встроенный CSS с привязкой к размеру»[edit]

«На страницах AMP мы разрешаем только одну таблицу стилей, и эта таблица является встроенной. По сравнению с большинством веб-страниц это удаляет один или несколько HTTP-запросов из критического пути рендеринга. Встроенная таблица стилей имеет максимальный размер всего 50 КБ».

Обычный HTML позволяет разместить

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

Рассмотрим этот простой пример: вы посещаете какую-либо страницу на этом сайте, и ваш браузер загружает блог HTML размером 8 КБ и отдельный файл CSS размером 14 КБ, который связан в элементе заголовка HTML-страницы. Общий размер 8 + 14 КБ = 22 КБ. Это будет размер HTML-страницы со встроенным CSS. Некоторые ссылки на этом сайте интересны, поэтому вы нажимаете на эту ссылку и переходите на другую страницу. Браузер получает HTML-файл размером 5 КБ, который ссылается на тот же файл CSS. Браузер кэширует его, когда вы посещаете первую страницу, поэтому он использует этот кешированный файл. Таким образом, общий размер второй страницы составляет всего 5 КБ, которые занимает HTML-файл. Общий размер две страницы будет 8 + 5 + 14kB = 27 kB. Встраивание CSS в HTML-страницу приведет к тому, что первая загрузка будет 8 + 14 = 22 КБ, а вторая загрузка будет 5 + 14 = 19 КБ, что в сумме составит 41 КБ.

Тот же принцип применим к JavaScript. Вы жестяная банка встраивать JavaScript в HTML-страницы. Большинство веб-сайтов этого не делают, так как это ухудшает просмотр любой, кто просматривает более одной страницы.

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

«4. Эффективный запуск шрифтов»[edit]

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

Это полу-верный момент, страницы, которые загружают шрифты из Интернета, могут работать медленнее, если эти шрифты загружаются из файлов CSS. Страница может иметь как встроенную таблицу стилей, например AMP, которая загружает шрифты, так и более крупную внешнюю таблицу стилей, которая может быть кешем. Это исключает "преимущество" AMP в таких случаях. где используются внешние шрифты.

По моему скромному мнению, более важным является то, что файлы шрифтов обычно представляют собой большие дополнительные HTTP-запросы. Сегодня это меньшая проблема, чем когда я впервые узнал, что CSS имеет @font-face. Моя реакция тогда была это глупо. Я всегда использовал font-family со списком шрифтов, которые могут быть, а могут и не быть. font-family:Consolas,"Courier New", Courier, monospace; заставит браузер попробовать Consolas, затем Courier New, затем Courier, затем моноширинный. Страница HTML, которая не загружает внешние шрифты, будет быстрее, чем аналогичная страница AMP, которая загружает 10, и наоборот.

«6. Минимизируйте пересчеты стиля и макета»[edit]

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

Пример того, что происходит, когда изображение загружается с AMP и без него, столь же глуп, сколь и ложен, поскольку все системы управления контентом создают width= и height= элементы как часть тег. AMP требует в HTML их нет. Это не имеет большого практического значения; близко ко всем изображениям, встроенным в веб-страницы делать есть теги изображений с ширина и рост указано.

Случай JavaScript может быть допустимым. Некоторые страницы загружают десятки разных файлов JavaScript из разных мест. Большинство этих файлов JS содержат рекламу или трекеры, или и то, и другое.

«6. Только анимация с ускорением на GPU»[edit]

«В течение долгого времени вся работа по отображению страницы в браузере выполнялась процессором или центральным процессором компьютера. Оказывается, видеокарта, в частности, графический процессор, гораздо эффективнее перемещает пиксели. визуальная работа с графическим процессором, браузер может освободить циклы процессора и ускорить работу вашей страницы. (..) AMP заставляет вас оставаться в быстром темпе, разрешая только то, что может происходить с графическим процессором, а именно трансформировать емкость.

Этот «аргумент» действительно показывает, как Google связывает AMP со своим браузером Chrome. AMP - это, по сути, язык разметки. Он не контролирует то, что веб-браузер. Google делает иметь контроль над это собственный браузер. Другие веб-браузеры, такие как Firefox, будут вести себя по-разному, и Firefox и Chrome ведут себя по-разному в зависимости от устройства и операционной системы, на которой они работают.

Суть этого «аргумента» в том, что Собственный браузер Google оптимизирован для отображения страниц AMP быстрее, чем обычные страницы HTML.

«7. Приоритетная загрузка ресурсов»[edit]

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

Это, как и последняя «точка», описывающая функция веб-браузера.

«Когда AMP загружает ресурсы» как «Когда HTML загружает ресурсы», бессмысленное заявление. Веб-браузер загружает ресурсы с веб-страниц. Если бы это была реклама веб-браузера, такого как Brave, и история была бы «Когда Brave загружает ресурсы, он оптимизирует загрузку, и это делает ее быстрее, чем Falkon и Midori» тогда это имело бы смысл (если бы это было правдой).

Вывод[edit]

7 «пунктов», описывающих, насколько AMP «быстрее», - это чепуха до такой степени, что справедливо спросить «Почему они потрудились снять этот пропагандистский видеоролик?» Люди, не имеющие представления о том, как работает компьютер, могут купить эти «аргументы», но людям, которые занимались какой-либо веб-разработкой, будет трудно проглотить эти аргументы в пользу AMP.

Фактические преимущества в производительности AMP[edit]

Разметка и правила AMP накладывают ограничения на страницы AMP, что заставляет разработчиков очень просто страниц. Это можно сделать и в HTML. Рассмотрим этот очень простой пример HTML:




  Hello World!
        
        
        

 

Hello, world!!

This is a simple HTML page.

Приведенная выше HTML-страница из-за своей простоты загружает мгновенно. Он будет загружаться мгновенно при очень медленном мобильном соединении и соединениях Tor, так как это всего 415 байт. Он не очень информативен и был бы больше, если бы в нем было больше текста, но это простая рабочая HTML-страница.

Согласно документации AMP.dev, эквивалент этого AMP[7] быть:



  
    
    
    Hello World! In AMP
    
    
    

Вам также может понравиться...

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *