This is page 13 of 20. Use http://codebase.md/cloudflare/docs/imgs/%7B%7Bg.url(parentDoc.pod_path,%20locale=usedDoc.locale).path%7D%7D?lines=false&page={x} to view the full context.
# Directory Structure
```
├── .editorconfig
├── .eslintrc.json
├── .firebaserc
├── .github
│ └── workflows
│ └── semgrep.yml
├── .gitignore
├── .travis.yml
├── assets
│ ├── extra
│ │ └── brand_assets.zip
│ ├── img
│ │ ├── about
│ │ │ ├── case-studies
│ │ │ │ └── bg_lines.png
│ │ │ ├── design-principles
│ │ │ │ ├── bg1.svg
│ │ │ │ ├── bg2.svg
│ │ │ │ ├── design_icon_break.svg
│ │ │ │ ├── design_icon_fast.svg
│ │ │ │ ├── design_icon_future.svg
│ │ │ │ ├── design_icon_layers.svg
│ │ │ │ ├── design_icon_priorities.svg
│ │ │ │ ├── design_icon_ux.svg
│ │ │ │ ├── design_icon_whitelist.svg
│ │ │ │ ├── lines1.svg
│ │ │ │ └── lines2.svg
│ │ │ ├── how-amp-works
│ │ │ │ ├── line_behind.svg
│ │ │ │ └── lines_front.svg
│ │ │ ├── overview
│ │ │ │ ├── bg2.svg
│ │ │ │ ├── herobg.svg
│ │ │ │ ├── herolines1.svg
│ │ │ │ ├── herolines2.svg
│ │ │ │ ├── line4.svg
│ │ │ │ ├── lines3.svg
│ │ │ │ ├── what_phone.png
│ │ │ │ ├── what_phone@1_5x.png
│ │ │ │ └── [email protected]
│ │ │ └── who-use-amp
│ │ │ ├── adtech
│ │ │ │ ├── adtech_icon_customize.svg
│ │ │ │ ├── adtech_icon_intro.svg
│ │ │ │ ├── adtech_icon_reach.svg
│ │ │ │ ├── adtech_icon_revenue.svg
│ │ │ │ ├── indexexchange_logo.png
│ │ │ │ ├── lines.svg
│ │ │ │ ├── sharethrough_logo.png
│ │ │ │ ├── teads_logo.svg
│ │ │ │ └── triplelift_logo.png
│ │ │ ├── advertisers
│ │ │ │ ├── advertiser_phone_wired.png
│ │ │ │ ├── advertiser_phone_wired@1_5x.png
│ │ │ │ ├── [email protected]
│ │ │ │ ├── advertisers_bg.svg
│ │ │ │ ├── advertisers_icon_audience.svg
│ │ │ │ ├── advertisers_icon_everywhere.svg
│ │ │ │ ├── advertisers_icon_intro.svg
│ │ │ │ ├── advertisers_icon_ROI.svg
│ │ │ │ └── advertisers_lines.svg
│ │ │ ├── amp-ads
│ │ │ │ ├── ads_icon.svg
│ │ │ │ ├── cloudflare_logo.png
│ │ │ │ ├── doubleclick_logo.png
│ │ │ │ ├── google_logo.png
│ │ │ │ ├── lines_bottom1.svg
│ │ │ │ ├── lines_bottom2.svg
│ │ │ │ ├── lines.svg
│ │ │ │ ├── roi_icon.svg
│ │ │ │ ├── speed_icon.svg
│ │ │ │ └── triplelift_logo.png
│ │ │ ├── card_developers.png
│ │ │ ├── card_developers.svg
│ │ │ ├── card_smb.png
│ │ │ ├── card_smb.svg
│ │ │ ├── hero_triangle.png
│ │ │ ├── publishers
│ │ │ │ ├── globo_logo.svg
│ │ │ │ ├── nyt_logo.svg
│ │ │ │ ├── publisher_icon_business.svg
│ │ │ │ ├── publisher_icon_fast.svg
│ │ │ │ ├── publisher_icon_intro.svg
│ │ │ │ ├── publisher_icon_simple.svg
│ │ │ │ ├── publisher_phone_cnn.png
│ │ │ │ ├── publisher_phone_cnn@1_5x.png
│ │ │ │ ├── [email protected]
│ │ │ │ ├── wapo_logo.png
│ │ │ │ └── wired_logo.png
│ │ │ ├── who_icon_adtech.svg
│ │ │ ├── who_icon_advertisers.svg
│ │ │ ├── who_icon_publishers.svg
│ │ │ ├── who_lines1.svg
│ │ │ ├── who_lines2.svg
│ │ │ ├── who_phones_hero.png
│ │ │ ├── who_phones_hero@1_5x.png
│ │ │ └── [email protected]
│ │ ├── amp_favicon.png
│ │ ├── amp-conf
│ │ │ └── speakers
│ │ │ ├── alex.jpg
│ │ │ ├── ali.jpg
│ │ │ ├── ardan.jpg
│ │ │ ├── beck.jpg
│ │ │ ├── bez.jpg
│ │ │ ├── chen.jpg
│ │ │ ├── dane.jpg
│ │ │ ├── eric.jpg
│ │ │ ├── gina.jpg
│ │ │ ├── honey.jpg
│ │ │ ├── jeremy.jpg
│ │ │ ├── john.jpg
│ │ │ ├── le.jpg
│ │ │ ├── madison.jpg
│ │ │ ├── malte.jpg
│ │ │ ├── malteandrudy.jpg
│ │ │ ├── mariko.jpg
│ │ │ ├── matthew.jpg
│ │ │ ├── mike.jpg
│ │ │ ├── natalia.jpg
│ │ │ ├── nicole.jpg
│ │ │ ├── paul.jpg
│ │ │ ├── ranna.jpg
│ │ │ ├── richard.jpg
│ │ │ ├── rudy.jpg
│ │ │ ├── sam.jpg
│ │ │ ├── sarah.jpg
│ │ │ ├── sebastian.jpg
│ │ │ ├── senthil.jpg
│ │ │ ├── sriram.jpg
│ │ │ ├── vadim.jpg
│ │ │ ├── vamsee.jpg
│ │ │ ├── will.jpg
│ │ │ └── yamini.jpg
│ │ ├── arrow-blue.svg
│ │ ├── arrow.svg
│ │ ├── background.jpg
│ │ ├── blog-icon.svg
│ │ ├── brand-guidelines.pdf
│ │ ├── case-studies
│ │ │ ├── gizmodo_logo.png
│ │ │ ├── gizmodo_phone1.png
│ │ │ ├── gizmodo_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── gizmodo_phone2.png
│ │ │ ├── gizmodo_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── gizmodo_thumb.jpg
│ │ │ ├── gizmodo.pdf
│ │ │ ├── hearst_framed.png
│ │ │ ├── hearst_framed2.png
│ │ │ ├── hearst_logo.png
│ │ │ ├── hearst_thumb.jpg
│ │ │ ├── hearst.pdf
│ │ │ ├── milestone_home_framed.png
│ │ │ ├── milestone_logo.png
│ │ │ ├── milestone_search_framed.png
│ │ │ ├── milestone_thumb.jpg
│ │ │ ├── milestone.pdf
│ │ │ ├── plista_graphic.png
│ │ │ ├── plista_logo.png
│ │ │ ├── plista_thumb.jpg
│ │ │ ├── plista.pdf
│ │ │ ├── relay_media_logo.png
│ │ │ ├── relay_media_thumb.jpg
│ │ │ ├── relay_media.pdf
│ │ │ ├── relaymedia_phone1.png
│ │ │ ├── relaymedia_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── relaymedia_phone2.png
│ │ │ ├── relaymedia_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── slate_logo.png
│ │ │ ├── slate_phone1.png
│ │ │ ├── slate_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── slate_phone2.png
│ │ │ ├── slate_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── slate_thumb.jpg
│ │ │ ├── slate.pdf
│ │ │ ├── teads_logo.png
│ │ │ ├── teads_logo2.png
│ │ │ ├── teads_phone.png
│ │ │ ├── teads_phone@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── teads_thumb.jpg
│ │ │ ├── teads.pdf
│ │ │ ├── terra_framed1.png
│ │ │ ├── terra_framed2.png
│ │ │ ├── terra_logo.png
│ │ │ ├── terra_thumb.jpg
│ │ │ ├── terra.pdf
│ │ │ ├── wapo_logo.png
│ │ │ ├── wapo_thumb.png
│ │ │ ├── wapo.pdf
│ │ │ ├── washingtonpost_phone.png
│ │ │ ├── washingtonpost_phone@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── wired_logo.png
│ │ │ ├── wired_phone1.png
│ │ │ ├── wired_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── wired_phone2.png
│ │ │ ├── wired_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── wired_thumb.jpg
│ │ │ └── wired.pdf
│ │ ├── cheveron-down.svg
│ │ ├── close.svg
│ │ ├── comment.png
│ │ ├── docs
│ │ │ ├── icon_important.svg
│ │ │ ├── icon_note.svg
│ │ │ ├── icon_read.svg
│ │ │ ├── icon_tip.svg
│ │ │ ├── responsive_amp_img.png
│ │ │ ├── too_much_css.png
│ │ │ ├── validator_console_imgerror.png
│ │ │ ├── validator_errors.png
│ │ │ ├── validator_extension_imgerror.png
│ │ │ ├── validator_icon_invalid.png
│ │ │ ├── validator_icon_link.png
│ │ │ ├── validator_icon_valid.png
│ │ │ ├── validator_mandatory_error.png
│ │ │ ├── validator_web_ui.png
│ │ │ └── validator_webui_imgerror.png
│ │ ├── enforce-comment.png
│ │ ├── footer
│ │ │ ├── line-left.png
│ │ │ ├── line-right-2.png
│ │ │ └── line-right.png
│ │ ├── github.png
│ │ ├── hamburger.svg
│ │ ├── home
│ │ │ ├── bg_experience.png
│ │ │ ├── home_hero_phone.png
│ │ │ ├── home_hero_phone@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── home_icon_flexibility.svg
│ │ │ ├── home_icon_performance.svg
│ │ │ ├── home_phone_ebay.png
│ │ │ ├── home_phone_ebay@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── lines2.svg
│ │ │ ├── lines3.svg
│ │ │ ├── shapebg.svg
│ │ │ ├── teads_logo.svg
│ │ │ ├── wapo_logo.png
│ │ │ └── wired_logo.png
│ │ ├── ic_open_in_new_black.svg
│ │ ├── ic_open_in_new_white.svg
│ │ ├── icons
│ │ │ ├── 120.png
│ │ │ ├── 144.png
│ │ │ ├── 152.png
│ │ │ ├── 168.png
│ │ │ ├── 180.png
│ │ │ ├── 192.png
│ │ │ ├── 48.png
│ │ │ ├── 512.png
│ │ │ ├── 72.png
│ │ │ ├── 96.png
│ │ │ └── any.svg
│ │ ├── latest
│ │ │ ├── events
│ │ │ │ ├── event_empty.png
│ │ │ │ ├── event_empty.svg
│ │ │ │ └── event_hero.svg
│ │ │ ├── icon_audience.png
│ │ │ ├── icon_audience.svg
│ │ │ ├── icon_calendar.png
│ │ │ ├── icon_calendar.svg
│ │ │ ├── icon_location.png
│ │ │ ├── icon_location.svg
│ │ │ ├── icon_retweet.png
│ │ │ ├── icon_retweet.svg
│ │ │ ├── icon_twitter.svg
│ │ │ ├── latest_hero.jpg
│ │ │ ├── line_hero_back.svg
│ │ │ └── line_hero_front.svg
│ │ ├── liveblog-pagination.png
│ │ ├── login-button.png
│ │ ├── logo-blue.svg
│ │ ├── logout-button.png
│ │ ├── malte.jpg
│ │ ├── motions
│ │ │ └── amp-lines-motions.png
│ │ ├── nav
│ │ │ ├── back_arrow.png
│ │ │ ├── back_arrow.svg
│ │ │ ├── close.png
│ │ │ ├── close.svg
│ │ │ ├── next_level.png
│ │ │ └── next_level.svg
│ │ ├── partners
│ │ │ ├── adobe_analytics.png
│ │ │ ├── chartbeat.png
│ │ │ ├── comscore.png
│ │ │ ├── ggl_bw.png
│ │ │ ├── ggl.png
│ │ │ ├── li.png
│ │ │ ├── nuzzel.png
│ │ │ ├── parsely.png
│ │ │ ├── pinterest.png
│ │ │ ├── tw.png
│ │ │ └── wp.png
│ │ ├── platforms
│ │ │ ├── chrome.png
│ │ │ ├── criteo.png
│ │ │ ├── edge.png
│ │ │ ├── firefox.png
│ │ │ ├── google.png
│ │ │ ├── inmobi.png
│ │ │ ├── kargo.png
│ │ │ ├── mediavine.png
│ │ │ ├── opera.png
│ │ │ ├── plista.png
│ │ │ ├── safari.png
│ │ │ └── yahoo.png
│ │ ├── publishers
│ │ │ ├── abril.png
│ │ │ ├── asahi.png
│ │ │ ├── atlantic_media.png
│ │ │ ├── bbc_news.png
│ │ │ ├── buzzfeed.png
│ │ │ ├── condenast.png
│ │ │ ├── daily_mail.png
│ │ │ ├── economist.png
│ │ │ ├── editora_globo.png
│ │ │ ├── el_pais.png
│ │ │ ├── fairfax_media.png
│ │ │ ├── folha_de_s.paulo.png
│ │ │ ├── franzfurter_allgemeine.png
│ │ │ ├── ft.png
│ │ │ ├── gannett.png
│ │ │ ├── guardian.png
│ │ │ ├── hearst.png
│ │ │ ├── huffington_post.png
│ │ │ ├── la_stampa.png
│ │ │ ├── les_echos.png
│ │ │ ├── mainichi.png
│ │ │ ├── mashable.png
│ │ │ ├── mcclatchy.png
│ │ │ ├── new_york_times.png
│ │ │ ├── newscorp_australia.png
│ │ │ ├── nine_msn.png
│ │ │ ├── nrc.png
│ │ │ ├── ny_daily_news.png
│ │ │ ├── nypost.png
│ │ │ ├── pearson.png
│ │ │ ├── sankei.png
│ │ │ ├── telegraph.png
│ │ │ ├── time.png
│ │ │ ├── uol.png
│ │ │ ├── us_news.png
│ │ │ ├── vox_media.png
│ │ │ ├── wallstreetjournal.png
│ │ │ ├── washington_post.png
│ │ │ └── zeit_online.png
│ │ ├── quotes
│ │ │ ├── chartbeat.jpg
│ │ │ ├── ebay.jpg
│ │ │ ├── faz.jpg
│ │ │ ├── folha.jpg
│ │ │ ├── google.jpg
│ │ │ ├── guardian.jpg
│ │ │ ├── hearst.jpg
│ │ │ ├── lastampa.jpg
│ │ │ ├── newyorktimes.jpeg
│ │ │ ├── twitter.jpg
│ │ │ └── vox.jpg
│ │ ├── return-parameter.png
│ │ ├── sprite.svg
│ │ ├── symbols
│ │ │ ├── carat-down.svg
│ │ │ ├── carat.svg
│ │ │ ├── caret-right.svg
│ │ │ ├── close.svg
│ │ │ ├── lang-icon.svg
│ │ │ ├── logo-blue-standalone.svg
│ │ │ ├── return.svg
│ │ │ ├── search.svg
│ │ │ ├── share-close.svg
│ │ │ ├── share.svg
│ │ │ ├── template.scss
│ │ │ ├── twitter.svg
│ │ │ ├── video-play.svg
│ │ │ └── wordpress.svg
│ │ └── twitter.png
│ ├── manifest.json
│ ├── sass
│ │ ├── _accordions.scss
│ │ ├── _animated_lines.scss
│ │ ├── _animations.scss
│ │ ├── _bg-triangle.scss
│ │ ├── _callouts.scss
│ │ ├── _cards.scss
│ │ ├── _carousel.scss
│ │ ├── _config.scss
│ │ ├── _content-post.scss
│ │ ├── _content-section.scss
│ │ ├── _content.scss
│ │ ├── _doc-nav.scss
│ │ ├── _footer.scss
│ │ ├── _global.scss
│ │ ├── _grid.scss
│ │ ├── _header.scss
│ │ ├── _inline-toc.scss
│ │ ├── _lang_switcher.scss
│ │ ├── _large-cta.scss
│ │ ├── _lightbox.scss
│ │ ├── _mixins.scss
│ │ ├── _nav.scss
│ │ ├── _points.scss
│ │ ├── _post-item.scss
│ │ ├── _responsive.scss
│ │ ├── _search.scss
│ │ ├── _share.scss
│ │ ├── _sidebar.scss
│ │ ├── _sprite_generated.scss
│ │ ├── _sprite.scss
│ │ ├── _syntax_highlighting.scss
│ │ ├── _tables.scss
│ │ ├── _toc.scss
│ │ ├── about-how.min.scss
│ │ ├── about-overview.min.scss
│ │ ├── about-who-vertical.min.scss
│ │ ├── about-who.min.scss
│ │ ├── blog.min.scss
│ │ ├── case-study.min.scss
│ │ ├── design-principles.min.scss
│ │ ├── docs.min.scss
│ │ ├── home.min.scss
│ │ ├── list.min.scss
│ │ ├── main.min.scss
│ │ ├── pages
│ │ │ ├── _about-how.scss
│ │ │ ├── _about-overview.scss
│ │ │ ├── _about-who-vertical.scss
│ │ │ ├── _about-who.scss
│ │ │ ├── _case-study.scss
│ │ │ ├── _design-principles.scss
│ │ │ ├── _events.scss
│ │ │ ├── _faqs.scss
│ │ │ ├── _home.scss
│ │ │ ├── _latest.scss
│ │ │ ├── _list.scss
│ │ │ ├── _post-detail.scss
│ │ │ ├── _roadmap.scss
│ │ │ ├── _who.scss
│ │ │ └── amp-conf.scss
│ │ └── section.min.scss
│ └── video
│ ├── amp-phone.mp4
│ └── amp-phone.webm
├── content
│ ├── contribute
│ │ └── governance.md
│ ├── docs
│ │ ├── _blueprint.yaml
│ │ ├── blank.html
│ │ ├── build.md
│ │ ├── contribute
│ │ │ ├── _blueprint.yaml
│ │ │ ├── contribute.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── file-a-bug.md
│ │ │ └── github.md
│ │ ├── contribute.md
│ │ ├── get_started
│ │ │ ├── _blueprint.yaml
│ │ │ ├── create
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── basic_markup.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── basic_markup@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── basic_markup@zh_CN.md
│ │ │ │ ├── include_image.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── include_image@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── include_image@zh_CN.md
│ │ │ │ ├── prepare_for_discovery.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── prepare_for_discovery@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── prepare_for_discovery@zh_CN.md
│ │ │ │ ├── presentation_layout.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── presentation_layout@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── presentation_layout@zh_CN.md
│ │ │ │ ├── preview_and_validate.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── preview_and_validate@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── preview_and_validate@zh_CN.md
│ │ │ │ ├── publish.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── publish@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── publish@zh_CN.md
│ │ │ ├── create.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── create@pt_BR.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── create@zh_CN.md
│ │ │ ├── live_blog.md
│ │ │ ├── [email protected]
│ │ │ ├── login_requiring
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── add_comment.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── login.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── logout.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── summary.md
│ │ │ │ └── [email protected]
│ │ │ ├── login_requiring.md
│ │ │ └── [email protected]
│ │ ├── getting-started.md
│ │ ├── guides
│ │ │ ├── _blueprint.yaml
│ │ │ ├── author_develop
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── ads_on_amp
│ │ │ │ │ ├── _blueprint.yaml
│ │ │ │ │ ├── ads_getting_started.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── ads_tips.md
│ │ │ │ │ └── [email protected]
│ │ │ │ ├── ads_on_amp.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── amp_replacements.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── iframes.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── responsive_amp
│ │ │ │ │ ├── _blueprint.yaml
│ │ │ │ │ ├── art_direction.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── control_layout.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── control_layout@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── control_layout@zh_CN.md
│ │ │ │ │ ├── custom_fonts.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── placeholders.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── style_pages.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── style_pages@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ └── style_pages@zh_CN.md
│ │ │ │ ├── responsive_amp.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── responsive_amp@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── responsive_amp@zh_CN.md
│ │ │ │ ├── third_party_components.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── third_party_components@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── third_party_components@zh_CN.md
│ │ │ ├── author_develop.md
│ │ │ ├── debug
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── validate.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── validate@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── validate@zh_CN.md
│ │ │ ├── debug.md
│ │ │ ├── deploy
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── analytics_amp
│ │ │ │ │ ├── _blueprint.yaml
│ │ │ │ │ ├── analytics_basics.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── analytics_basics@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── analytics_basics@zh_CN.md
│ │ │ │ │ ├── deep_dive_analytics.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── deep_dive_analytics@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── deep_dive_analytics@zh_CN.md
│ │ │ │ │ ├── use_cases.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── use_cases@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ └── use_cases@zh_CN.md
│ │ │ │ ├── analytics_amp.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── analytics_amp@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── analytics_amp@zh_CN.md
│ │ │ │ ├── discovery.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── discovery@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── discovery@zh_CN.md
│ │ │ │ ├── engagement.md
│ │ │ │ └── [email protected]
│ │ │ ├── deploy.md
│ │ │ └── embed
│ │ │ ├── _blueprint.yaml
│ │ │ └── login-paywalls.md
│ │ ├── guides.md
│ │ ├── reference
│ │ │ ├── _blueprint.yaml
│ │ │ ├── common_attributes.md
│ │ │ ├── components
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── ads-analytics
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── dynamic-content
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── layout
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── media
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── presentation
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ └── social
│ │ │ │ └── _blueprint.yaml
│ │ │ ├── components.md
│ │ │ ├── experimental.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── experimental@pt_BR.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── experimental@zh_CN.md
│ │ │ ├── validation_errors.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── validation_errors@pt_BR.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ └── validation_errors@zh_CN.md
│ │ ├── reference.md
│ │ └── tutorials.md
│ ├── includes
│ │ ├── _blueprint.yaml
│ │ ├── amp-conf-2017.yaml
│ │ ├── amp-iframe.md
│ │ ├── blog_feed.yaml
│ │ ├── doc.yaml
│ │ ├── events.yaml
│ │ ├── home.yaml
│ │ ├── html-example.md
│ │ ├── latest.yaml
│ │ ├── list-blog.yaml
│ │ ├── lists.yaml
│ │ ├── menu.yaml
│ │ ├── roadmap.yaml
│ │ └── tweets.yaml
│ ├── latest
│ │ ├── _blueprint.yaml
│ │ ├── blog
│ │ │ ├── _blueprint.yaml
│ │ │ ├── 1056.md
│ │ │ ├── ads-on-the-web-will-get-better-with-amp-heres-how.md
│ │ │ ├── amp-roadmap-update-for-mid-q1-2017.md
│ │ │ ├── amp-up-for-amp-conf-2017.md
│ │ │ ├── grow-your-business-with-ads-on-amp.md
│ │ │ ├── new-default-placeholders-for-ads-in-amp.md
│ │ │ ├── new-industry-benchmarks-for-mobile-page-speed.md
│ │ │ ├── speeding-up-news-apps-with-amp.md
│ │ │ ├── whats-in-an-amp-url.md
│ │ │ └── why-amp-caches-exist.md
│ │ ├── latest.html
│ │ ├── list-blog.html
│ │ ├── list-event.html
│ │ ├── list-past-event.html
│ │ └── roadmap.html
│ ├── learn
│ │ ├── _blueprint.yaml
│ │ ├── about-amp.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-amp@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-amp@zh_CN.md
│ │ ├── about-how.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-how@pt_BR.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-how@zh_CN.yaml
│ │ ├── amp-design-principles.yaml
│ │ ├── browsers.md
│ │ ├── case-studies
│ │ │ ├── _blueprint.yaml
│ │ │ ├── category
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── advertisers.md
│ │ │ │ └── publishers.md
│ │ │ ├── gizmodo.md
│ │ │ ├── hearst.md
│ │ │ ├── milestone.md
│ │ │ ├── plista.md
│ │ │ ├── relay_media.md
│ │ │ ├── slate.md
│ │ │ ├── teads.md
│ │ │ ├── terra.md
│ │ │ ├── washingtonpost.md
│ │ │ └── wired.md
│ │ ├── case-studies.html
│ │ ├── how-amp-works.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── how-amp-works@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── how-amp-works@zh_CN.md
│ │ ├── metrics.html
│ │ ├── overview.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@pt_BR.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@zh_CN.yaml
│ │ ├── who
│ │ │ ├── _blueprint.yaml
│ │ │ ├── ad-tech-platforms.yaml
│ │ │ ├── advertisers.yaml
│ │ │ ├── amp-ads.yaml
│ │ │ └── publishers.yaml
│ │ └── who-uses-amp.yaml
│ ├── pages
│ │ ├── _blueprint.yaml
│ │ ├── amp-conf-2017
│ │ │ ├── _blueprint.yaml
│ │ │ ├── accessibility.html
│ │ │ └── code-of-conduct.html
│ │ ├── amp-conf-2017.html
│ │ ├── home.html
│ │ ├── how-it-works.html
│ │ └── metrics_chart.html
│ └── support
│ ├── _blueprint.yaml
│ ├── developer
│ │ ├── _blueprint.yaml
│ │ ├── documentation-bug.md
│ │ ├── mailing-list.md
│ │ ├── platform-bug.md
│ │ ├── slack.md
│ │ └── stack-overflow.md
│ ├── developer.md
│ ├── faqs
│ │ ├── _blueprint.yaml
│ │ ├── overview.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@zh_CN.md
│ │ ├── platform-involvement.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── platform-involvement@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── platform-involvement@zh_CN.md
│ │ ├── publisher-monetization.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── publisher-monetization@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── publisher-monetization@zh_CN.md
│ │ └── supported-platforms.md
│ ├── faqs.md
│ ├── platform.md
│ ├── support.md
│ ├── vendor
│ │ ├── _blueprint.yaml
│ │ └── amp-certification.md
│ └── vendor.md
├── CONTRIBUTING.md
├── firebase.json
├── gulpfile.js
├── LICENSE
├── npm-shrinkwrap.json
├── package.json
├── podspec.yaml
├── pwa
│ ├── google7199ce9da1ad191b.html
│ ├── pwa.html
│ ├── pwa.js
│ └── service-worker.js
├── README.md
├── scripts
│ ├── component_categories.json
│ ├── import_docs.js
│ ├── import_docs.json
│ ├── update_blog_links.js
│ ├── update_platforms_page.js
│ └── update_tweets.js
├── translations
│ ├── ar
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── de
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── es
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── fr
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── id
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── it
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── ja
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── ko
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── messages.pot
│ ├── pl
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── pt_BR
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── ru
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── th
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── tr
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ └── zh_CN
│ └── LC_MESSAGES
│ └── messages.po
└── views
├── about-casestudies.html
├── about-how.html
├── about-overview.html
├── about-who-vertical.html
├── about-who.html
├── base.html
├── blank.html
├── blog_detail.html
├── case-study.html
├── design-principles.html
├── doc.html
├── grid_page.html
├── list_page.html
├── partials
│ ├── breadcrumb-nav.html
│ ├── doc_nav.html
│ ├── faq-accordion.html
│ ├── footer-cta.html
│ ├── footer.html
│ ├── grid-card.html
│ ├── head.html
│ ├── header.html
│ ├── lang_switcher.html
│ ├── large-cta.html
│ ├── lines.html
│ ├── nav.html
│ ├── points.html
│ ├── post-item.html
│ ├── promo_banner.html
│ ├── search.html
│ ├── share.html
│ ├── sidebar.html
│ └── sub_nav.html
└── section_page.html
```
# Files
--------------------------------------------------------------------------------
/content/docs/guides/debug/validate@pt_BR.md:
--------------------------------------------------------------------------------
```markdown
---
$title: Validar páginas AMP
---
A principal vantagem da AMP não é apenas tornar as páginas mais rápidas, mas também acelerá-las de uma forma que possa ser *validada*. Assim, alguns terceiros, como Twitter, Instagram ou a Pesquisa Google, recebem a oportunidade de veicular páginas AMP para os leitores de maneiras cada vez mais interessantes.
## Como posso verificar se a minha página é uma AMP válida?
Existem diversas formas para validar um documento AMP. Todas elas terão
o mesmo resultado, então use a que mais se adaptar ao seu
estilo de desenvolvimento.
Além da validade da AMP, você também pode querer confirmar se seu documento AMP [pode ser detectado](/docs/guides/discovery.html) por plataformas de terceiros.
### Console do navegador para desenvolvedores
O validador de AMP vem com a biblioteca JavaScript AMP para estar disponível em todas as páginas AMP por padrão. Para validar:
1. Abra sua página AMP no navegador
1. Anexe "`#development=1`" ao URL, por exemplo, `http://localhost:8000/released.amp.html#development=1`.
1. Abra o [console do Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/debug/console/) e verifique se há erros de validação.
Os erros do Developer Console serão mostrados assim:
<amp-img src="/static/img/docs/validator_errors.png" width="713" height="243" alt="Captura de tela de erros no validador de AMP no console do desenvolvedor Google Chrome" layout="responsive"></amp-img>
### Interface da Web
O validador de AMP pode ser usado como uma interface da Web em
[validator.ampproject.org](https://validator.ampproject.org/). Essa
interface exibe os erros in-line ao lado da fonte HTML da página.
A interface é um editor interativo: alterações na fonte HTML resultam em
revalidação interativa.
<amp-img src="/static/img/docs/validator_web_ui.png" width="660" height="507" alt="Captura de tela de validator.ampproject.org com exemplos de erro." layout="responsive"></amp-img>
### Extensão do navegador
O validador de AMP pode ser acessado diretamente na barra de ferramentas do seu navegador por meio de
uma extensão. Enquanto você navega, ele valida automaticamente cada página AMP visitada
e fornece uma indicação visual sobre essa validade por meio de um ícone
colorido.
<table>
<tr>
<td>
<amp-img src="/static/img/docs/validator_icon_invalid.png" width="20" height="20" alt="Ícone da AMP em vermelho indicando documento de AMP inválido." layout="fixed"></amp-img>
</td>
<td>Quando houver erros dentro de uma página AMP, o ícone da extensão
ficará vermelho e informará o número de erros encontrados.
</td>
</tr>
<tr>
<td>
<amp-img src="/static/img/docs/validator_icon_valid.png" width="20" height="20" alt="Ícone da AMP em verde indicando documento de AMP válido." layout="fixed"></amp-img>
</td>
<td>Quando não houver erros dentro de uma página AMP, o ícone ficará
verde e exibirá o número de avisos, no caso de existir algum.
</td>
</tr>
<tr>
<td>
<amp-img src="/static/img/docs/validator_icon_link.png" width="20" height="20" alt="Ícone da AMP em azul indicando variante HTML para AMP, se clicado." layout="fixed"></amp-img>
</td>
<td>Quando a página não for AMP, mas houver uma versão AMP
disponível, será exibido um ícone azul de link. Além disso, ao clicar na
extensão, o navegador será redirecionado para a versão AMP.
</td>
</tr>
</table>
Extensão do validador de AMP para
[Google Chrome](https://chrome.google.com/webstore/detail/amp-validator/nmoffdblmcmgeicmolmhobpoocbbmknc) e [Opera](https://addons.opera.com/en-gb/extensions/details/amp-validator/).
### Ferramenta de linha de comando
Como pré-requisito, pode ser necessário instalar o <a href="https://docs.npmjs.com/getting-started/installing-node">Node.js e seu respectivo gerenciador de pacotes
`npm` no seu sistema</a>.
Para instalar a [ferramenta de linha de comando do validador de HTML para AMP](https://www.npmjs.com/package/amphtml-validator), digite `npm install -g amphtml-validator`.
Agora, vamos validar uma página HTML para AMP real.
[sourcecode:console]
$ amphtml-validator https://www.ampproject.org/
https://www.ampproject.org/: PASS
[/sourcecode]
Não é novidade que esta página tem um HTML para AMP válido. Vamos tentar uma página que não seja válida:
[several_errors.html](https://raw.githubusercontent.com/ampproject/amphtml/master/validator/testdata/feature_tests/several_errors.html). Para executar o comando `amphtml-validator`, você pode fornecer o URL da página ou um nome de arquivo local. Faça download de [several_errors.html](https://raw.githubusercontent.com/ampproject/amphtml/master/validator/testdata/feature_tests/several_errors.html) e salve-o em um arquivo. Em seguida, execute:
[sourcecode:console]
$ amphtml-validator several_errors.html
several_errors.html:23:2 O atributo 'charset' pode não aparecer na tag 'meta name= and content='.
several_errors.html:26:2 A tag 'script' não é permitida, exceto em formas específicas.
several_errors.html:32:2 O atributo obrigatório 'height' está ausente na tag 'amp-img'. (veja https://www.ampproject.org/docs/reference/amp-img.html)
several_errors.html:34:2 O atributo 'width' na tag 'amp-ad' está definido para o valor inválido '100%'. (veja https://www.ampproject.org/docs/reference/amp-ad.html)
...
[/sourcecode]
As mensagens de erro são formadas por nome de arquivo, linha, coluna e uma mensagem,
muitas vezes seguida por um link para a referência HTML da AMP. Alguns editores, incluindo o Emacs
(procure o comando de compilação e o modo de compilação), podem interpretar esse formato e levá-lo
diretamente para os erros no arquivo original.
Para ter um bom ponto de partida para criar a sua própria página AMP, considere [minimum_valid_amp.html](https://raw.githubusercontent.com/ampproject/amphtml/master/validator/testdata/feature_tests/minimum_valid_amp.html):
[sourcecode:console]
$ amphtml-validator minimum_valid_amp.html
minimum_valid_amp.html: PASS
[/sourcecode]
A ferramenta de linha de comando oferece recursos adicionais, incluindo desativação da cor,
impressão da saída JSON ou execução de uma versão específica do
validador JavaScript (por padrão, ele executa o script que foi publicado mais recentemente).
[sourcecode:console]
$ amphtml-validator --help
Uso: index [options] <fileOrUrlOrMinus...>
Valida os arquivos ou URLs fornecidos como argumentos. Se "-" for
especificado, lê a partir de stdin.
Opções:
-h, --help informação de uso de saída
-V, --version gera o número da versão
--validator_js <fileOrUrl> O JavaScript do validador.
Versão mais recente publicada por padrão ou
dist/validator_minified.js (criada com build.py)
para desenvolvimento.
--format <color|text|json> Como formatar a saída.
"color" exibe erros/avisos/êxito em
vermelho/laranja/verde.
"text" evita cor (por exemplo, útil para terminais sem
suporte a cor).
"json" emite json correspondente à mensagem ValidationResult
em validator.proto.
[/sourcecode]
## O que acontece se a minha página não for válida?
O validador de AMP não é apenas uma conveniência para você durante o desenvolvimento. Ele também é usado por plataformas como Twitter ou Google, que integram as páginas AMP aos seus conteúdos e resultados de pesquisa. Mais ainda, eles não costumam solicitar as páginas diretamente do seu servidor, mas usam o Google AMP Cache, um serviço gratuito que armazena em cache as suas páginas e as disponibiliza em todo o mundo para que sejam carregadas ainda mais rápido.
Se o serviço de validação de AMP detectar que há algo de errado com a sua página, ela não será detectada e distribuída por sites de terceiros e não aparecerá no Google AMP Cache. Desse modo, não só você perde os benefícios do cache em termos de velocidade, como corre o risco de não ter a sua página sendo exibida em muitos lugares. Como isso seria uma pena, vamos tomar cuidado para que não aconteça.
## Como faço para corrigir os erros de validação?
A maioria dos erros de validação são fáceis de tratar e corrigir. Veja esta tag HTML:
[sourcecode:html]
<img src="cat.png">
[/sourcecode]
Ela gera este erro de validação AMP, apresentado nestas diferentes ferramentas:
* Console do navegador para desenvolvedores
<amp-img alt="Erro de AMP: a tag 'img' só pode aparecer como descendente da tag 'noscript'. Você quis dizer 'amp-img'? linha 11, coluna 2" height="30" src="/static/img/docs/validator_console_imgerror.png" width="696" layout="responsive"></amp-img>
* Interface da Web
<amp-img alt="Erro de AMP: a tag 'img' só pode aparecer como descendente da tag 'noscript'. Você quis dizer 'amp-img'? linha 11, coluna 2" height="58" src="/static/img/docs/validator_webui_imgerror.png" width="676" layout="responsive"></amp-img>
* Extensão do navegador
<amp-img alt="Erro de AMP: a tag 'img' só pode aparecer como descendente da tag 'noscript'. Você quis dizer 'amp-img'? linha 11, coluna 2" height="108" src="/static/img/docs/validator_extension_imgerror.png" width="724" layout="responsive"></amp-img>
Cada ferramenta fornece várias informações:
1. A localização (linha e coluna) no documento HTML onde ocorreu o
erro, que pode receber cliques em algumas interfaces para destacar esse local. Nesse
caso, o problema ocorre na linha 11, coluna 2.
1. Uma linha de texto que descreve o erro. Nesse caso, o texto indica que
uma tag `<img>` está em uso, quando na verdade a tag `<amp-img>` é que deveria estar sendo usada.
1. Um link para um documento relevante sobre o erro. Nesse caso, a
documentação da tag `<amp-img>`. Nem todos os erros geram
links de documentação.
Em uma releitura cuidadosa das especificações, percebemos que estamos usando uma tag `<img>`, quando deveríamos ter usado uma tag `<amp-img>`.
Para entender melhor a lista completa de possíveis erros,
consulte o [guia de erros de validação de AMP](https://www.ampproject.org/docs/reference/validation_errors.html).
Se a solução não aparecer mesmo após uma avaliação cuidadosa, [faça uma pergunta](http://stackoverflow.com/questions/tagged/amp-html), e nós tentaremos ajudar.
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/responsive_amp/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Layout supportati
---
Rendi reattivi i tuoi elementi utilizzando `layout=responsive`.
[TOC]
## Valori supportati per l'attributo layout
Utilizza i layout reattivi per impostazione predefinita.
Di seguito è riportato l'elenco completo dei valori supportati per l'attributo layout.
<table>
<thead>
<tr>
<th class="col-twenty" data-th="Layout type">Tipo di layout</th>
<th class="col-twenty" data-th="Width/height required">Larghezza/altezza obbligatorie</th>
<th data-th="Behavior">Comportamento</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-twenty" data-th="Layout type"><code>nodisplay</code></td>
<td class="col-twenty" data-th="Description">No</td>
<td data-th="Behavior">Elemento non visualizzato. Questo layout può essere applicato a ogni elemento AMP. Il componente non occupa spazio sullo schermo, come non ci fosse alcuno stile di visualizzazione applicato. Si presume che l'elemento possa visualizzarsi automaticamente in seguito all'azione dell'utente, ad esempio <a href="/docs/reference/extended/amp-lightbox.html"><code>amp-lightbox</code></a>.</td>
</tr>
<tr>
<td class="col-twenty" data-th="Layout type"><code>fixed</code></td>
<td class="col-twenty" data-th="Description">Sì</td>
<td data-th="Behavior">L'elemento ha larghezza e altezza fisse; la reattività non è supportata. Le uniche eccezioni sono gli elementi <a href="/docs/reference/amp-pixel.html"><code>amp-pixel</code></a> e <a href="/docs/reference/extended/amp-audio.html"><code>amp-audio</code></a>.</td>
</tr>
<tr>
<td class="col-twenty" data-th="Layout type"><code>responsive</code></td>
<td class="col-twenty" data-th="Description">Sì</td>
<td data-th="Behavior">L'elemento viene adattato alla larghezza del relativo elemento contenitore, mentre la sua altezza viene ridimensionata automaticamente in base alle proporzioni stabilite dagli attributi di larghezza e altezza. Questo layout è adatto per la maggior parte degli elementi AMP, inclusi <a href="/docs/reference/amp-img.html"><code>amp-img</code></a> e <a href="/docs/reference/amp-video.html"><code>amp-video</code></a>. Lo spazio disponibile dipende dall'elemento principale e può anche essere personalizzato utilizzando l'elemento CSS <code>max-width</code>.</td>
</tr>
<tr>
<td class="col-twenty" data-th="Layout type"><code>fixed-height</code></td>
<td class="col-twenty" data-th="Description">Solo l'altezza</td>
<td data-th="Behavior">L'elemento occupa lo spazio a sua disposizione, ma la sua altezza rimane invariata. Questo layout è adatto per elementi quali <a href="/docs/reference/extended/amp-carousel.html"><code>amp-carousel</code></a>, che prevede contenuti in posizione orizzontale. L'attributo <code>width</code> non deve essere presente o deve essere impostato su <code>auto</code>.</td>
</tr>
<tr>
<td class="col-twenty" data-th="Layout type"><code>fill</code></td>
<td class="col-twenty" data-th="Description">No</td>
<td data-th="Behavior">L'elemento occupa lo spazio a sua disposizione, sia in larghezza sia in altezza. In altre parole, il layout di un elemento fill corrisponde a quello dell'elemento principale.</td>
</tr>
<tr>
<td class="col-twenty" data-th="Layout type"><code>container</code></td>
<td class="col-twenty" data-th="Description">No</td>
<td data-th="Behavior">L'elemento consente ai relativi elementi secondari di definire le proprie dimensioni, come un normale elemento <code>div</code> HTML. Il componente in sé non dovrebbe avere un layout specifico, ma funzionare soltanto da contenitore. I relativi elementi secondari vengono visualizzati all'istante.</td>
</tr>
</tbody>
</table>
### Che cosa succede se non vengono definite la larghezza e l'altezza?
Se i valori `width` o `height` non vengono specificati, in alcuni casi il runtime AMP può stabilire i seguente valori predefiniti:
* [`amp-pixel`](/docs/reference/amp-pixel.html): per larghezza e altezza viene impostato il valore predefinito 0.
* [`amp-audio`](/docs/reference/extended/amp-audio.html): la larghezza e l'altezza predefinite vengono dedotte dal browser.
### Che cosa succede se non viene definito l'attributo layout?
Il comportamento del layout viene stabilito come segue:
* Se è presente l'attributo `height`, ma l'attributo `width` non è presente o equivale ad `auto`, viene utilizzato il layout `fixed-height`.
* Se sono presenti gli attributi `width` o `height` insieme all'attributo `sizes`, viene utilizzato il layout `responsive`.
* Se sono presenti gli attributi `width` o `height`, viene utilizzato il layout `fixed`.
* Se gli attributi `width` e `height` non sono presenti, viene utilizzato il layout `container`.
## Utilizzare la regola @media e l'attributo media
Utilizza la regola [`@media`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media) per stabilire l'aspetto e il comportamento del layout della pagina, come faresti per qualsiasi altro sito web.
Quando cambiano le dimensioni o l'orientamento della finestra del browser, le query supporti vengono rivalutate, dopodiché gli elementi vengono nascosti e mostrati in base ai nuovi risultati.
Visita la pagina [Utilizzare query supporti CSS per la reattività](https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries?hl=it) per avere ulteriori informazioni sul controllo del layout applicando query supporti.
Una funzione aggiuntiva per il responsive design disponibile in AMP è l'attributo `media`, che può essere utilizzato in ogni elemento AMP. Funziona in modo simile alle query supporti nel foglio di stile globale, ma incide soltanto sull'elemento specifico in una singola pagina.
Ad esempio, di seguito vengono considerate due immagini con query supporti che si escludono a vicenda.
[sourcecode:html]
<amp-img
media="(min-width: 650px)"
src="wide.jpg"
width=466
height=355
layout="responsive" >
</amp-img>
[/sourcecode]
L'immagine da recuperare e visualizzare viene scelta in base alla larghezza dello schermo.
[sourcecode:html]
<amp-img
media="(max-width: 649px)"
src="narrow.jpg"
width=527
height=193
layout="responsive" >
</amp-img>
[/sourcecode]
## Utilizzare gli attributi srcset e sizes
Utilizza l'attributo `srcset` per stabilire gli asset di un elemento in base alle varie espressioni di supporto.
Utilizzalo in particolare nei tag [`amp-img`](/docs/reference/amp-img.html) per specificare gli asset immagine da utilizzare a seconda delle dimensioni dello schermo.
In questo semplice esempio, `srcset` specifica l'immagine da utilizzare in base alla larghezza dello schermo.
Il descrittore `w` indica al browser la larghezza di ogni immagine nell'elenco:
[sourcecode:html]
<amp-img
src="wide.jpg"
srcset="wide.jpg" 640w,
"narrow.jpg" 320w >
</amp-img>
[/sourcecode]
**Nota.** AMP supporta il descrittore `w` in tutti i browser.
Leggi ulteriori informazioni sulla creazione di immagini reattive utilizzando `srcset`
nella pagina relativa all'[utilizzo delle immagini reattive](http://alistapart.com/article/using-responsive-images-now).
Puoi anche utilizzare l'attributo `sizes` insieme all'attributo `srcset`.
L'attributo `sizes` descrive come calcolare le dimensioni dell'elemento in base all'eventuale espressione di supporto.
In base alle dimensioni calcolate dell'elemento, lo user-agent seleziona l'origine più relativa indicata dall'attributo `srcset`.
Esamina l'esempio seguente:
[sourcecode:html]
<amp-img
src="wide.jpg"
srcset="wide.jpg" 640w,
"narrow.jpg" 320w
sizes="(min-width: 650px) 50vw, 100vw" >
</amp-img>
[/sourcecode]
L'attributo `sizes` definisce la larghezza dell'elemento pari al 50% delle dimensioni dell'area visibile, quando quest'ultima è almeno pari a 650 px.
Ad esempio, se l'area visibile è di 800 px, la larghezza dell'elemento viene impostata su 400 px.
Il browser sceglie poi la risorsa `srcset` in base alle dimensioni di 400 px, supponendo che le proporzioni pixel del dispositivo siano pari a 1; in questo caso, quindi, la risorsa è `narrow.jpg` (320 px).
**Importante.** Se l'attributo sizes viene specificato insieme alla larghezza e all'altezza, il valore predefinito del layout è `responsive`.
Leggi ulteriori informazioni sulle differenze tra gli attributi `sizes` e `srcset` e le query supporti in questo post del blog [Srcset and sizes](https://ericportis.com/posts/2014/srcset-sizes/).
## Includere attributi placeholder e fallback
### placeholder
L'elemento contrassegnato dall'attributo `placeholder` agisce da segnaposto per l'elemento AMP principale.
Se specificato, un elemento `placeholder` deve essere un elemento secondario diretto dell'elemento AMP.
[sourcecode:html]
<amp-anim src="animated.gif" width=466 height=355 layout="responsive" >
<amp-img placeholder src="preview.png" layout="fill"></amp-img>
</amp-anim>
[/sourcecode]
Per impostazione predefinita, il segnaposto dell'elemento AMP viene mostrato all'istante, anche se le risorse dell'elemento AMP non sono state scaricate o inizializzate.
Quando è pronto, l'elemento AMP in genere nasconde il relativo segnaposto e mostra i contenuti.
**Nota.** Il segnaposto non deve necessariamente essere un elemento AMP, ma può essere qualsiasi elemento HTML.
### fallback
Utilizza l'attributo `fallback` per indicare il comportamento di fallback di ogni elemento non supportato dal browser.
Ad esempio, utilizza l'attributo `fallback` per comunicare all'utente che il browser non supporta una determinata funzione:
[sourcecode:html]
<amp-video width=400 height=300 src="https://yourhost.com/videos/myvideo.mp4"
poster="myvideo-poster.jpg" >
<div fallback>
<p>Your browser doesn’t support HTML5 video.</p>
</div>
</amp-video>
[/sourcecode]
Per l'attributo `fallback` è possibile impostare qualsiasi elemento HTML, non soltanto elementi AMP.
Se specificato, l'elemento `fallback` deve essere un elemento secondario diretto dell'elemento AMP.
### noloading
Molti elementi AMP sono autorizzati a mostrare un "indicatore di caricamento", che consiste in un'animazione basilare che indica che l'elemento non è stato ancora caricato completamente.
Puoi disattivare questo comportamento per gli elementi aggiungendo l'attributo `noloading`.
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/responsive_amp/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Unterstützte Layouts
---
Sie können Ihre Elemente responsiv machen, indem Sie `layout` einschließen.
[TOC]
## Unterstützte Werte für layout-Attribut
Verwenden Sie standardmäßig responsive Layouts.
Hier eine vollständige Liste der unterstützten Werte für das layout-Attribut:
<table>
<thead>
<tr>
<th class="col-twenty" data-th="Layout type">Layouttyp</th>
<th class="col-twenty" data-th="Width/height required">Breite/Höhe erforderlich</th>
<th data-th="Behavior">Verhalten</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-twenty" data-th="Layout type"><code>nodisplay</code></td>
<td class="col-twenty" data-th="Description">Nein</td>
<td data-th="Behavior">Das Element wird nicht angezeigt. Dieses Layout kann auf jedes AMP-Element angewendet werden. Die Komponente beansprucht keinen Platz auf dem Bildschirm, d. h., sie verhält sich, als ob ihr Anzeigestil "none" lauten würde. Es wird angenommen, dass sich das Element bei einer Nutzeraktion selbst anzeigen kann. Beispiel: <a href="/docs/reference/extended/amp-lightbox.html"><code>amp-lightbox</code></a></td>
</tr>
<tr>
<td class="col-twenty" data-th="Layout type"><code>fixed</code></td>
<td class="col-twenty" data-th="Description">Ja</td>
<td data-th="Behavior">Das Element hat eine feste Breite und Höhe und kann nicht als responsiv festgelegt werden. Ausgenommen hiervon sind nur die Elemente <a href="/docs/reference/amp-pixel.html"><code>amp-pixel</code></a> und <a href="/docs/reference/extended/amp-audio.html"><code>amp-audio</code></a>.</td>
</tr>
<tr>
<td class="col-twenty" data-th="Layout type"><code>responsive</code></td>
<td class="col-twenty" data-th="Description">Ja</td>
<td data-th="Behavior">Die Breite des Elements wird an die Breite des Containerelements angepasst. Seine Höhe wird automatisch entsprechend dem Seitenverhältnis festgelegt, das sich aus den width- und height-Attributen ergibt. Dieses Layout funktioniert sehr gut mit den meisten AMP-Elementen einschließlich <a href="/docs/reference/amp-img.html"><code>amp-img</code></a> und <a href="/docs/reference/amp-video.html"><code>amp-video</code></a>. Der verfügbare Platz hängt vom übergeordneten Element ab und kann außerdem mittels <code>max-width</code>-CSS angepasst werden.</td>
</tr>
<tr>
<td class="col-twenty" data-th="Layout type"><code>fixed-height</code></td>
<td class="col-twenty" data-th="Description">Nur Höhe</td>
<td data-th="Behavior">Das Element nimmt den verfügbaren Platz ein, aber die Höhe bleibt unverändert. Dieses Layout eignet sich gut für Elemente wie <a href="/docs/reference/extended/amp-carousel.html"><code>amp-carousel</code></a>, bei dem Inhalt horizontal positioniert wird. Das <code>width</code>-Attribut darf nicht vorkommen oder muss auf <code>auto</code> gesetzt sein.</td>
</tr>
<tr>
<td class="col-twenty" data-th="Layout type"><code>fill</code></td>
<td class="col-twenty" data-th="Description">Nein</td>
<td data-th="Behavior">Das Element nimmt den für Breite und Höhe verfügbaren Platz ein. Das Layout eines fill-Elements stimmt also mit dem seines übergeordneten Elements überein.</td>
</tr>
<tr>
<td class="col-twenty" data-th="Layout type"><code>container</code></td>
<td class="col-twenty" data-th="Description">Nein</td>
<td data-th="Behavior">Die Größe der untergeordneten Elemente des Elements kann wie bei einem normalen HTML-<code>div</code>-Element definiert werden. Es wird angenommen, dass die Komponente selbst kein bestimmtes Layout hat, sondern nur als Container fungiert. Seine untergeordneten Elemente werden sofort gerendert.</td>
</tr>
</tbody>
</table>
### Was passiert, wenn Breite und Höhe nicht definiert sind?
In einigen Fällen, in denen `width` oder `height` nicht angegeben sind, kann die AMP-Laufzeit diese Werte standardmäßig wie folgt festlegen:
* [`amp-pixel`](/docs/reference/amp-pixel.html): Breite und Höhe erhalten standardmäßig den Wert 0.
* [`amp-audio`](/docs/reference/extended/amp-audio.html): Die Standardwerte für Breite und Höhe werden vom Browser abgeleitet.
### Was passiert, wenn das layout-Attribut nicht definiert ist?
Das Layoutverhalten wird wie folgt bestimmt:
* Wenn `height` vorhanden ist und `width` fehlt oder auf `auto` gesetzt ist, wird von einem `fixed-height`-Layout ausgegangen.
* Wenn das `width`- oder `height`-Attribut zusammen mit dem `sizes`-Attribut vorkommt, wird ein `responsive`-Layout angenommen.
* Wenn das `width`- oder `height`-Attribut vorhanden ist, wird von einem `fixed`-Layout ausgegangen.
* Wenn `width` und `height` fehlen, wird ein `container`-Layout angenommen.
## Verwendung von @media und media
Mittels [`@media`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media) können Sie wie bei jeder anderen Website festlegen, wie das Seitenformat aussehen und sich verhalten soll.
Wenn sich die Größe oder Ausrichtung des Browserfensters ändert, werden die Medienabfragen neu ausgewertet und die Elemente werden entsprechend den neuen Ergebnissen ausgeblendet oder angezeigt.
Weitere Informationen zur Steuerung des Layouts durch Anwenden von Medienabfragen finden Sie unter [CSS-Medienabfragen für Responsivität verwenden](https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries?hl=de).
Eine zusätzliche Funktion für das in AMP verfügbare Responsive Webdesign ist das `media`-Attribut.
Dieses Attribut kann mit jedem AMP-Element verwendet werden. Es funktioniert ähnlich wie Medienabfragen in Ihrem globalen Stylesheet, wirkt sich aber nur auf einer einzigen Seite auf das konkrete Element aus.
Im folgenden Beispiel haben wir zwei Bilder mit sich gegenseitig ausschließenden Medienabfragen.
[sourcecode:html]
<amp-img
media="(min-width: 650px)"
src="wide.jpg"
width=466
height=355
layout="responsive" >
</amp-img>
[/sourcecode]
In Abhängigkeit von der Bildschirmbreite wird entweder das eine oder das andere Bild abgerufen und gerendert.
[sourcecode:html]
<amp-img
media="(max-width: 649px)"
src="narrow.jpg"
width=527
height=193
layout="responsive" >
</amp-img>
[/sourcecode]
## srcset und sizes verwenden
Mit dem `srcset`-Attribut können Sie die Assets eines Elements basierend auf unterschiedlichen Medienausdrücken steuern.
Verwenden Sie es insbesondere für alle [`amp-img`](/docs/reference/amp-img.html)-Tags, um anzugeben, welche Bild-Assets je nach Bildschirmgröße verwendet werden sollen.
In diesem einfachen Beispiel wird mit `srcset` angegeben, welches Bild je nach Bildschirmbreite verwendet werden soll.
Mit dem `w`-Deskriptor wird dem Browser die Breite der einzelnen Bilder in der Liste mitgeteilt:
[sourcecode:html]
<amp-img
src="wide.jpg"
srcset="wide.jpg" 640w,
"narrow.jpg" 320w >
</amp-img>
[/sourcecode]
**Hinweis:** AMP unterstützt den `w`-Deskriptor in allen Browsern.
Weitere Informationen zum Erstellen responsiver Bilder mittels `srcset` finden Sie unter [Using Responsive Images (Now)](http://alistapart.com/article/using-responsive-images-now).
Sie können auch das `sizes`-Attribut zusammen mit `srcset` verwenden.
Mit dem `sizes`-Attribut wird beschrieben, wie die Elementgröße basierend auf einem Medienausdruck berechnet wird.
Je nach der berechneten Größe des Elements wählt der User-Agent die am besten passende Quelle aus, die vom `srcset`-Attribut bereitgestellt wird.
Betrachten Sie das folgende Beispiel:
[sourcecode:html]
<amp-img
src="wide.jpg"
srcset="wide.jpg" 640w,
"narrow.jpg" 320w
sizes="(min-width: 650px) 50vw, 100vw" >
</amp-img>
[/sourcecode]
Die Breite des Elements wird durch das `sizes`-Attribut als 50 % der Größe des Darstellungsbereichs definiert, wenn dieser 650 px oder mehr beträgt.
Wenn der Darstellungsbereich z. B. 800 px groß ist, wird die Breite des Elements auf 400 px gesetzt.
Der Browser wählt dann die passende `srcset`-Ressource für 400 px aus. Unter der Annahme, dass das Gerätepixelverhältnis 1 beträgt, ist das in diesem Fall `narrow.jpg` (320 px).
**Wichtig:** Wenn das sizes-Attribut zusammen mit Breite und Höhe angegeben wird, wird das Layout standardmäßig auf `responsive` gesetzt.
Weitere Informationen zur Verwendung der Attribute `sizes` und `srcset` bei Medienabfragen finden Sie in diesem Blogpost zu [srcset und sizes](https://ericportis.com/posts/2014/srcset-sizes/).
## Platzhalter und Fallbacks einschließen
### placeholder
Das mit dem `placeholder`-Attribut gekennzeichnete Element fungiert als Platzhalter für das übergeordnete AMP-Element.
Bei Angabe eines `placeholder`-Elements muss dieses dem AMP-Element direkt untergeordnet sein.
[sourcecode:html]
<amp-anim src="animated.gif" width=466 height=355 layout="responsive" >
<amp-img placeholder src="preview.png" layout="fill"></amp-img>
</amp-anim>
[/sourcecode]
Standardmäßig wird der Platzhalter für das AMP-Element sofort angezeigt, auch wenn die Ressourcen des AMP-Elements nicht heruntergeladen oder initialisiert wurden.
Wenn das AMP-Element bereit ist, blendet es in der Regel seinen Platzhalter aus und zeigt den Inhalt an.
**Hinweis:** Der Platzhalter braucht kein AMP-Element zu sein. Jedes HTML-Element kann als Platzhalter fungieren.
### fallback
Mit dem `fallback`-Attribut können Sie das Fallback-Verhalten für jedes Element festlegen, das vom Browser nicht unterstützt wird.
So können Sie z. B. dem Nutzer mithilfe des `fallback`-Attributs mitteilen, dass eine bestimmte Funktion vom Browser nicht unterstützt wird:
[sourcecode:html]
<amp-video width=400 height=300 src="https://yourhost.com/videos/myvideo.mp4"
poster="myvideo-poster.jpg" >
<div fallback>
<p>Your browser doesn’t support HTML5 video.</p>
</div>
</amp-video>
[/sourcecode]
Das `fallback`-Attribut kann für jedes HTML-Element und nicht nur für AMP-Elemente festgelegt werden.
Bei Angabe des `fallback`-Elements muss dieses dem AMP-Element direkt untergeordnet sein.
### noloading
Viele AMP-Elemente wurden auf die weiße Liste für das Einblenden einer "Ladeanzeige" gesetzt. Diese Anzeige ist eine einfache Animation, die darauf hinweist, dass das Element noch nicht vollständig geladen wurde.
Durch Hinzufügen des `noloading`-Attributs kann dieses Verhalten für Elemente deaktiviert werden.
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/analytics_amp/analytics_basics@pt_BR.md:
--------------------------------------------------------------------------------
```markdown
---
$title: Analytics: conceitos básicos
toc: true
---
Comece aqui a aprender os conceitos básicos sobre o AMP Analytics.
[TOC]
## Usar amp-pixel ou amp-analytics?
O AMP oferece dois componentes para atender às suas necessidades de análise e medição:
[amp-pixel](/docs/reference/amp-pixel.html) e
[amp-analytics](/docs/reference/extended/amp-analytics.html).
Ambas as opções enviam dados de análise a um endpoint definido.
Se você estiver buscando comportamentos como um simples
[pixel de rastreamento](https://en.wikipedia.org/wiki/Web_beacon#Implementation),
o componente `amp-pixel` proporciona um rastreamento de visualização de páginas básico;
os dados de visualização de página são enviados para um URL definido.
Algumas integrações com fornecedor podem necessitar esse componente,
em cujo caso eles especificarão o terminal exato do URL.
Para a maioria das soluções de análise, utilize `amp-analytics`.
O rastreamento de visualizações de páginas também funciona em `amp-analytics`.
No entanto, você também pode rastrear o envolvimento do usuário com qualquer tipo de conteúdo de página,
incluindo cliques em links e botões.
Além disso, você pode medir até onde o usuário rolou a página,
se ele se interagiu ou não com mídias sociais e muito mais
(consulte
[Informações detalhadas sobre o AMP Analytics](/docs/guides/analytics/deep_dive_analytics.html)).
Como parte da integração com a plataforma AMP,
provedores ofereceram configurações predefinidas de`amp-analytics`
para que seja mais fácil capturar dados e movê-los para suas ferramentas de rastreamento.
Acesse a documentação para fornecedores da
[especificação do amp-analytics](/docs/reference/extended/amp-analytics.html).
Você pode usar `amp-pixel` e `amp-analytics` em suas páginas:
`amp-pixel` para rastreamento simples de visualizações de páginas
e `amp-analytics` para todo o resto.
Você também pode adicionar várias instâncias de cada tag disponível.
Se estiver trabalhando com vários provedores de análises,
precisará de uma tag por solução.
Tenha em mente que páginas AMP mais simples são melhores para os usuários,
portanto, se não precisar de tags adicionais, não as use.
## Criar uma configuração de análise simples
Saiba como criar uma configuração simples de
[amp-pixel](/docs/reference/amp-pixel.html) e
[amp-analytics](/docs/reference/extended/amp-analytics.html).
### Configuração simples de amp-pixel
Para criar uma configuração simples de `amp-pixel`,
insira algo parecido com o seguinte no corpo de sua página AMP:
[sourcecode:html]
<amp-pixel src="https://foo.com/pixel?RANDOM"></amp-pixel>
[/sourcecode]
Neste exemplo,
os dados de visualização de página são enviados para um URL definido, juntamente com um número aleatório.
A variável `RANDOM` é uma entre muitas
[variáveis de substituição na plataforma AMP](https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md).
Saiba mais sobre
[Substituição de variáveis](/docs/guides/analytics/analytics_basics.html#variable-substitution) aqui.
O componente [amp-pixel](/docs/reference/amp-pixel.html)
é integrado,
de forma que você não precisa de uma declaração de inclusão, como ocorre
com os componentes estendidos do AMP, incluindo `amp-analytics`.
Entretanto, você deve colocar a tag `amp-pixel` o mais perto possível
do começo do seu `<body>`.
O pixel de rastreamento só será acionado quando a própria tag for visualizada.
Se `amp-pixel` estiver posicionado perto da parte inferior da página,
ele pode não ser acionado.
### Configuração simples de amp-analytics
Para criar uma configuração simples de
[amp-analytics](/docs/reference/extended/amp-analytics.html),
você deve primeiro incluir esta declaração `custom-element`
no `<head>` do documento AMP (consulte também
[Declaração de inclusão de componente](/docs/reference/extended.html#component-inclusion-declaration)):
[sourcecode:html]
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
[/sourcecode]
O seguinte exemplo é semelhante ao [exemplo do `amp-pixel`](/docs/guides/analytics/analytics_basics.html#simple-amp-pixel-configuration).
Todas as vezes que uma página está visível,
o evento é acionado e
envia os dados de page view para um URL definido, juntamente com uma ID aleatória:
[sourcecode:html]
<amp-analytics>
<script type="application/json">
{
"requests": {
"pageview": "https://foo.com/pixel?RANDOM",
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
[/sourcecode]
No exemplo acima, definimos que uma solicitação chamada page view seria https://foo.com/pixel?RANDOM. Como discutido antes, RANDOM é substituído por um número aleatório, de forma que a solicitação acabe sendo algo parecido com https://foo.com/pixel?0.23479283687235653498734.
Quando a página se torna visível
(como especificado pelo uso da palavra-chave de acionamento `visible`),
um evento é acionado e a solicitação `pageview` é enviada.
O atributo triggers determina quando a solicitação de page view é acionada.
Saiba mais sobre [solicitações e acionamentos](/docs/guides/analytics/deep_dive_analytics.html#requests-triggers--transports).
## Substituição de variáveis
Tanto o componente [amp-pixel](/docs/reference/amp-pixel.html) quanto
o [amp-analytics](/docs/reference/extended/amp-analytics.html)
permitem todas as substituições de variáveis de URL padrão (consulte
[Substituições de variáveis de AMP HTML](https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md)).
No exemplo a seguir,
a solicitação de visualização de página é enviada ao URL
juntamente com o URL canônico do documento atual, seu título e uma
[ID de cliente](/docs/guides/analytics/analytics_basics.html#user-identification):
[sourcecode:html]
<amp-pixel src="https://example.com/analytics?url=${canonicalUrl}&title=${title}&clientId=${clientId(site-user-id)}"></amp-pixel>
[/sourcecode]
Devido à sua simplicidade,
a tag `amp-pixel` somente pode incluir variáveis definidas pela plataforma
ou que o tempo de execução do AMP possa analisar a partir da página AMP.
No exemplo acima,
a plataforma preenche os valores do
`canonicalURL` e do `clientId(site-user-id)`.
A tag `amp-analytics` pode incluir as mesmas variáveis que `amp-pixel`,
assim como variáveis definidas de forma exclusiva dentro da configuração da tag.
Use o formato `${varName}` em uma string de solicitação para uma variável definida por página
ou plataforma.
A tag `amp-analytics` substituirá o modelo por seu valor real
no momento da construção da solicitação de análise (consulte também
[Variáveis permitidas no amp-analytics](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/analytics-vars.md)).
No seguinte exemplo de `amp-analytics`,
a solicitação de visualização de página é enviada ao URL,
com dados adicionais extraídos de substituições de variáveis,
algumas fornecidas pela plataforma,
algumas definidas em linha,
dentro da configuração de `amp-analytics`:
[sourcecode:html]
<amp-analytics>
<script type="application/json">
{
"requests": {
"pageview":"https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}&clientId=${clientId(site-user-id)}",
},
"vars": {
"account": "ABC123",
},
"triggers": {
"someEvent": {
"on": "visible",
"request": "pageview",
"vars": {
"title": "My homepage",
}
}
}
}
</script>
</amp-analytics>
[/sourcecode]
No exemplo acima,
as variáveis `account` e `title` são definidas
na configuração de `amp-analytics`.
As variáveis `canonicalUrl` e `clientId` não são definidas na configuração,
de forma que seus valores são substituídos pela plataforma.
**Importante:** a substituição de variáveis é flexível;
você pode ter as mesmas variáveis definidas em diferentes locais,
e o tempo de execução do AMP analisará os valores nessa ordem de precedência
(consulte [Ordem da substituição de variáveis](/docs/guides/analytics/deep_dive_analytics.html#variable-substitution-ordering)).
## Identificação do usuário
Websites usam cookies para armazenar informações específicas de um usuário no navegador.
Os cookies podem ser usados para dizer que um usuário já visitou um site antes.
No AMP,
as páginas podem ser fornecidas pelo website de um editor ou um cache
(como o Google AMP Cache).
O website do editor e o cache provavelmente têm domínios distintos.
Por razões de segurança,
os navegadores podem limitar o acesso aos cookies de outros domínios (e geralmente o fazem)
(consulte também
[Rastrear usuários em diferentes origens](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/cross-origin-tracking.md)).
Por padrão, o
AMP administrará a provisão de uma ID de cliente, seja a página acessada pelo website original do editor ou por um cache.
A ID de cliente gerada pelo AMP tem o valor `"amp-"`
seguido de uma string codificada aleatória `base64` e permanece a mesma
para o usuário se ele voltar a visitar a página.
O AMP administra a leitura e gravação da ID de cliente em todos os casos.
Isso é particularmente notável no caso em que uma página é fornecida
através de um cache ou mostrada fora do contexto de visualização
do site original do editor.
Nessa circunstância, o acesso aos cookies do site do editor não está disponível.
Quando uma página AMP é fornecida a partir do site do editor,
a estrutura da ID de cliente que o AMP usa pode ser instruída a buscar e usar
um cookie de fallback.
Nesse caso,
o argumento `cid-scope-cookie-fallback-name` da variável `clientId`
é interpretado como o nome do cookie.
O formato pode aparecer como
`CLIENT_ID(cid-scope-cookie-fallback-name)` ou como
`${clientId(cid-scope-cookie-fallback-name)}`.
Por exemplo:
[sourcecode:html]
<amp-pixel src="https://foo.com/pixel?cid=CLIENT_ID(site-user-id-cookie-fallback-name)"></amp-pixel>
[/sourcecode]
Se o AMP descobrir que o cookie está definido,
a substituição da ID de cliente retornará o valor do cookie.
Se o AMP descobrir que esse cookie não está definido,
ele gerará um valor do formulário `amp-` seguido
de uma string codificada aleatória base64.
Saiba mais sobre a substituição da ID de cliente,
incluindo como adicionar uma ID de notificação de usuário adicional em
[Variáveis permitidas no AMP Analytics](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/analytics-vars.md).
```
--------------------------------------------------------------------------------
/assets/sass/pages/_about-who-vertical.scss:
--------------------------------------------------------------------------------
```scss
body.about-who-vertical {
.about-who-block {
position: relative;
overflow: hidden;
&::before, &::after {
background: $gradient-med-faded;
content: '';
display: none;
height: 2000px;
left: 0;
position: absolute;
width: 100%;
transform: skewY(-36deg);
transform-origin: top left;
}
&::before {
top: -1600px;
}
&::after {
bottom: -2200px;
display: block;
}
.small a {
font-size: 16px;
text-transform: none;
}
}
.container.xl {
position: relative;
z-index: 1;
}
.hero {
position: relative;
padding: 100px 5% 200px 5%;
.hero-images {
position: absolute;
left: 1440px;
top: -20px;
.triangle {
position: absolute;
right: calc((1440px - 100vw)/2);
top: 0;
width: 630px;
}
.phones {
position: absolute;
right: -150px;
top: 70px;
width: 670px;
}
}
.label {
@extend %text-label;
}
.title {
position: relative;
max-width: 700px;
margin-bottom: 50px;
}
.paragraph {
max-width: 600px;
margin-bottom: 70px;
}
.icon {
width: 76px;
}
.example-users {
align-items: center;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
position: relative;
width: 62%;
min-width: 651px;
.example-user-logo {
flex: 0 0 18%;
position: relative;
&.nyt {
flex: 0 0 26%;
}
&.globo {
flex: 0 0 10%;
}
&.wapo {
flex: 0 0 22%;
}
&.wired {
flex: 0 0 14%;
}
&.sharethrough {
flex: 0 0 28%;
top: -14px;
}
&.triplelift {
flex: 0 0 16%;
}
&.teads {
flex: 0 0 10%;
}
&.indexexchange {
top: -8px;
}
&.google {
flex: 0 0 15%;
}
&.doubleclick {
flex: 0 0 18%;
}
&.cloudflare {
flex: 0 0 25%;
top: -8px;
}
}
}
}
.why-use {
padding: 0 5% 165px 5%;
h3 {
text-align: center;
margin-bottom: 45px;
}
.reasons.desktop {
display: flex;
justify-content: space-between;
.reason {
flex: 0 0 27%;
text-align: center;
amp-img {
margin: 20px 0 40px;
max-height: 100px;
}
h4 {
padding-right: 10px;
}
}
}
.reasons.mobile,
.reasons.tablet {
display: none;
}
}
.points {
padding-top: 0;
h3 {
margin: 0 auto 50px;
max-width: 700px;
text-align: center;
}
}
.case-study {
padding: 0 15.4% 115px 15.4%;
h3 {
margin-bottom: 45px;
text-align: center;
}
.desktop .card {
flex: 0 0 calc(50% - 20px);
flex-basis: calc(50% - 20px);
}
amp-carousel {
display: none;
}
}
.large-cta {
.button {
font-size: 14px;
text-transform: uppercase;
}
}
.about-who-block.centered {
&::before {
top: -50px;
}
.hero {
text-align: center;
.hero-images {
bottom: 0;
left: 0;
right: 0;
top: 0;
.lines {
bottom: 10%;
height: 260px;
left: -15%;
position: absolute;
width: 410px;
}
}
amp-img, .title, .paragraph, .example-users {
margin-left: auto;
margin-right: auto;
max-width: 800px;
}
.paragraph {
max-width: 700px;
}
}
.case-study {
position: relative;
.lines {
height: 260px;
position: absolute;
right: -17%;
top: -35%;
width: 410px;
}
}
}
.about-who-block.amp-ads {
.hero {
.title {
max-width: 500px;
}
.hero-images .lines {
bottom: 30%;
z-index: -1;
}
}
}
.about-who-block.publishers {
.hero-images .triangle {
top: -80px;
}
}
.about-who-block.advertisers {
&::after {
display: none;
}
.hero {
padding-left: 60%;
width: 35%
}
.hero-images {
left: auto;
top: 30px;
bottom: 0;
right: 1440px;
z-index: -1;
.triangle {
left: calc((1440px - 100vw)/2);
right: auto;
}
.phones {
left: -230px;
right: auto;
top: -130px;
width: 1100px;
}
.lines {
height: 619px;
left: 170px;
position: absolute;
top: 20px;
width: 640px;
}
}
}
&.rtl {
.about-who-block.publishers .hero {
padding: 100px 45% 200px 5%;
}
}
@include min-max-screen($tablet-portrait-breakpoint, $tablet-breakpoint) {
.tablet-wrapper {
position: relative;
padding: 28px 22px 25px 22px;
background: $color-white;
box-shadow: 0px 3px 20px 0 rgba(0, 0, 0, 0.075);
margin-bottom: 40px;
}
.why-use {
.reasons.tablet {
display: block;
width: 106%;
position: relative;
left: -3%;
.card-container {
padding: 0;
justify-content: center;
}
.card--spacer {
flex: 0 0 46%;
}
.reason {
padding: 20px;
flex: 0 0 46%;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
h4 {
padding-right: 10px;
}
p {
display: inline-block;
max-width: 400px;
text-align: left;
text-align: start;
}
}
}
.reasons.desktop {
display: none;
}
}
&.rtl {
.why-use .reasons.tablet {
left: auto;
right: -3%;
}
}
}
@include max-screen($tablet-breakpoint) {
nav.breadcrumb li,
nav.breadcrumb a {
color: $color-white;
}
.about-who-block {
&::before {
background: $gradient-anglebold;
content: '';
display: block;
height: 600px;
left: 0;
position: absolute;
width: 100%;
top: 0;
transform: skewY(-36deg);
transform-origin: top left;
}
}
.hero {
padding: 68px 0 40px 0;
text-align: center;
.title, .paragraph, .example-users {
margin-left: auto;
margin-right: auto;
max-width: 800px;
}
.icon {
display: none;
}
.label {
color: $color-white;
}
.hero-images {
display: none;
}
}
.why-use, .case-study {
padding: 0 0 50px 0;
}
.case-study {
.card-container {
padding-left: 0;
padding-right: 0;
justify-content: center;
}
.lines {
z-index: -1;
}
}
.reason {
amp-img {
height: 100px;
margin: 10px 0;
min-height: 100px;
}
}
.about-who-block.advertisers {
.hero {
padding-left: 0;
width: auto;
}
}
&.rtl {
.about-who-block.publishers .hero {
padding-right: 5%;
}
}
}
@include max-screen($tablet-portrait-breakpoint) {
.hero {
.title {
color: $color-white;
width: 80%;
margin-bottom: 35px;
}
.paragraph {
position: relative;
padding: 28px 22px 25px 22px;
background: $color-white;
box-shadow: 0px 3px 20px 0 rgba(0, 0, 0, 0.075);
max-width: 400px;
margin-bottom: 40px;
}
}
.points {
margin-bottom: 50px;
h3 {
margin-bottom: 20px;
}
}
.why-use, .case-study {
padding: 0 0 50px 0;
}
.case-study {
.desktop {
display: none;
}
amp-carousel {
display: block;
width: 106%;
position: relative;
left: -3%;
.card-container {
padding: 0;
justify-content: center;
}
.card {
flex: 0 0 94%;
}
}
}
.why-use {
.reasons.mobile {
display: block;
width: 106%;
position: relative;
left: -3%;
.card-container {
padding: 0;
justify-content: center;
}
.reason {
padding: 20px;
flex: 0 0 94%;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
h4 {
padding-right: 10px;
}
p {
display: inline-block;
max-width: 400px;
text-align: left;
text-align: start;
}
}
}
.reasons.desktop {
display: none;
}
}
.hero .example-users {
justify-content: space-around;
min-width: 0;
position: relative;
width: 90%;
.example-user-logo {
margin: 10px 0;
&.nyt {
flex: 0 0 52%;
left: -3%;
}
&.globo {
flex: 0 0 20%;
}
&.wapo {
flex: 0 0 44%;
}
&.wired {
flex: 0 0 28%;
left: 3%;
}
&.sharethrough {
flex: 0 0 56%;
left: -10%;
}
&.triplelift {
flex: 0 0 30%;
left: -10%;
}
&.teads {
flex: 0 0 20%;
}
&.indexexchange {
flex: 0 0 41%;
}
&.google {
flex: 0 0 35%;
}
&.doubleclick {
flex: 0 0 35%;
left: -10%;
}
&.cloudflare {
flex: 0 0 40%;
}
}
}
.about-who-block.centered {
.hero .example-users {
left: 3%;
max-width: 450px;
}
}
&.rtl {
.why-use .reasons.mobile,
.case-study amp-carousel {
left: auto;
right: -3%;
}
}
}
@include max-screen($mobile-medium-breakpoint) {
.reason {
amp-img {
height: 50px;
margin: 10px 0;
min-height: 50px;
}
}
}
}
```
--------------------------------------------------------------------------------
/content/learn/[email protected]:
--------------------------------------------------------------------------------
```yaml
hero:
title@: Zwiększanie wydajności przez AMP
subtitle@: |
Połączenie następujących optymalizacji sprawia, że strony AMP są tak szybkie i sprawiają wrażenie, że ładują się natychmiast:
<p>Jeśli wolisz słuchać niż czytać, w następującym filmie szef zespołu AMP Malte Ubl przedstawia przeglądowe informacje podobne do zamieszczonych w kolejnych akapitach.
points:
pointlist:
- title@: Zezwalaj tylko na skrypty asynchroniczne
description@: |
Język JavaScript ma potężne możliwości,
może zmodyfikować niemal każdy aspekt strony,
ale może także zablokować konstrukcję modelu DOM i opóźnić renderowanie stron
(zobacz też [Dodawanie interaktywności przy użyciu JavaScript](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/adding-interactivity-with-javascript)).
Aby uniemożliwić skryptom JavaScript opóźnianie renderowania stron,
AMP zezwala wyłącznie na asynchroniczne skrypty JavaScript.
<p>Strony AMP nie mogą zawierać żadnego napisanego przez autora skryptu JavaScript.
Zamiast korzystania z języka JavaScript,
interaktywne funkcje stron są obsługiwane w niestandardowych elementach AMP.
Niestandardowe elementy AMP mogą zawierać wewnątrz skrypt JavaScript,
ale zaprojektowano je starannie w taki sposób, aby nie powodowały one pogorszenia wydajności.
<p>Chociaż skrypty JS niezależnych podmiotów są dozwolone w ramkach iframe,
nie mogą one blokować renderowania.
Jeśli na przykład niezależny skrypt JS używa
[fatalnej dla wydajności funkcji API `document.write`](http://www.stevesouders.com/blog/2012/04/10/dont-docwrite-scripts/),
nie blokuje ona renderowania strony głównej.
- title@: Statycznie nadaj rozmiary wszystkim zasobom
description@: |
Zasoby zewnętrzne, takie jak obrazy, reklamy lub ramki iframe muszą informować o swoim rozmiarze w HTML,
dzięki czemu AMP może określić rozmiar i pozycję każdego elementu przed pobraniem zasobów.
AMP ładuje układ strony bez oczekiwania na pobranie jakichkolwiek zasobów.
<p>AMP rozłącza układ dokumentu od układu zasobów.
Tylko jedno żądanie HTTP jest potrzebne do wyrenderowania całego dokumentu
([i czcionek](#font-triggering-must-be-efficient)).
Ponieważ AMP zoptymalizowano w celu uniknięcia kosztownego przeliczania stylów i układów w przeglądarce,
po załadowaniu zasobu nie ma żadnego ponownego rozmieszczania.
- title@: Nie pozwól, aby mechanizmy rozszerzeń blokowały renderowanie
description@: |
AMP nie pozwala, aby mechanizmy rozszerzeń blokowały renderowanie stron.
AMP obsługuje rozszerzenia dla takich obiektów jak
[ramki lightbox](/docs/reference/extended/amp-lightbox.html),
[umieszczone elementy z Instagrama](/docs/reference/extended/amp-instagram.html),
[tweety](/docs/reference/extended/amp-twitter.html) itp.
Chociaż wymagają one dodatkowych żądań HTTP,
te żądania nie blokują układu strony ani renderowania.
<p>Każda strona korzystająca z niestandardowego skryptu musi poinformować system AMP,
że może ona mieć niestandardowy znacznik.
Na przykład skrypt [`amp-iframe`](/docs/reference/extended/amp-iframe.html)
informuje system, że w dokumencie wystąpi znacznik `amp-iframe`.
AMP tworzy ramkę iframe zanim otrzyma informacje, co się w niej znajdzie:
example: /content/includes/amp-iframe.md
- title@: Usuń wszystkie niezależne skrypty JavaScript ze ścieżki krytycznej
description@: |
Niezależne skrypty JS lubią korzystać z synchronicznego ładowania JS.
Lubią one także korzystać z funkcji `document.write` w celu tworzenia dodatkowych skryptów synchronicznych.
Jeśli na stronie jest na przykład pięć reklam i każda z nich wykonuje trzy synchroniczne operacje wczytywania
z czasem oczekiwania łącza wynoszącym 1 sekundę,
czas ładowania samych tylko skryptów JS wynosi 15 sekund.
<p>Strony AMP umożliwiają korzystanie z niezależnych skryptów JavaScript, ale tylko w izolowanych ramkach iframe.
Wyrzucenie tych skryptów do ramek iframe pozwala wyeliminować blokowanie wykonywania strony głównej.
Nawet jeśli wyzwalają one liczne przeliczenia stylów,
ich niewielkie ramki iframe mają bardzo mały model DOM.
<p>Przeliczenia stylów i układów odpowiadają rozmiarowi modelu DOM,
dlatego przeliczenia ramek iframe są bardzo szybkie w porównaniu
z przeliczaniem stylów i układów na stronie.
- title@: Cały CSS musi być wstawiany i powiązany z rozmiarem
description@: |
CSS blokuje cały rendering, blokuje ładowanie strony i ma tendencję do rozrastania się.
Na stronach AMP HTML dozwolone są tylko style wstawiane.
Pozwala to usnąć jedno, a często wiele żądań HTTP z krytycznej ścieżki renderowania
w porównaniu z większością stron internetowych.
<p>Ponadto wstawiany arkusz stylów ma rozmiar maksymalny 50 kilobajtów.
Chociaż taki rozmiar pozwala na tworzenie bardzo wyrafinowanych stron,
wymaga on również od autora zachowania zasad „higieny CSS”.
- title@: Wyzwalanie czcionek musi być efektywne
id: font-triggering-must-be-efficient
description@: |
Czcionki internetowe są bardzo duże, dlatego
[optymalizacja czcionek internetowych](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization)
ma kluczowe znaczenie dla wydajności.
Na typowej stronie z kilkoma skryptami synchronicznymi i kilkoma zewnętrznymi arkuszami stylów,
przeglądarka czeka i czeka na rozpoczęcie pobierania tych olbrzymich czcionek, aż to wszystko się wydarzy.
<p>System AMP deklaruje zero żądań HTTP, dopóki nie rozpocznie się pobieranie czcionek.
Jest to możliwe tylko dlatego, że cały kod JS w AMP ma atrybut async
i dozwolone są tylko style wstawiane;
nie ma żądań HTTP blokujących pobieranie czcionek przez przeglądarkę.
- title@: Minimalizuj przeliczanie stylów
description@: |
Podczas każdego pomiaru wyzwalane jest przeliczanie stylów, które jest kosztowne,
ponieważ przeglądarka musi rozmieścić całą stronę.
Na stronach AMP wszystkie odczyty DOM wydarzają się przed wszystkimi zapisami.
Dzięki temu na każdą ramkę przypada maksymalnie jedno przeliczenie stylów.
<p>Dowiedz się więcej o wpływie przeliczeń stylów i układów na
[wydajność renderowania](https://developers.google.com/web/fundamentals/performance/rendering/).
- title@: Uruchamiaj tylko animacje z akceleracją sprzętową GPU
description@: |
Jedyną metodą przyspieszenia animacji jest uruchamianie ich na procesorze graficznym (GPU).
Procesor GPU ma informacje o warstwach, obsługuje wykonywanie operacji na tych warstwach,
może je przenosić, może je wygaszać, ale nie może zaktualizować układu strony;
przekaże to zadanie do przeglądarki, a to nie jest pożądane.
<p>Reguły dla arkuszy stylów CSS powiązanych z animacjami zapewniają możliwość przyspieszania animacji przez procesor GPU.
W szczególności tylko AMP zezwala na animację i przejście dla transformacji i przezroczystości
, dzięki czemu ponowne rozmieszczenie strony nie jest wymagane.
Dowiedz się więcej o
[używaniu transformacji i przezroczystości dla zmian animacji](https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count).
- title@: Ustal priorytety ładowania zasobów
description@: |
AMP steruje pobieraniem wszystkich zasobów i ustala priorytety ładowania zasobów,
ładując tylko to, co potrzebne i pobierając z wyprzedzeniem zasoby ładowane z opóźnieniem.
<p>Kiedy AMP pobiera zasoby, optymalizuje operacje pobierania
w taki sposób, aby najważniejsze zasoby były pobierane jako pierwsze.
Obrazy i reklamy są pobierane tylko wtedy, kiedy jest prawdopodobne, że zostaną zobaczone przez użytkownika,
w części strony widocznej na ekranie lub jeśli jest prawdopodobne, że użytkownik szybko przewinie do nich.
<p>AMP pobiera także z wyprzedzeniem zasoby ładowane z opóźnieniem.
Zasoby są ładowane tak późno, jak to możliwe, ale pobierane z wyprzedzeniem tak wcześnie, jak to możliwe.
Dzięki temu strony ładują się bardzo szybko, ale procesor jest używany tylko wtedy,
gdy zasoby są rzeczywiście wyświetlane dla użytkowników.
- title@: Ładuj strony w mgnieniu oka
description@: |
Nowa [funkcja API preconnect](http://www.w3.org/TR/resource-hints/#dfn-preconnect)
jest intensywnie używana w celu zapewnienia maksymalnej możliwej szybkości żądań HTTP w momencie ich wysyłania.
Dzięki temu
strona może zostać wyrenderowana zanim jeszcze użytkownik jawnie zadeklaruje chęć przejścia do niej;
strona może być już dostępna, kiedy użytkownik rzeczywiście wybierze ją,
dzięki czemu ładowanie nastąpi błyskawicznie.
<p>Chociaż renderowanie z wyprzedzeniem można zastosować do wszystkich treści internetowych,
może ono w znacznym stopniu wykorzystać przepustowość i czas procesora. AMP zoptymalizowano z myślą o ograniczeniu tych dwóch czynników. W ramach renderowania z wyprzedzeniem pobierane są tylko zasoby w części strony widocznej na ekranie
i nie obejmuje ono elementów, których wyrenderowanie byłoby kosztowne w aspekcie wykorzystania procesora.
<p>Kiedy dokumenty AMP są renderowane z wyprzedzeniem w celu błyskawicznego ładowania,
faktycznie pobierane są tylko zasoby w części strony widocznej na ekranie.
Podczas renderowania z wyprzedzeniem dokumentów AMP w celu błyskawicznego ładowania
nie są pobierane zasoby, które mogłyby znacząco obciążyć procesor (jak np. ramki iframe niezależnych dostawców).
<p>Dowiedz się więcej,
[dlaczego AMP HTML nie wykorzystuje w pełni skanera wczytywania z wyprzedzeniem](https://medium.com/@cramforce/why-amp-html-does-not-take-full-advantage-of-the-preload-scanner-7e7f788aa94e).
- title@: Pomóż przyspieszyć AMP
description@: |
AMP to projekt Open Source.
Potrzebujemy Twojej pomocy, aby jeszcze bardziej przyspieszyć AMP.
Dowiedz się, [jak dodać własne materiały](/docs/support/contribute.html).
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/analytics_amp/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Analytics: aspectos básicos
toc: true
---
Comienza aquí para informarte acerca de los aspectos básicos del análisis de AMP.
[TOC]
## ¿amp-pixel o amp-analytics?
AMP proporciona dos componentes para satisfacer tus necesidades en términos de análisis y medición:
[amp-pixel](/docs/reference/amp-pixel.html) y
[amp-analytics](/docs/reference/extended/amp-analytics.html).
Ambas opciones envían datos del análisis a un terminal definido.
Si buscas un comportamiento, como un simple
[píxel de seguimiento](https://en.wikipedia.org/wiki/Web_beacon#Implementation),
el componente `amp-pixel` proporciona seguimiento básico de las vistas de la página y
los datos de vista de la página se envían a una dirección URL definida.
Algunas integraciones con un proveedor pueden llamar a este componente,
en cuyo caso especificarán el terminal de URL exacto.
Para la mayoría de las soluciones de análisis, usa `amp-analytics`.
El seguimiento de vistas de páginas también funciona en `amp-analytics`.
Sin embargo, también puedes realizar un seguimiento de la captación de usuarios con cualquier tipo de contenido de la página,
incluidos los clics en vínculos y botones.
A su vez, puedes obtener una medición del punto hasta el cual el usuario navegó en la página y
si usó o no redes sociales, entre otras alternativas
(consulta
[Análisis profundo de AMP Analytics](/docs/guides/analytics/deep_dive_analytics.html)).
Como parte de la integración con la plataforma de AMP,
los proveedores han ofrecido configuraciones de `amp-analytics` predefinidas
a fin de que resulte fácil capturar datos y enviarlos a sus herramientas de seguimiento.
Accede a documentación del proveedor desde la
[especificación de amp-analytics](/docs/reference/extended/amp-analytics.html).
En tus páginas puedes usar `amp-pixel` y `amp-analytics`:
`amp-pixel` para un seguimiento de vistas de página simple
y`amp-analytics` para todo lo demás.
También puedes agregar múltiplos de cada etiqueta.
Si trabajas con varios proveedores de herramientas de análisis,
necesitarás una etiqueta por solución.
Recuerda que las páginas AMP más simples son mejores para los usuarios.
Por lo tanto, si no necesitas etiquetas adicionales no las uses.
## Crea una configuración de análisis simple
Aprende a crear una configuración simple para
[amp-pixel](/docs/reference/amp-pixel.html) y
[amp-analytics](/docs/reference/extended/amp-analytics.html).
### Configuración simple de amp-pixel
Para crear una configuración simple de `amp-pixel`,
inserta algo como lo siguiente en el cuerpo de tu página AMP:
[sourcecode:html]
<amp-pixel src="https://foo.com/pixel?RANDOM"></amp-pixel>
[/sourcecode]
En este ejemplo,
los datos de las vistas de página se envían a la dirección URL definida junto con un número aleatorio.
La variable `RANDOM` es una de muchas
[variables de sustitución en la plataforma AMP](https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md).
Obtén más información sobre la
[Sustitución de variables](/docs/guides/analytics/analytics_basics.html#variable-substitution) aquí.
El componente [amp-pixel](/docs/reference/amp-pixel.html)
está integrado,
por lo que no necesitas una declaración de inclusión como la que se requiere
para los componentes ampliados de AMP, incluido `amp-analytics`.
Sin embargo, debes colocar la etiqueta `amp-pixel` tan cerca como sea posible
del inicio de tu `<body>`.
El píxel de seguimiento solo se activará cuando aparezca la etiqueta.
Si `amp-pixel` se posiciona cerca de la parte inferior de la página,
es posible que no se active.
### Configuración simple de amp-analytics
Si deseas crear una configuración simple para
[amp-analytics](/docs/reference/extended/amp-analytics.html),
primero debes incluir esta declaración de `custom-element`
en el `<head>` del documento de AMP (consulta también la sección de
[declaración de inclusión de componentes](/docs/reference/extended.html#component-inclusion-declaration)):
[sourcecode:html]
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
[/sourcecode]
El siguiente ejemplo es similar al [ejemplo de `amp-pixel`](/docs/guides/analytics/analytics_basics.html#simple-amp-pixel-configuration).
Cada vez que una página es visible,
el evento desencadenante se activa y
envía los datos de vista de página a una dirección URL definida junto con un Id. aleatorio:
[sourcecode:html]
<amp-analytics>
<script type="application/json">
{
"requests": {
"pageview": "https://foo.com/pixel?RANDOM",
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
[/sourcecode]
En el ejemplo anterior, definimos una solicitud llamada “pageview” para que sea https://foo.com/pixel?RANDOM. Como se indicó antes, RANDOM se reemplaza por un número aleatorio, de modo que el aspecto final de la solicitud será el siguiente: https://foo.com/pixel?0.23479283687235653498734.
Cuando la página es visible
(según se especifique con la palabra clave de activación `visible`),
se activa un evento y se envía la solicitud de `pageview`.
El atributo triggers determina cuándo se debe activar la solicitud de vistas de página.
Obtén más información acerca de los atributos [requests y triggers](/docs/guides/analytics/deep_dive_analytics.html#requests-triggers--transports).
## Sustitución de variables
Los componentes [amp-pixel](/docs/reference/amp-pixel.html) y
[amp-analytics](/docs/reference/extended/amp-analytics.html)
permiten todas las sustituciones de variables de URL estándares (consulta
[Sustitución de variables de AMP HTML](https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md)).
En el ejemplo siguiente,
se envía la solicitud de vistas de página a la URL
junto con la URL canónica del documento de AMP actual, su título y un
[Id. de cliente](/docs/guides/analytics/analytics_basics.html#user-identification):
[sourcecode:html]
<amp-pixel src="https://example.com/analytics?url=${canonicalUrl}&title=${title}&clientId=${clientId(site-user-id)}"></amp-pixel>
[/sourcecode]
Debido a su simpleza,
la etiqueta `amp-pixel` solo puede incluir variables definidas por la plataforma
o que el tiempo de ejecución de AMP pueda analizar desde la página AMP.
En el ejemplo anterior,
la plataforma completa los valores para
`canonicalURL` y `clientId(site-user-id)`.
La etiqueta `amp-analytics` puede incluir las mismas variables que`amp-pixel`,
o bien variables exclusivas dentro de la configuración de la etiqueta.
Usa el formato `${varName}` en una cadena de solicitud de una página
o una variable definida por la plataforma.
La etiqueta `amp-analytics` reemplazará la plantilla por su valor real
al crearse la solicitud de análisis (consulta también
[Variables admitidas en amp-analytics](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/analytics-vars.md)).
En el siguiente ejemplo de `amp-analytics`,
la solicitud de vistas de página se envía a la URL
con datos adicionales extraídos de las sustituciones de variables,
algunos proporcionados por la plataforma y
otros definidos en línea,
dentro de la configuración de `amp-analytics`:
[sourcecode:html]
<amp-analytics>
<script type="application/json">
{
"requests": {
"pageview":"https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}&clientId=${clientId(site-user-id)}",
},
"vars": {
"account": "ABC123",
},
"triggers": {
"someEvent": {
"on": "visible",
"request": "pageview",
"vars": {
"title": "My homepage",
}
}
}
}
</script>
</amp-analytics>
[/sourcecode]
En el ejemplo anterior,
las variables `account` y `title` se definen
en la configuración de `amp-analytics`.
Las variables `canonicalUrl` y `clientId` no se definen en la configuración,
por lo cual la plataforma reemplaza sus valores.
**Importante:** La sustitución de variables es flexible.
Puedes definir las mismas variables en diferentes ubicaciones,
y el tiempo de ejecución de AMP analizará los valores en ese orden de precedencia
(consulta [Orden de sustitución de variables](/docs/guides/analytics/deep_dive_analytics.html#variable-substitution-ordering)).
## Identificación de usuarios
Los sitios web usan cookies para almacenar en el navegador información específica de un usuario.
Las cookies se pueden usar para indicar que un usuario visitó un sitio con anterioridad.
En AMP,
las páginas pueden provenir del sitio web de un editor o de un caché
(como el Google AMP Cache).
El sitio web del editor y el caché posiblemente tengan dominios diferentes.
Por motivos de seguridad,
los navegadores pueden limitar el acceso a las cookies de otro dominio
y a menudo lo harán (consulta también
[Seguimiento de usuarios en diferentes orígenes](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/cross-origin-tracking.md)).
De forma predeterminada,
AMP administrará el suministro de un Id. de cliente, ya sea para acceder a la página desde el sitio web original de un editor o a través de un caché.
El Id. de cliente generado por AMP tiene un valor `"amp-"`
seguido por una cadena `base64` codificada y se mantiene igual
para el usuario si vuelve a visitar la página.
AMP administra la lectura y escritura del Id. de cliente en todos los casos.
Esto es particularmente evidente cuando se accede a una página
a través de un caché o se la muestra fuera del contexto de visualización
del sitio original del editor.
En esa circunstancia, no es posible acceder a las cookies del sitio del editor.
Cuando se accede a una página AMP desde el sitio de un editor,
es posible notificar al framework del Id. de cliente que usa AMP sobre una cookie de reserva
que se puede buscar y usar.
En este caso,
el argumento `cid-scope-cookie-fallback-name` de la variable `clientId`
se interpreta como un nombre de cookie.
El formato puede ser de
`CLIENT_ID(cid-scope-cookie-fallback-name)` o
`${clientId(cid-scope-cookie-fallback-name)}`.
Por ejemplo:
[sourcecode:html]
<amp-pixel src="https://foo.com/pixel?cid=CLIENT_ID(site-user-id-cookie-fallback-name)"></amp-pixel>
[/sourcecode]
Si AMP detecta que esa cookie está definida,
la sustitución de Id. de cliente devolverá el valor de esta.
Si AMP detecta que la cookie no está definida,
AMP generará un valor con la forma `amp-` seguido
por una cadena base64 aleatoria codificada.
Obtén más información acerca de la sustitución de Id. de cliente,
incluida la manera de agregar un Id. de notificación de usuario opcional, en
[Variables admitidas en AMP Analytics](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/analytics-vars.md).
```
--------------------------------------------------------------------------------
/content/learn/[email protected]:
--------------------------------------------------------------------------------
```yaml
hero:
title@: Cómo AMP acelera el rendimiento
subtitle@: |
La combinación de las siguientes optimizaciones hace que las páginas AMP se carguen de manera casi instantánea:
<p>Si prefieres escuchar antes que leer, en el siguiente video realizado por Malte Ubl, responsable de ingeniería de AMP, se ofrece información general similar a la que encontrarás en los párrafos que aparecen a continuación.
points:
pointlist:
- title@: Se permiten únicamente scripts asíncronos
description@: |
JavaScript es poderoso:
puede modificar casi todos los aspectos de la página,
pero también puede bloquear la construcción del DOM y demorar la representación de la página
(consulta también [Añadir interactividad con JavaScript](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/adding-interactivity-with-javascript)).
Para evitar que JavaScript demore la representación de páginas,
AMP solo permite JavaScript asíncrono.
<p>Las páginas AMP no pueden incluir JavaScript de autor.
En lugar de JavaScript,
para el control de las funciones de las páginas interactivas se emplean elementos de AMP personalizados.
Es posible que los elementos de AMP personalizados tengan ocultos rasgos de JavaScript,
pero están diseñados cuidadosamente para no tener efectos negativos en el rendimiento.
<p>Si bien se permite contenido JS de terceros en iframes,
este no puede bloquear la representación.
Por ejemplo, si en el contenido JS de terceros se usa la
[API `document.write`, totalmente contraproducente para el rendimiento](http://www.stevesouders.com/blog/2012/04/10/dont-docwrite-scripts/),
no se bloqueará la representación de la página principal.
- title@: Se ordenan estáticamente los recursos
description@: |
Los recursos externos, como las imágenes, los anuncios o los iframes, deben establecer su tamaño en HTML
para que las páginas AMP puedan determinar el tamaño y la posición de cada elemento antes de que se descarguen los recursos.
El sistema AMP carga el diseño de una página sin esperar que se descarguen recursos.
<p>Las páginas AMP desacoplan el diseño del documento del diseño del recurso.
Solo se necesita una solicitud HTTP para diseñar por completo el documento completo
([y las fuentes](#font-triggering-must-be-efficient)).
Dado que las páginas AMP están optimizadas para evitar recálculos de estilo y diseños pesados en el navegador,
no se llevará a cabo ninguna instancia de rediseño cuando se carguen los recursos.
- title@: No se permite que los mecanismos de extensión bloqueen la representación
description@: |
El sistema AMP no permite que los mecanismos de extensión bloqueen la representación de páginas.
Admite extensiones para recursos como
[lightbox](/docs/reference/extended/amp-lightbox.html),
[inserciones de Instagram](/docs/reference/extended/amp-instagram.html),
[tuits](/docs/reference/extended/amp-twitter.html), etc.
Si bien estos recursos necesitan de solicitudes HTTP adicionales,
estas no bloquean el diseño ni la representación de páginas.
<p>Todas las páginas en las que se use un script personalizado deben indicarle al sistema AMP
que eventualmente tendrá una etiqueta personalizada.
Por ejemplo, el script [`amp-iframe`](/docs/reference/extended/amp-iframe.html)
le indica que habrá una etiqueta `amp-iframe`.
Las páginas AMP crean el cuadro de iframe antes de determinar lo que incluirá:
example: /content/includes/amp-iframe.md
- title@: Se mantiene el contenido JavaScript de terceros lejos de la ruta de acceso crítica
description@: |
En el contenido JS de terceros generalmente se aplica carga de JS sincrónica y
también se implementa `document.write` en más scripts de sincronización.
Por ejemplo, si tienes cinco anuncios y cada uno de ellos tiene tres cargas sincrónicas
con una conexión de latencia de 1 segundo,
tendrás 15 segundos de carga solo para el contenido JS.
<p>Las páginas AMP permiten JavaScript de terceros, pero solo en iframes de espacio aislado.
Si se restringen a los iframes, no pueden bloquear la ejecución de la página principal.
Incluso si activan varios recálculos de estilo,
sus minúsculos iframes tienen muy poco del DOM.
<p>Los recálculos de estilo y los diseños son típicos del tamaño del DOM.
Por lo tanto, los recálculos de iframe son muy rápidos en comparación
con el recálculo de estilos y el diseño para la página.
- title@: Los elementos de CSS deben estar alineados y su tamaño debe estar limitado
description@: |
Los elementos de CSS bloquean toda representación y la carga de páginas, y su tamaño tiende a aumentar.
En páginas HTML de AMP, solo se permiten los estilos en línea.
Esto elimina una o, a menudo, más solicitudes HTTP de la ruta de acceso de representación crítica
en comparación con la mayoría de páginas web.
<p>Además, la hoja de estilo en línea tiene un tamaño máximo de 50 kilobytes.
Si bien este tamaño es suficiente para páginas muy sofisticadas,
es necesario que el autor de la página realice un mantenimiento de CSS adecuado.
- title@: La activación de fuentes debe ser eficaz
id: font-triggering-must-be-efficient
description@: |
Las fuentes web son muy grandes. Por lo tanto, la
[optimización de fuentes web](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization)
es crucial para el rendimiento.
En una página típica que tiene algunos scripts sincrónicos y algunas hojas de estilo externas,
el navegador aguarda para comenzar a descargar estas fuentes enormes hasta que todo esto suceda.
<p>El sistema de AMP declara cero solicitudes HTTP hasta que las fuentes comienzan a descargarse.
Esto solo es posible porque todo el contenido JS en AMP tiene el atributo asíncrono
y porque solo se permiten hojas de estilo en línea;
no hay solicitudes HTTP que impidan que el navegador descargue las fuentes.
- title@: Se minimizan los recálculos de estilo
description@: |
Siempre que se mide algo se activan recálculos de estilo que resultan pesados,
ya que el navegador debe diseñar la página completa.
En páginas AMP, todas las lecturas del DOM tienen lugar antes que las escrituras.
Esto garantiza el valor máximo de un recálculo de estilos por cuadro.
<p>Puedes obtener más información sobre el impacto de los recálculos de estilo y diseño en
[Rendimiento de la representación](https://developers.google.com/web/fundamentals/performance/rendering/).
- title@: Solo se ejecutan animaciones con aceleración por GPU
description@: |
La única forma de lograr optimizaciones rápidas es ejecutarlas en la GPU.
La GPU reconoce capas, identifica los procedimientos para llevar a cabo tareas en estos diseños
y puede moverlos y atenuarlos, pero no puede actualizar el diseño de la página.
Deriva la tarea al navegador, y eso no es conveniente.
<p>Las reglas para CSS relacionado con la animación garantizan que la GPU pueda acelerar las animaciones.
Específicamente, el sistema de AMP solo permite realizar animaciones y transiciones en transformación y opacidad
para que no se necesite el diseño de la página.
Obtén más información sobre el
[Uso de los cambios en las propiedades transform y opacity para las animaciones](https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count).
- title@: Se prioriza la carga de recursos
description@: |
El sistema de AMP controla todas las descargas de recursos. Prioriza la carga de recursos,
ya que carga solo lo que es necesario y realiza capturas previas de recursos de carga diferida.
<p>Cuando descarga recursos, optimiza las descargas
para que se descarguen primero los recursos actuales más importantes.
Las imágenes y los anuncios solo se descargan si es probable que el usuario los vea,
en la parte superior de la página, o se desplace rápidamente hacia ellos.
<p>El sistema de AMP también realiza capturas previas de recursos de carga diferida.
Los recursos se cargan lo más tarde posible, pero su captura previa se produce lo más pronto posible.
De esa manera, los objetos se cargan muy rápido, pero el CPU solo se usa
cuando se muestran los recursos ante el usuario.
- title@: Las páginas se cargan al instante
description@: |
La nueva [API de preconexión](http://www.w3.org/TR/resource-hints/#dfn-preconnect)
se usa mucho para garantizar que las solicitudes HTTP sean lo más rápidas posible cuando se crean.
De esta forma,
una página se puede representar antes de que el usuario especifique explícitamente que quiere dirigirse hacia ella.
La página puede estar disponible cuando el usuario la seleccione,
lo cual hará que se cargue al instante.
<p>Si bien la representación previa puede aplicarse a todo el contenido web,
también es posible que ocupe muchos recursos de ancho de banda y CPU. El sistema de AMP está optimizado para propiciar una reducción en ambos factores. Para la representación previa solo se descargan los recursos que están en la parte superior de la página
y no se representan los objetos que puedan ser pesados en términos de uso de CPU.
<p>Cuando los documentos de AMP se representan previamente para la carga instantánea,
solo se descargan los recursos que están en la parte superior de la página.
A su vez, aquellos recursos que bajo las mismas circunstancias pudieran
implicar una alta exigencia para el CPU (como iframes de terceros) no se descargarán.
<p>Obtén más información sobre la
[razón por la cual AMP HTML no aprovecha en su totalidad el escáner de precarga](https://medium.com/@cramforce/why-amp-html-does-not-take-full-advantage-of-the-preload-scanner-7e7f788aa94e).
- title@: Se agiliza el sistema de AMP
description@: |
El sistema de AMP es de código abierto.
Necesitamos tu ayuda para que sea aún más rápido.
Entérate de [cómo contribuir](/docs/support/contribute.html).
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/analytics_amp/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Analityka: podstawy
toc: true
---
Zacznij tutaj, aby poznać podstawy analityki AMP.
[TOC]
## Używać elementów amp-pixel czy amp-analytics?
AMP udostępnia dwa komponenty spełniające potrzeby w zakresie analityki i pomiarów:
[amp-pixel](/docs/reference/amp-pixel.html) i
[amp-analytics](/docs/reference/extended/amp-analytics.html).
Oba elementy wysyłają dane analityczne do zdefiniowanego punktu końcowego.
Jeśli oczekujesz zachowania takiego jak w przypadku prostego
[piksela śledzącego](https://en.wikipedia.org/wiki/Web_beacon#Implementation),
komponent `amp-pixel` umożliwia podstawowe monitorowanie wyświetleń strony;
dane o wyświetleniach strony są wysyłane na zdefiniowany adres URL.
W niektórych integracjach z dostawcą ten komponent może być wywoływany,
wówczas zostaje określony dokładny punkt końcowy adresu URL.
Na potrzeby większości rozwiązań analitycznych należy używać elementu `amp-analytics`.
Także w komponencie `amp-analytics` działa monitorowanie wyświetleń stron.
Można jednak dodatkowo monitorować czynności użytkowników dla dowolnego typu treści na stronie,
w tym kliknięcia linków i przycisków.
Można również zmierzyć, jak daleko użytkownik przewinął stronę,
czy użytkownik korzystał z mediów społecznościowych i nie tylko
(zobacz
[Więcej o analityce AMP](/docs/guides/analytics/deep_dive_analytics.html)).
W ramach integracji z platformą AMP
dostawcy oferują wstępnie zdefiniowane konfiguracje `amp-analytics`,
co ułatwia przechwytywanie danych i przekazywanie ich do narzędzi monitorowania.
Dokumentacja dla dostawców jest dostępna w
[specyfikacji elementu amp-analytics](/docs/reference/extended/amp-analytics.html).
Na swoich stronach można używać zarówno elementu `amp-pixel`, jak i `amp-analytics`:
`amp-pixel` do prostego śledzenia wyświetleń strony,
a `amp-analytics` do wszystkiego innego.
Każdy znacznik można dodawać wiele razy.
W przypadku korzystania z wielu dostawców usług analitycznych
potrzebny będzie jeden znacznik dla każdego rozwiązania.
Warto pamiętać, że prostsze strony AMP są lepsze dla użytkowników,
dlatego jeśli dodatkowe znaczniki nie są potrzebne, nie należy ich używać.
## Tworzenie prostej konfiguracji analitycznej
Dowiedz się, jak utworzyć prostą konfigurację z elementami
[amp-pixel](/docs/reference/amp-pixel.html) i
[amp-analytics](/docs/reference/extended/amp-analytics.html).
### Prosta konfiguracja z elementem amp-pixel
W celu utworzenia prostej konfiguracji z elementem `amp-pixel`
wstaw wiersz podobny do poniższego w treści swojej strony AMP:
[sourcecode:html]
<amp-pixel src="https://foo.com/pixel?RANDOM"></amp-pixel>
[/sourcecode]
W tym przykładzie
dane o wyświetleniu strony są przesyłane na zdefiniowany adres URL wraz z losową liczbą.
Zmienna `RANDOM` to jedna z wielu
[zmiennych podstawiania na platformie AMP](https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md).
Więcej informacji o podstawianiu zmiennych można znaleźć
[tutaj](/docs/guides/analytics/analytics_basics.html#variable-substitution).
Komponent [amp-pixel](/docs/reference/amp-pixel.html)
jest wbudowany,
dlatego nie jest potrzebna deklaracja włączenia jak w przypadku
komponentów rozszerzonych AMP, w tym `amp-analytics`.
Jednak znacznik `amp-pixel` należy umieścić możliwie blisko
początku sekcji `<body>`.
Piksel monitorowania zostanie wyzwolony tylko wtedy, gdy sam znacznik zostanie wyświetlony.
Jeśli znacznik `amp-pixel` zostanie umieszczony u dołu strony,
może nie zostać wyzwolony.
### Prosta konfiguracja z elementem amp-analytics
Aby utworzyć prostą konfigurację z elementem
[amp-analytics](/docs/reference/extended/amp-analytics.html),
należy najpierw włączyć deklarację `custom-element`
w sekcji `<head>` dokumentu AMP (zobacz też
[Deklaracja włączenia komponentu](/docs/reference/extended.html#component-inclusion-declaration)):
[sourcecode:html]
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
[/sourcecode]
Poniższy przykład jest podobny do [przykładu z elementem `amp-pixel`](/docs/guides/analytics/analytics_basics.html#simple-amp-pixel-configuration).
Podczas każdego wyświetlenia strony
uruchamiane jest zdarzenie wyzwalacza, które
wysyła dane o wyświetleniu strony na zdefiniowany adres URL wraz z losowym identyfikatorem:
[sourcecode:html]
<amp-analytics>
<script type="application/json">
{
"requests": {
"pageview": "https://foo.com/pixel?RANDOM",
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
[/sourcecode]
W przykładzie powyżej zostało zdefiniowane żądanie o nazwie pageview jako https://foo.com/pixel?RANDOM. Jak wspomniano wcześniej za zmienną RANDOM jest podstawiana losowa liczba, więc ostatecznie żądanie będzie wyglądać następująco https://foo.com/pixel?0.23479283687235653498734.
Kiedy strona stanie się widoczna
(zgodnie z użytym słowem kluczowym wyzwalacza `visible`),
zdarzenie zostanie wyzwolone i żądanie `pageview` zostanie wysłane.
Atrybut triggers określa moment wyzwolenia żądania pageview.
Dowiedz się więcej o [żądaniach i wyzwalaczach](/docs/guides/analytics/deep_dive_analytics.html#requests-triggers--transports).
## Podstawianie zmiennych
Zarówno komponent [amp-pixel](/docs/reference/amp-pixel.html), jak i
[amp-analytics](/docs/reference/extended/amp-analytics.html)
zezwalają na wszystkie standardowe podstawienia zmiennych URL (zobacz
[Podstawienia zmiennych AMP HTML](https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md)).
W poniższym przykładzie
żądanie pageview jest wysyłane na adres URL
wraz z bieżącym kanonicznym adresem URL dokumentu AMP, jego tytułem i
[identyfikatorem klienta](/docs/guides/analytics/analytics_basics.html#user-identification):
[sourcecode:html]
<amp-pixel src="https://example.com/analytics?url=${canonicalUrl}&title=${title}&clientId=${clientId(site-user-id)}"></amp-pixel>
[/sourcecode]
Ze względu na swoją prostotę,
znacznik `amp-pixel` może zawierać tylko zmienne zdefiniowane przez platformę
lub takie, które środowisko wykonawcze AMP może zanalizować składniowo na podstawie strony AMP.
W przykładzie powyżej
platforma wypełnia wartości zmiennych
`canonicalURL` i `clientId(site-user-id)`.
Znacznik `amp-analytics` może zawierać te same zmienne co znacznik `amp-pixel`,
a także niepowtarzalnie zdefiniowane zmienne wewnątrz konfiguracji znacznika.
W przypadku zmiennej definiowanej na stronie lub na platformie
należy użyć formatu `${varName}` w ciągu znaków żądania.
Znacznik `amp-analytics` zastąpi szablon rzeczywistą wartością
w czasie konstruowania żądania analitycznego (zobacz też
[Zmienne obsługiwane w elemencie amp-analytics](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/analytics-vars.md)).
W poniższym przykładzie z elementem `amp-analytics`
żądanie pageview jest wysyłane na adres URL
wraz z dodatkowymi danymi wyodrębnionymi z podstawień zmiennych,
niektórymi podanymi przez platformę,
niektórymi zdefiniowanymi
w konfiguracji elementu`amp-analytics`:
[sourcecode:html]
<amp-analytics>
<script type="application/json">
{
"requests": {
"pageview":"https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}&clientId=${clientId(site-user-id)}",
},
"vars": {
"account": "ABC123",
},
"triggers": {
"someEvent": {
"on": "visible",
"request": "pageview",
"vars": {
"title": "My homepage",
}
}
}
}
</script>
</amp-analytics>
[/sourcecode]
W przykładzie powyżej
w konfiguracji elementu `amp-analytics` zdefiniowano
zmienne `account` i `title`.
Zmienne `canonicalUrl` i `clientId` nie są zdefiniowane w konfiguracji,
więc ich wartości są podstawiane przez platformę.
**Ważne:** Podstawianie zmiennych jest elastyczne;
te same zmienne mogą być zdefiniowane w różnych miejscach,
a środowisko wykonawcze AMP zanalizuje wartości w tej kolejności pierwszeństwa
(zobacz [Kolejność podstawiania zmiennych](/docs/guides/analytics/deep_dive_analytics.html#variable-substitution-ordering)).
## Identyfikacja użytkowników
Strony internetowe używają plików cookie do przechowywania w przeglądarce informacji właściwych dla użytkownika.
Na podstawie plików cookie może powiedzieć, czy użytkownik odwiedził witrynę wcześniej.
W przypadku AMP
strony mogą być udostępniane ze strony wydawcy lub z pamięci podręcznej
(takiej jak Google AMP Cache).
Najprawdopodobniej strona wydawcy i pamięć podręczna mają różne domeny.
Ze względów bezpieczeństwa
przeglądarki mogą (i często z tego korzystają) ograniczać dostęp do plików cookie z innych domen
(zobacz też
[Monitorowanie użytkowników w różnych domenach](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/cross-origin-tracking.md)).
Domyślnie
AMP obsłuży skonfigurowanie identyfikatora klienta niezależnie od tego, czy dostęp do strony jest uzyskiwany przez stronę wydawcy, czy przez pamięć podręczną.
Identyfikator klienta wygenerowany przez AMP ma wartość składającą się z przedrostka `"amp-"`
i losowego ciągu znaków w kodowaniu `base64` i zawsze pozostaje taki sam
dla użytkownika, jeśli ten sam użytkownik ponownie odwiedzi stronę.
AMP zarządza odczytem i zapisem identyfikatora klienta we wszystkich klasach.
Jest to szczególnie zauważalne w przypadku, gdy strona jest udostępniana
przez pamięć podręczną lub w inny sposób pokazana poza kontekstem wyświetlania
w oryginalnej witrynie wydawcy.
W tych okolicznościach dostęp do plików cookie z witryny wydawcy jest niemożliwy.
Gdy strona AMP jest udostępniana z witryny wydawcy,
używana przez AMP struktura identyfikatora klienta może uzyskać informacje o zapasowym pliku cookie
w celu znalezienia go i użycia.
W tym przypadku
argument `cid-scope-cookie-fallback-name` zmiennej `clientId`
jest interpretowany jako nazwa pliku cookie.
Możliwe są dwie opcje formatowania:
`CLIENT_ID(cid-scope-cookie-fallback-name)` lub
`${clientId(cid-scope-cookie-fallback-name)}`.
Na przykład:
[sourcecode:html]
<amp-pixel src="https://foo.com/pixel?cid=CLIENT_ID(site-user-id-cookie-fallback-name)"></amp-pixel>
[/sourcecode]
Jeśli AMP wykryje, że ten plik cookie został ustawiony,
podstawienie identyfikatora klienta spowoduje wyświetlenie wartości pliku cookie.
Jeśli AMP wykryje, że plik cookie nie został ustawiony,
AMP wygeneruje wartość złożoną z przedrostka `amp-`
i losowego ciągu znaków w kodowaniu base64.
Więcej informacji o podstawianiu identyfikatora klienta,
w tym o dodawaniu opcjonalnego identyfikatora powiadomienia użytkownika, można znaleźć w temacie
[Zmienne obsługiwane w analityce AMP](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/analytics-vars.md).
```
--------------------------------------------------------------------------------
/content/docs/guides/debug/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: AMP-Seiten überprüfen
---
[TOC]
Das Besondere an AMP ist nicht einfach, dass es Ihre Seiten schnell macht, sondern dass es dies auf eine Weise tut, die *validiert* werden kann. Dadurch ist es für Drittanbieter wie z. B. Twitter, Instagram oder die Google-Suche attraktiv, AMP-Seiten für Leser auf zunehmend interessantere Weise bereitzustellen.
## Wie kann ich prüfen, ob meine AMP-Seite gültig ist?
Es gibt verschiedene Möglichkeiten zur Überprüfung eines AMP-Dokuments. Sie alle führen zum selben Ergebnis. Wählen Sie also einfach jene, die am besten zu Ihrem Entwicklungsstil passt.
Neben der AMP-Gültigkeit ist es für Sie vielleicht auch sinnvoll zu prüfen, ob Ihr AMP-Dokument auf Drittanbieterplattformen [auffindbar](/docs/guides/discovery.html) ist.
### Entwicklerkonsole des Browsers
Das AMP-Validierungstool wird zusammen mit der AMP-JS-Bibliothek bereitgestellt, sodass diese standardmäßig auf jeder AMP-Seite verfügbar ist. So validieren Sie Ihre AMP-Seite:
1. Öffnen Sie Ihre AMP-Seite im Browser.
1. Hängen Sie "`#development=1`" an die URL an, z. B. `http://localhost:8080/released.amp.html#development=1`.
1. Öffnen Sie die [Chrome Developer Tools-Konsole](https://developers.google.com/web/tools/chrome-devtools/debug/console/) und prüfen Sie, ob Validierungsfehler vorliegen.
Fehler sehen in der Developer Console etwa so aus:
<amp-img src="/static/img/docs/validator_errors.png" width="713" height="243" layout="responsive" alt="Screenshot der Chrome-Entwicklerkonsole mit vom AMP-Validierungstool gefundenen Fehlern"></amp-img>
### Weboberfläche
Das AMP-Validierungstool kann unter [validator.ampproject.org](https://validator.ampproject.org/) als Weboberfläche verwendet werden. In dieser Benutzeroberfläche werden Fehler inline im HTML-Quellcode der Seite angezeigt.
Es handelt sich dabei um einen interaktiven Editor: Bei Änderungen am HTML-Quellcode wird erneut eine interaktive Überprüfung durchgeführt.
<amp-img src="/static/img/docs/validator_web_ui.png" width="660" height="507" layout="responsive" alt="Screenshot von validator.ampproject.org mit Fehlerbeispielen"></amp-img>
### Browsererweiterung
Mithilfe einer Browsererweiterung kann direkt über die Symbolleiste Ihres Browsers auf das AMP-Validierungstool zugegriffen werden. Während Sie surfen, überprüft es automatisch jede aufgerufene AMP-Seite und gibt über ein farbiges Symbol an, ob die Seite gültig ist.
<table>
<tr>
<td>
<amp-img src="/static/img/docs/validator_icon_invalid.png" width="20" height="20" layout="fixed" alt="Rotes AMP-Symbol zur Kennzeichnung eines ungültigen AMP-Dokuments">
</amp-img>
</td>
<td>Wenn eine AMP-Seite Fehler aufweist, wird das Symbol der Erweiterung in Rot zusammen mit der Anzahl der gefundenen Fehler angezeigt.
</td>
</tr>
<tr>
<td>
<amp-img src="/static/img/docs/validator_icon_valid.png" width="20" height="20" layout="fixed" alt="Gelbes AMP-Symbol zur Kennzeichnung eines gültigen AMP-Dokuments">
</amp-img>
</td>
<td>Bei einer fehlerfreien AMP-Seite erscheint das Symbol in Grün und es wird gegebenenfalls die Anzahl der Warnungen angegeben.
</td>
</tr>
<tr>
<td>
<amp-img src="/static/img/docs/validator_icon_link.png" width="20" height="20" layout="fixed" alt="Blaues AMP-Symbol zur Kennzeichnung einer AMP-HTML-Variante im Fall eines Klicks">
</amp-img>
</td>
<td>Wenn es sich nicht um eine AMP-Seite handelt, aber die Webseite mitteilt, dass eine AMP-Version verfügbar ist, erscheint das Symbol in Blau zusammen mit einem Linksymbol, über das die AMP-Version aufgerufen werden kann.
</td>
</tr>
</table>
[Browsererweiterung für das AMP-Validierungstool für Chrome](https://chrome.google.com/webstore/detail/amp-validator/nmoffdblmcmgeicmolmhobpoocbbmknc) und [Opera](https://addons.opera.com/en-gb/extensions/details/amp-validator/)
### Befehlszeilentool
Es kann erforderlich sein, dass Sie <a href="https://docs.npmjs.com/getting-started/installing-node">auf Ihrem System Node.js mit seinem Paketmanager `npm` installieren</a>.
Wenn Sie das [Befehlszeilentool des AMP-HTML-Validierungstools](https://www.npmjs.com/package/amphtml-validator) installieren möchten, geben Sie `npm install -g amphtml-validator` ein.
Als Nächstes wird eine echte AMP-HTML-Seite validiert:
[sourcecode:console]
$ amphtml-validator https://www.ampproject.org/
https://www.ampproject.org/: PASS
[/sourcecode]
Wie zu erwarten, handelt es sich bei dieser Seite um gültiges AMP-HTML. Deshalb wird nun die Überprüfung mit einer Seite wiederholt, die nicht gültig ist: [several_errors.html](https://raw.githubusercontent.com/ampproject/amphtml/master/validator/testdata/feature_tests/several_errors.html). Zur Ausführung des Befehls `amphtml-validator` können Sie entweder die URL der Seite oder den Namen einer lokalen Datei bereitstellen. Laden Sie [several_errors.html](https://raw.githubusercontent.com/ampproject/amphtml/master/validator/testdata/feature_tests/several_errors.html) als Datei herunter und führen Sie Folgendes aus:
[sourcecode:console]
$ amphtml-validator several_errors.html
several_errors.html:23:2 The attribute 'charset' may not appear in tag 'meta name= and content='.
several_errors.html:26:2 The tag 'script' is disallowed except in specific forms.
several_errors.html:32:2 The mandatory attribute 'height' is missing in tag 'amp-img'. (see https://www.ampproject.org/docs/reference/amp-img.html)
several_errors.html:34:2 The attribute 'width' in tag 'amp-ad' is set to the invalid value '100%'. (see https://www.ampproject.org/docs/reference/amp-ad.html)
...
[/sourcecode]
Das Format der Fehlermeldungen besteht aus Dateiname, Zeile, Spalte sowie der eigentlichen Meldung, oft gefolgt von einem Link zur AMP-HTML-Referenz. Manche Editoren, einschließlich Emacs (siehe Kompilierbefehl und Kompilierungsmodus), können dieses Format interpretieren und Ihnen ermöglichen, zu den Fehlern in der Originaldatei zu springen.
Ein guter Ausgangspunkt zum Erstellen einer eigenen AMP-Seite ist z. B. [minimum_valid_amp.html](https://raw.githubusercontent.com/ampproject/amphtml/master/validator/testdata/feature_tests/minimum_valid_amp.html):
[sourcecode:console]
$ amphtml-validator minimum_valid_amp.html
minimum_valid_amp.html: PASS
[/sourcecode]
Das Befehlszeilentool bietet zusätzliche Funktionen wie das Deaktivieren der Farbe, das Drucken der JSON-Ausgabe oder das Ausführen einer bestimmten Version des JavaScript-Codes des Validierungstools. Standardmäßig wird das neueste veröffentlichte Skript ausgeführt.
[sourcecode:console]
$ amphtml-validator --help
Usage: index [options] <fileOrUrlOrMinus...>
Validates the files or urls provided as arguments. If "-" is
specified, reads from stdin instead.
Options:
-h, --help output usage information
-V, --version output the version number
--validator_js <fileOrUrl> The Validator Javascript.
Latest published version by default, or
dist/validator_minified.js (built with build.py)
for development.
--format <color|text|json> How to format the output.
"color" displays errors/warnings/success in
red/orange/green.
"text" avoids color (e.g., useful in terminals not
supporting color).
"json" emits json corresponding to the ValidationResult
message in validator.proto.
[/sourcecode]
## Was geschieht, wenn meine Seite ungültig ist?
Das AMP-Validierungstool ist nicht nur ein praktisches Hilfsmittel bei der Entwicklung. Es wird auch von Plattformen wie Twitter und Google verwendet, die Ihre AMP-Seiten in ihre Inhalte und Suchergebnisse integrieren. Meist fordern sie die Seiten nicht direkt von Ihrem Server an, sondern verwenden den Google-AMP-Cache. Dies ist ein kostenloser Dienst, mit dem Ihre Seiten im Cache gespeichert und überall auf der Welt bereitgestellt werden, damit sie noch schneller geladen werden können.
Wenn der AMP-Validierungsdienst erkennt, dass Ihre Seite fehlerhaft ist, wird sie von Drittanbieterwebsites nicht gefunden und bereitgestellt und erscheint nicht im Google-AMP-Cache. Damit entgehen Ihnen nicht nur die Geschwindigkeitsvorteile des Caches, sondern Ihre Seite ist wahrscheinlich auch an vielen anderen Stellen nicht sichtbar. Darum sollten Fehler unbedingt vermieden werden.
## Wie behebe ich Validierungsfehler?
Die meisten Validierungsfehler können leicht behoben werden. Sehen Sie sich dieses HTML-Tag an:
[sourcecode:html]
<img src="cat.png">
[/sourcecode]
Es verursacht einen AMP-Validierungsfehler, der in verschiedenen Tools wie folgt angezeigt wird:
* Entwicklerkonsole des Browsers
<amp-img alt="Das Tag "img" ist nur als Nachfolgerelement des Tags "noscript" zulässig.Meinten Sie "amp-img"? Zeile 11, Spalte 2" height="30" src="/static/img/docs/validator_console_imgerror.png" width="696" layout="responsive">
</amp-img>
* Weboberfläche
<amp-img alt="Das Tag "img" ist nur als Nachfolgerelement des Tags "noscript" zulässig.Meinten Sie "amp-img"? Zeile 11, Spalte 2" height="58" src="/static/img/docs/validator_webui_imgerror.png" width="676" layout="responsive">
</amp-img>
* Browsererweiterung
<amp-img alt="Das Tag "img" ist nur als Nachfolgerelement des Tags "noscript" zulässig.Meinten Sie "amp-img"? Zeile 11, Spalte 2" height="108" src="/static/img/docs/validator_extension_imgerror.png" width="724" layout="responsive">
</amp-img>
Jedes dieser Tools stellt diverse Informationen bereit:
1. Die Position des Fehlers im HTML-Dokument in Form von Zeile und Spalte. In manchen Benutzeroberflächen kann die Stelle durch Klicken darauf hervorgehoben werden. In diesem Fall tritt das Problem in Zeile 11, Spalte 2 auf.
1. Eine Textzeile zur Beschreibung des Fehlers. In diesem Fall weist der Text darauf hin, dass fälschlicherweise ein `<img>`-Tag statt eines `<amp-img>`-Tags verwendet wird.
1. Ein Link zu einem für den Fehler relevanten Dokument. In diesem Fall ist dies die Dokumentation zum `<amp-img>`-Tag. Es werden aber nicht für alle Fehler Dokumentationslinks bereitgestellt.
Beim genauen Nachlesen der Spezifikation erkennen wir, dass wir versehentlich ein `<img>`-Tag statt eines `<amp-img>`-Tags verwendet haben.
Ausführliche Informationen zur vollständigen Liste potenzieller Fehler finden Sie im [Leitfaden zu AMP-Validierungsfehlern](https://www.ampproject.org/docs/reference/validation_errors.html).
Wenn Sie aber auch trotz sorgfältiger Untersuchung des Problems nicht weiterkommen, [fragen Sie uns](http://stackoverflow.com/questions/tagged/amp-html). Wir sind Ihnen gern behilflich.
```
--------------------------------------------------------------------------------
/content/docs/guides/debug/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Valider les pages AMP
---
La principale force de l'AMP n'est pas seulement d'accélérer le chargement de vos pages. Sa particularité est de permettre de *valider* cette vitesse. Ainsi, cela peut inciter des tierces parties telles que Twitter, Instagram ou la recherche Google à proposer à leurs lecteurs des pages AMP de façon toujours plus intéressante.
## Comment puis-je vérifier si ma page AMP est valide ?
Il existe plusieurs façons de valider un document AMP. Elles produiront toutes le même résultat. Vous pouvez donc utiliser la plus adaptée à votre style de développement.
En plus d'être valide, votre document AMP doit également être [visible](/docs/guides/discovery.html) par les plates-formes tierces.
### Developer Console dans le navigateur
Le validateur AMP est intégré à la bibliothèque JavaScript AMP. Il est donc disponible instantanément sur chaque page AMP. Pour procéder à la validation :
* Ouvrez votre page AMP dans votre navigateur.
* Ajoutez "`#development=1`" à l'URL, par exemple, `http://localhost:8000/released.amp.html#development=1`.
* Ouvrez la [console des outils pour les développeurs Chrome](https://developers.google.com/web/tools/chrome-devtools/debug/console/) et vérifiez les erreurs de validation.
Les erreurs sont présentées de la façon suivante dans la Developer Console :
<amp-img src="/static/img/docs/validator_errors.png" width="713" height="243" layout="responsive" alt="Capture d'écran des erreurs du validateur AMP dans la Developer Console Chrome"></amp-img>
### Interface Web
Le validateur AMP peut être utilisé comme interface Web sur [validator.ampproject.org](https://validator.ampproject.org/). Cette interface affiche les erreurs à côté du code source HTML de la page.
L'interface est un éditeur interactif : les modifications apportées au code HTML source entraînent une nouvelle validation interactive.
<amp-img src="/static/img/docs/validator_web_ui.png" width="660" height="507" layout="responsive" alt="Capture d'écran de validator.ampproject.org avec des exemples d'erreurs."></amp-img>
### Extension du navigateur
Le validateur AMP est accessible directement à partir de la barre d'outils de votre navigateur en utilisant une extension dans le navigateur. Au fil de votre navigation, l'extension valide automatiquement chaque page AMP consultée et vous indique sous forme d'icône de couleur la validité de la page.
<table>
<tr>
<td>
<amp-img src="/static/img/docs/validator_icon_invalid.png" width="20" height="20" alt="Icône AMP rouge indiquant un document AMP incorrect."></amp-img>
</td>
<td>Si la page AMP comporte des erreurs, l'icône de l'extension concernée s'affiche en rouge et indique le nombre d'erreurs trouvées.
</td>
</tr>
<tr>
<td>
<amp-img src="/static/img/docs/validator_icon_valid.png" width="20" height="20" alt="Icône AMP verte indiquant un document AMP valide."></amp-img>
</td>
<td>Si la page AMP ne comporte pas d'erreur, l'icône s'affiche en vert et, le cas échéant, indique le nombre d'avertissements.
</td>
</tr>
<tr>
<td>
<amp-img src="/static/img/docs/validator_icon_link.png" width="20" height="20" alt="Icône AMP bleue indiquant une variante AMP HTML si l'on clique dessus."></amp-img>
</td>
<td>Si une version AMP d'une page standard est disponible, l'icône s'affiche en bleu, avec une icône de lien. Il suffit de cliquer sur l'extension pour être redirigé vers la version AMP de la page dans le navigateur.
</td>
</tr>
</table>
Extension du validateur AMP pour [Chrome](https://chrome.google.com/webstore/detail/amp-validator/nmoffdblmcmgeicmolmhobpoocbbmknc) et [Opera](https://addons.opera.com/en-gb/extensions/details/amp-validator/).
### Outil de ligne de commande
Vous devez installer au préalable <a href="https://docs.npmjs.com/getting-started/installing-node">Node.js et son gestionnaire de package `npm` sur votre système</a>.
Pour installer l'[outil de ligne de commande du validateur AMP HTML](https://www.npmjs.com/package/amphtml-validator), saisissez `npm install -g amphtml-validator`.
Validons à présent une véritable page AMP HTML.
[sourcecode:console]
$ amphtml-validator https://www.ampproject.org/
https://www.ampproject.org/: PASS
[/sourcecode]
Cette page AMP HTML est valide. Rien de surprenant à cela. Intéressons-nous à présent à une page incorrecte : [several_errors.html](https://raw.githubusercontent.com/ampproject/amphtml/master/validator/testdata/feature_tests/several_errors.html). Pour exécuter la commande `amphtml-validator`, vous pouvez fournir l'URL de la page ou un nom de fichier local. Téléchargez et enregistrez [several_errors.html](https://raw.githubusercontent.com/ampproject/amphtml/master/validator/testdata/feature_tests/several_errors.html) dans un fichier, puis exécutez :
[sourcecode:console]
$ amphtml-validator several_errors.html
several_errors.html:23:2 The attribute 'charset' may not appear in tag 'meta name= and content='.
several_errors.html:26:2 The tag 'script' is disallowed except in specific forms.
several_errors.html:32:2 The mandatory attribute 'height' is missing in tag 'amp-img'. (see https://www.ampproject.org/docs/reference/amp-img.html)
several_errors.html:34:2 The attribute 'width' in tag 'amp-ad' is set to the invalid value '100%'. (see https://www.ampproject.org/docs/reference/amp-ad.html)
...
[/sourcecode]
Le format des messages d'erreur comprend le nom du fichier, la ligne, la colonne et le message, le tout étant souvent suivi d'un lien vers la référence AMP HTML. Certains éditeurs, y compris Emacs (cherchez la commande de compilation et le mode de compilation), peuvent interpréter ce format et vous permettre d'accéder directement aux erreurs dans le fichier original.
Un bon point de départ pour créer votre propre page AMP consiste à utiliser [minimum_valid_amp.html](https://raw.githubusercontent.com/ampproject/amphtml/master/validator/testdata/feature_tests/minimum_valid_amp.html) :
[sourcecode:console]
$ amphtml-validator minimum_valid_amp.html
minimum_valid_amp.html: PASS
[/sourcecode]
L'outil de ligne de commande offre des fonctionnalités supplémentaires, y compris la désactivation de la couleur, l'impression d'une sortie JSON ou l'exécution d'une version spécifique du validateur JavaScript (par défaut, il exécute le dernier script publié).
[sourcecode:console]
$ amphtml-validator --help
Usage: index [options] <fileOrUrlOrMinus...>
Validates the files or urls provided as arguments. If "-" is
specified, reads from stdin instead.
Options:
-h, --help output usage information
-V, --version output the version number
--validator_js <fileOrUrl> The Validator Javascript.
Latest published version by default, or
dist/validator_minified.js (built with build.py)
for development.
--format <color|text|json> How to format the output.
"color" displays errors/warnings/success in
red/orange/green.
"text" avoids color (e.g., useful in terminals not
supporting color).
"json" emits json corresponding to the ValidationResult
message in validator.proto.
[/sourcecode]
## Que se passe-t-il si ma page n'est pas valide ?
Le validateur AMP n'est pas seulement un outil pratique qui vous est destiné durant le développement. Il est également utilisé par des plates-formes comme Twitter ou Google qui intègrent vos pages AMP dans leur contenu et leurs résultats de recherche. Qui plus est, ces plates-formes ne demandent généralement pas à accéder à vos pages depuis votre serveur, mais elles utilisent le cache AMP Google, un service gratuit qui met en cache vos pages et les rend disponibles dans le monde entier, pour qu'elles se chargent encore plus vite.
Si le service de validation AMP détecte que votre page présente un problème, elle ne sera pas visible, ne sera pas diffusée par des sites Web tiers et ne s'affichera pas dans le cache AMP Google. Ainsi, non seulement vous perdrez les avantages du cache en termes de vitesse, mais votre page risque de ne pas s'afficher à de nombreux endroits. Ce serait dommage, alors assurons-nous que cela ne se produira pas.
## Comment puis-je corriger les erreurs de validation ?
Il est facile d'identifier et de corriger la plupart des erreurs de validation. Prenez cette balise HTML :
[sourcecode:html]
<img src="cat.png">
[/sourcecode]
Elle génère cette erreur de validation AMP, présentée dans ces différents outils :
* Developer Console dans le navigateur
<amp-img alt="Erreur AMP : la balise "img" ne peut s'afficher que comme descendante de la balise "noscript".Vouliez-vous dire "amp-img" ?ligne 11, colonne 2" height="30" src="/static/img/docs/validator_console_imgerror.png" width="696" layout="responsive"></amp-img>
* Interface Web
<amp-img alt="Erreur AMP : la balise "img" ne peut s'afficher que comme descendante de la balise "noscript".Vouliez-vous dire "amp-img" ?ligne 11, colonne 2" height="58" src="/static/img/docs/validator_webui_imgerror.png" width="676" layout="responsive"></amp-img>
* Extension du navigateur
<amp-img alt="Erreur AMP : la balise "img" ne peut s'afficher que comme descendante de la balise "noscript".Vouliez-vous dire "amp-img" ?ligne 11, colonne 2" height="108" src="/static/img/docs/validator_extension_imgerror.png" width="724" layout="responsive"></amp-img>
Chaque outil donne plusieurs informations :
* L'endroit (ligne et colonne) où l'erreur est survenue dans le document HTML. Certaines interfaces permettent de cliquer dessus pour mettre en surbrillance cet endroit. Dans le cas présent, le problème se trouve à la ligne 11, colonne 2.
* Une ligne de texte décrivant l'erreur. Dans le cas présent, le texte indique que nous utilisons une balise `<img>`, alors que nous aurions dû utiliser une balise `<amp-img>`.
* Un lien vers un document pertinent à propos de l'erreur. Dans le cas présent, il s'agit de la documentation concernant la balise `<amp-img>`. Toutes les erreurs ne génèrent pas de liens vers la documentation connexe.
En relisant attentivement la spécification, nous réalisons que nous utilisons une balise `<img>` au lieu d'une balise `<amp-img>`.
Pour mieux comprendre la liste complète des erreurs potentielles, consultez le [guide des erreurs de validation AMP](https://www.ampproject.org/docs/reference/validation_errors.html).
Si vous êtes toujours bloqué après un examen minutieux du guide, [posez-nous votre question](http://stackoverflow.com/questions/tagged/amp-html) et nous essaierons de vous aider.
```
--------------------------------------------------------------------------------
/content/learn/[email protected]:
--------------------------------------------------------------------------------
```yaml
hero:
title@: Accélération de la performance avec AMP
subtitle@: |
La combinaison de toutes les optimisations suivantes est la raison pour laquelle les pages AMP sont tellement rapides qu'elles semblent se charger instantanément :
<p>Si vous préférez l'écoute à la lecture, la vidéo suivante présentée par l'ingénieur AMP en chef, Malte Ubl, aborde les mêmes informations que les paragraphes suivants.
points:
pointlist:
- title@: Autoriser uniquement les scripts asynchrones
description@: |
JavaScript est puissant.
Il peut modifier pratiquement tous les aspects de la page,
mais aussi bloquer la construction DOM et retarder le rendu de la page
(voir aussi [Ajouter l'interactivité avec JavaScript](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/adding-interactivity-with-javascript)).
Pour empêcher JavaScript de retarder le rendu de la page,
AMP autorise uniquement les scripts JavaScript asynchrones.
<p>Les pages AMP ne peuvent inclure aucun autre JavaScript rédigé.
Plutôt que d'utiliser JavaScript,
les fonctions de page interactives sont traitées dans des éléments AMP personnalisés.
Les éléments AMP personnalisés peuvent intégrer du JavaScript,
mais ils sont conçus de sorte à ne pas impacter la performance.
<p>Même si des scripts JS tiers sont autorisés dans les iframes,
ils ne peuvent pas bloquer le rendu.
Par exemple, si un script JS tiers utilise l'
[API `document.write` à fort impact négatif sur la performance](http://www.stevesouders.com/blog/2012/04/10/dont-docwrite-scripts/),
il ne bloque pas le rendu de la page principale.
- title@: Dimensionner toutes les ressources de manière statique
description@: |
Les ressources externes, comme les images, les publicités ou les iframes, doivent déclarer leur taille dans le code HTML
pour permettre à AMP de déterminer la taille et la position de chaque élément avant leur téléchargement.
AMP charge la disposition de la page sans attendre le téléchargement des ressources.
<p>AMP dissocie la disposition des documents de celle des ressources.
Une seule requête HTTP est nécessaire pour mettre en page le document entier
([+ les polices](#font-triggering-must-be-efficient)).
Dans la mesure où AMP est optimisé pour éviter les coûteux recalculs de style et dispositions dans le navigateur,
aucune re-disposition n'est nécessaire lors du chargement des ressources.
- title@: Empêcher les mécanismes d'extension de bloquer le rendu
description@: |
AMP empêche les mécanismes d'extension de bloquer le rendu des pages.
AMP prend en charge les extensions d'objets tels que les
[mosaïques](/docs/reference/extended/amp-lightbox.html), les
[intégrations Instagram](/docs/reference/extended/amp-instagram.html), les
[tweets](/docs/reference/extended/amp-twitter.html), etc.
Même si ces extensions exigent des requêtes HTTP supplémentaires,
ces dernières ne bloquent ni la mise en page ni le rendu des pages.
<p>Toute page qui utilise un script personnalisé doit indiquer au système AMP
qu'elle contiendra ultérieurement une balise personnalisée.
Par exemple, le script [`amp-iframe`](/docs/reference/extended/amp-iframe.html)
indique au système qu'il y aura une balise `amp-iframe`.
AMP crée le cadre iframe avant même de savoir ce qu'il contiendra :
example: /content/includes/amp-iframe.md
- title@: Écarter le JavaScript tiers du processus principal
description@: |
Le script JS tiers aime utiliser le chargement JS synchrone.
Il aime également appliquer `document.write` à d'autres scripts synchrones.
Par exemple, si vous avez cinq publicités, chacune exécutant
trois chargements synchrones avec une connexion
d'une latence d'une seconde, le chargement JS prend à lui seul 15 secondes.
<p>Les pages AMP autorisent le JavaScript tiers, mais seulement dans des iframes placés en sandbox.
Limité aux iframes, ces scripts ne peuvent pas bloquer l'exécution de la page principale.
Même s'ils déclenchent plusieurs recalculs de style,
le DOM de leurs iframes minuscules est très réduit.
<p>Les recalculs de style et les dispositions dépendent de la taille du DOM ;
aussi, les recalculs d'iframe sont très rapides
comparés aux recalculs de styles et à la disposition de la page.
- title@: Tout le style CSS doit être en ligne et limité en taille
description@: |
Le CSS bloque tout le rendu. Il bloque le chargement des pages et a tendance à « gonfler ».
Dans les pages AMP HTML, seuls les styles en ligne sont autorisés.
Une ou souvent plusieurs requêtes HTTP sont ainsi supprimées du processus de rendu principal,
par rapport à la plupart des pages Web.
<p>De plus, la taille des feuilles de style en ligne est limitée à 50 Ko maximum.
Même si cette taille est suffisante pour les pages très complexes,
le créateur de la page doit malgré tout appliquer un style CSS propre.
- title@: Le déclenchement de police doit être efficace
id: font-triggering-must-be-efficient
description@: |
Les polices Web étant très volumineuses,
l'[optimisation des polices Web](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization)
est essentielle pour la performance.
Sur une page standard ne contenant que peu de scripts synchrones et de feuilles de style externes,
le navigateur doit attendre sans fin le téléchargement de ces énormes polices.
<p>Le système AMP ne déclare aucune requête HTTP avant le début du téléchargement des polices.
En effet, tous les scripts JS dans AMP contiennent l'attribut « asynch »
et seules les feuilles de style en ligne sont autorisées.
Aucune requête HTTP n'empêche donc le navigateur de télécharger les polices.
- title@: Réduire au minimum les recalculs de style
description@: |
Dès lors que vous effectuez des mesures, de coûteux recalculs de style sont exécutés
car le navigateur doit définir la disposition de la page entière.
Dans les pages AMP, toutes les lectures DOM se produisent avant toutes les écritures.
Ainsi, un seul recalcul de style maximum est effectué par cadre.
<p>Pour en savoir plus sur l'impact des recalculs de style et de disposition, voir
[performances de rendu](https://developers.google.com/web/fundamentals/performance/rendering/).
- title@: Exécuter uniquement les animations accélérées par GPU
description@: |
La seule façon d'obtenir des optimisations rapides, c'est de les exécuter sur le GPU.
Le GPU connaît les couches, il sait comment exécuter certaines choses sur ces couches,
il peut les déplacer, il peut les diminuer, mais il ne peut pas actualiser
la disposition de la page. Il laisse cette tâche au navigateur, ce qui n'est pas une bonne chose.
<p>Les règles concernant le CSS lié aux animations garantissent que ces dernières peuvent être accélérées par GPU.
Tout particulièrement, AMP autorise les animations et transitions uniquement sur les propriétés transform et opacity
; aucune disposition de la page n'est ainsi requise.
En savoir plus sur
l'[utilisation des propriétés transform et opacity pour les changements sur les animations](https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count).
- title@: Hiérarchiser le chargement des ressources
description@: |
AMP contrôle tous les téléchargements de ressources : il hiérarchise
le chargement, ne chargeant que ce qui est nécessaire, et pré-extrait les ressources les plus lentes à charger.
<p>Lorsqu'AMP télécharge des ressources, il optimise ces téléchargements
de sorte que les ressources actuellement les plus importantes soient téléchargées en premier lieu.
Les images et publicités ne sont téléchargées que si elles seront vues par l'utilisateur,
dans la partie au-dessus de la ligne de flottaison, ou si l'utilisateur fera défiler rapidement la page pour y accéder.
<p>De plus, AMP pré-extrait les ressources les plus lentes à charger.
Les ressources sont chargées le plus tard possible, mais pré-extraites le plus tôt possible.
De cette façon, le chargement est très rapide ; le processeur
n'est utilisé que lorsque les ressources sont effectivement affichées aux utilisateurs.
- title@: Charger les pages instantanément
description@: |
La nouvelle [API de pré-connexion](http://www.w3.org/TR/resource-hints/#dfn-preconnect)
est largement utilisée pour garantir des requêtes HTTP aussi rapides que possible dès leur lancement.
Ainsi,
une page peut être rendue avant même que l'utilisateur n'indique explicitement qu'il aimerait y accéder.
La page peut être déjà disponible avant l'instant où l'utilisateur la sélectionne effectivement,
ce qui permet un chargement instantané.
<p>Alors que tout contenu Web peut être pré-rendu,
il peut également consommer une grande quantité de bande passante et de ressources du processeur. AMP est optimisé pour limiter ces deux facteurs. Le pré-rendu permet de télécharger uniquement les ressources situées
dans la partie au-dessus de la ligne de flottaison et n'inclut pas les éléments gourmands en processeur.
<p>Lorsque les documents AMP sont pré-rendus pour un chargement instantané,
seules les ressources situées dans la partie au-dessus de la ligne de flottaison sont effectivement téléchargées.
Lorsque les documents AMP sont pré-rendus pour un chargement instantané,
les ressources susceptibles d'utiliser une grande quantité de ressources du processeur (telles que les iframes tiers) ne sont pas téléchargées.
<p>En savoir plus sur
les [raisons pour lesquelles AMP HTML n'exploite pas pleinement le scanner de pré-chargement](https://medium.com/@cramforce/why-amp-html-does-not-take-full-advantage-of-the-preload-scanner-7e7f788aa94e).
- title@: Contribuer à l'accélération d'AMP
description@: |
AMP est une initiative open-source.
Nous avons besoin de votre aide pour rendre AMP encore plus rapide.
Découvrez [comment contribuer](/docs/support/contribute.html).
```