This is page 14 of 24. Use http://codebase.md/cloudflare/docs/imgs/claudemcp.gif?lines=true&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/author_develop/responsive_amp/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Tata Letak yang Didukung
3 | ---
4 |
5 | Buat elemen Anda menjadi responsif;
6 | sertakan `layout=responsive`.
7 |
8 | [TOC]
9 |
10 | ## Nilai atribut tata letak yang didukung
11 |
12 | Secara default,
13 | gunakan tata letak responsif.
14 |
15 | Berikut daftar lengkap atribut tata letak yang didukung:
16 |
17 | <table>
18 | <thead>
19 | <tr>
20 | <th class="col-twenty" data-th="Layout type">Jenis tata letak</th>
21 | <th class="col-twenty" data-th="Width/height required">Lebar/tinggi diperlukan</th>
22 | <th data-th="Behavior">Perilaku</th>
23 | </tr>
24 | </thead>
25 | <tbody>
26 | <tr>
27 | <td class="col-twenty" data-th="Layout type"><code>nodisplay</code></td>
28 | <td class="col-twenty" data-th="Description">Tidak</td>
29 | <td data-th="Behavior">Elemen tidak ditampilkan. Tata letak ini dapat diterapkan ke setiap elemen AMP. Komponen tersebut tidak menggunakan ruang sama sekali di layar karena tidak memiliki gaya tampilan. Hal ini diasumsikan bahwa elemen tersebut dapat tampil dengan sendirinya di tindakan pengguna, misalnya, <a href="/docs/reference/extended/amp-lightbox.html"><code>amp-lightbox</code></a>.</td>
30 | </tr>
31 | <tr>
32 | <td class="col-twenty" data-th="Layout type"><code>fixed</code></td>
33 | <td class="col-twenty" data-th="Description">Ya</td>
34 | <td data-th="Behavior">Elemen memiliki lebar dan tinggi yang tetap tanpa mendukung responsivitas. Pengecualian hanya untuk elemen <a href="/docs/reference/amp-pixel.html"><code>amp-pixel</code></a> dan <a href="/docs/reference/extended/amp-audio.html"><code>amp-audio</code></a>.</td>
35 | </tr>
36 | <tr>
37 | <td class="col-twenty" data-th="Layout type"><code>responsive</code></td>
38 | <td class="col-twenty" data-th="Description">Ya</td>
39 | <td data-th="Behavior">Elemen diukur sesuai lebar elemen penampungnya dan ukuran panjangnya diubah secara otomatis ke rasio aspek yang diberikan oleh atribut lebar dan tinggi. Tata letak ini berfungsi sangat baik untuk sebagian besar elemen AMP, termasuk <a href="/docs/reference/amp-img.html"><code>amp-img</code></a> dan <a href="/docs/reference/amp-video.html"><code>amp-video</code></a>. Ruang yang tersedia tergantung pada elemen induk dan dapat disesuaikan menggunakan CSS <code>max-width</code>.</td>
40 | </tr>
41 | <tr>
42 | <td class="col-twenty" data-th="Layout type"><code>fixed-height</code></td>
43 | <td class="col-twenty" data-th="Description">Hanya tinggi</td>
44 | <td data-th="Behavior">Elemen menggunakan ruang yang disediakan, namun tingginya tidak diubah. Tata letak ini berfungi dengan baik untuk elemen seperti <a href="/docs/reference/extended/amp-carousel.html"><code>amp-carousel</code></a> yang melibatkan konten yang diposisikan secara horizontal. Atribut <code>width</code> harus tidak ada atau harus sama dengan <code>auto</code>.</td>
45 | </tr>
46 | <tr>
47 | <td class="col-twenty" data-th="Layout type"><code>fill</code></td>
48 | <td class="col-twenty" data-th="Description">Tidak</td>
49 | <td data-th="Behavior">Elemen menggunakan ruang yang disediakan, untuk tinggi dan lebarnya. Dengan kata lain, tata letak elemen isian sesuai dengan induknya.</td>
50 | </tr>
51 | <tr>
52 | <td class="col-twenty" data-th="Layout type"><code>container</code></td>
53 | <td class="col-twenty" data-th="Description">Tidak</td>
54 | <td data-th="Behavior">Elemen memungkinkan elemen turunannya menentukan ukurannya, mirip seperti <code>div</code> HTML normal. Komponen diasumsikan tidak memiliki tata letak spesifik, tetapi bertindak sebagai penampung. Turunannya langsung dirender.</td>
55 | </tr>
56 | </tbody>
57 | </table>
58 |
59 | ### Bagaimana jika lebar dan tinggi tidak ditentukan?
60 |
61 | Dalam beberapa kasus, jika `width` atau `height` tidak ditentukan,
62 | waktu proses AMP dapat mengubah nilai berikut menjadi default:
63 |
64 | * [`amp-pixel`](/docs/reference/amp-pixel.html): Setelan default lebar dan tingginya adalah 0.
65 | * [`amp-audio`](/docs/reference/extended/amp-audio.html): Setelan lebar dan tinggi disimpulkan dari browser.
66 |
67 | ### Bagaimana jika atribut tata letak tidak ditentukan?
68 |
69 | Perilaku tata letak ditentukan seperti berikut:
70 |
71 | * Jika `height` ada dan `width` tidak ada atau sama dengan `auto`, dianggap tata letak `fixed-height`.
72 | * Jika atribut `width` atau `height` ada bersama dengan atribut `sizes`, dianggap tata letak `responsive`.
73 | * Jika atribut `width` atau `height` ada, dianggap tata letak `fixed`.
74 | * Jika `width` dan `height` tidak ada, dianggap tata letak `container`.
75 |
76 | ## Menggunakan @media dan media
77 |
78 | Gunakan [`@media`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media)
79 | untuk mengontrol tampilan dan perilaku tata letak laman, seperti yang akan Anda lakukan di situs web lainnya.
80 | Jika jendela browser merubah ukuran atau orientasi,
81 | kueri media dievaluasi ulang serta elemen disembunyikan dan ditampilkan
82 | berdasarkan hasil yang baru.
83 |
84 | Pelajari lebih lanjut tentang mengontrol tata letak dengan menerapkan kueri media di
85 | [Menggunakan kueri media CSS untuk responsivitas](https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries?hl=en).
86 |
87 | Salah satu fitur tambahan untuk desain responsif yang tersedia di AMP adalah atribut `media`.
88 | Atribut ini dapat digunakan di setiap elemen AMP;
89 | atribut berfungsi seperti kueri media di stylesheet global,
90 | tetapi hanya memengaruhi elemen spesifik di laman tunggal.
91 |
92 | Misalnya, di sini terdapat 2 gambar dengan kueri media yang berdiri sendiri.
93 |
94 | [sourcecode:html]
95 | <amp-img
96 | media="(min-width: 650px)"
97 | src="wide.jpg"
98 | width=466
99 | height=355
100 | layout="responsive" >
101 | </amp-img>
102 | [/sourcecode]
103 |
104 | Tergantung pada lebar layar, salah satu atau yang lainnya akan diambil dan dirender.
105 |
106 | [sourcecode:html]
107 | <amp-img
108 | media="(max-width: 649px)"
109 | src="narrow.jpg"
110 | width=527
111 | height=193
112 | layout="responsive" >
113 | </amp-img>
114 | [/sourcecode]
115 |
116 | ## Menggunakan srcset dan ukuran
117 |
118 | Gunakan atribut `srcset` untuk mengontrol aset elemen
119 | berdasarkan berbagai ekspresi media.
120 | Secara khusus, gunakan atribut tersebut untuk semua tag [`amp-img`](/docs/reference/amp-img.html)
121 | guna menentukan aset gambar yang akan digunakan berdasarkan berbagai ukuran layar.
122 |
123 | Dalam contoh sederhana ini,
124 | `srcset` menentukan gambar yang akan digunakan berdasarkan lebar layar.
125 | Alat deskripsi `w` memberi tahu browser tentang lebar
126 | setiap gambar di daftar:
127 |
128 | [sourcecode:html]
129 | <amp-img
130 | src="wide.jpg"
131 | srcset="wide.jpg" 640w,
132 | "narrow.jpg" 320w >
133 | </amp-img>
134 | [/sourcecode]
135 |
136 | **Catatan:** AMP mendukung alat deskripsi `w` di semua browser.
137 |
138 | Pelajari lebih lanjut tentang membuat gambar responsif menggunakan `srcset`
139 | di [Menggunakan Gambar Responsif (Sekarang)](http://alistapart.com/article/using-responsive-images-now).
140 |
141 | Anda juga dapat menggunakan atribut `sizes` bersama `srcset`.
142 | Atribut `sizes` mendeskripsikan cara menghitung ukuran elemen
143 | berdasarkan ekspresi media apa pun.
144 | Berdasarkan ukuran elemen yang dihitung,
145 | agen pengguna memilih sumber paling relatif yang diberikan oleh atribut `srcset`.
146 |
147 | Perhatikan contoh berikut:
148 |
149 | [sourcecode:html]
150 | <amp-img
151 | src="wide.jpg"
152 | srcset="wide.jpg" 640w,
153 | "narrow.jpg" 320w
154 | sizes="(min-width: 650px) 50vw, 100vw" >
155 | </amp-img>
156 | [/sourcecode]
157 |
158 | Atribut `sizes` menentukan lebar elemen menjadi 50% dari ukuran tampilan yang terlihat
159 | jika tampilan yang terlihat adalah 650 piksel atau lebih.
160 | Misalnya, jika tampilan yang terlihat adalah 800 piksel,
161 | lebar elemen disetel menjadi 400 piksel.
162 | Kemudian, browser memilih sumber daya `srcset` yang sesuai dengan 400 piksel,
163 | menganggap rasio piksel perangkat adalah 1,
164 | yang dalam hal ini adalah `narrow.jpg` (320 piksel).
165 |
166 | **Penting:** Jika atribut ukuran ditentukan bersama lebar dan tinggi,
167 | default tata letak menjadi `responsive`.
168 |
169 | Pelajari lebih lanjut tentang cara membandingkan atribut `sizes` dan `srcset`
170 | dengan kueri media di
171 | entri blog [Srcset dan ukuran](https://ericportis.com/posts/2014/srcset-sizes/).
172 |
173 | ## Menyertakan placeholder dan fallback
174 |
175 | ### placeholder
176 |
177 | Elemen yang ditandai dengan atribut `placeholder` bertindak sebagai
178 | placeholder untuk elemen AMP induk.
179 | Jika ditentukan, elemen `placeholder` harus merupakan turunan langsung dari elemen AMP.
180 |
181 | [sourcecode:html]
182 | <amp-anim src="animated.gif" width=466 height=355 layout="responsive" >
183 | <amp-img placeholder src="preview.png" layout="fill"></amp-img>
184 | </amp-anim>
185 | [/sourcecode]
186 |
187 | Secara default, placeholder langsung ditampilkan untuk elemen AMP,
188 | meskipun sumber daya elemen AMP belum didownload atau diinisialisasi.
189 | Setelah siap, elemen AMP biasanya menyembunyikan placeholder-nya dan menampilkan kontennya.
190 |
191 | **Catatan:** Placeholder tidak harus berupa elemen AMP;
192 | elemen HTML apa pun dapat bertindak sebagai placeholder.
193 |
194 | ### fallback
195 |
196 | Gunakan atribut `fallback` untuk mengindikasikan perilaku fallback
197 | untuk elemen apa pun yang tidak didukung oleh browser.
198 | Misalnya, gunakan atribut `fallback` untuk berkomunikasi dengan pengguna
199 | yang fitur tertentunya tidak didukung oleh browser:
200 |
201 | [sourcecode:html]
202 | <amp-video width=400 height=300 src="https://yourhost.com/videos/myvideo.mp4"
203 | poster="myvideo-poster.jpg" >
204 | <div fallback>
205 | <p>Your browser doesn’t support HTML5 video.</p>
206 | </div>
207 | </amp-video>
208 | [/sourcecode]
209 |
210 | Atribut `fallback` dapat disetel di elemen HTML apa pun, tidak hanya elemen AMP.
211 | Jika ditentukan, elemen `fallback` harus berupa turunan langsung dari elemen AMP.
212 |
213 | ### noloading
214 |
215 | Banyak elemen AMP dimasukkan ke daftar putih untuk menampilkan "indikator pemuatan",
216 | yang merupakan animasi dasar yang menunjukkan bahwa elemen tersebut belum dimuat sepenuhnya.
217 | Elemen dapat menyisih dari perilaku ini dengan menambahkan atribut `noloading`.
218 |
```
--------------------------------------------------------------------------------
/content/learn/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Cómo AMP acelera el rendimiento
3 | ---
4 | [TOC]
5 |
6 | La combinación de las siguientes optimizaciones hace que las páginas AMP se carguen de manera casi instantánea:
7 |
8 | 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.
9 |
10 | <amp-youtube
11 | data-videoid="hVRkG1CQScA"
12 | layout="responsive"
13 | width="480" height="270">
14 | </amp-youtube>
15 |
16 | ## Se permiten únicamente scripts asíncronos
17 |
18 | JavaScript es poderoso:
19 | puede modificar casi todos los aspectos de la página,
20 | pero también puede bloquear la construcción del DOM y demorar la representación de la página
21 | (consulta también [Añadir interactividad con JavaScript](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/adding-interactivity-with-javascript)).
22 | Para evitar que JavaScript demore la representación de páginas,
23 | AMP solo permite JavaScript asíncrono.
24 |
25 | Las páginas AMP no pueden incluir JavaScript de autor.
26 | En lugar de JavaScript,
27 | para el control de las funciones de las páginas interactivas se emplean elementos de AMP personalizados.
28 | Es posible que los elementos de AMP personalizados tengan ocultos rasgos de JavaScript,
29 | pero están diseñados cuidadosamente para no tener efectos negativos en el rendimiento.
30 |
31 | Si bien se permite contenido JS de terceros en iframes,
32 | este no puede bloquear la representación.
33 | Por ejemplo, si en el contenido JS de terceros se usa la
34 | [API `document.write`, totalmente contraproducente para el rendimiento](http://www.stevesouders.com/blog/2012/04/10/dont-docwrite-scripts/),
35 | no se bloqueará la representación de la página principal.
36 |
37 | ## Se ordenan estáticamente los recursos
38 |
39 | Los recursos externos, como las imágenes, los anuncios o los iframes, deben establecer su tamaño en HTML
40 | 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.
41 | El sistema AMP carga el diseño de una página sin esperar que se descarguen recursos.
42 |
43 | Las páginas AMP desacoplan el diseño del documento del diseño del recurso.
44 | Solo se necesita una solicitud HTTP para diseñar por completo el documento completo
45 | ([y las fuentes](#font-triggering-must-be-efficient)).
46 | Dado que las páginas AMP están optimizadas para evitar recálculos de estilo y diseños pesados en el navegador,
47 | no se llevará a cabo ninguna instancia de rediseño cuando se carguen los recursos.
48 |
49 | ## No se permite que los mecanismos de extensión bloqueen la representación
50 |
51 | El sistema AMP no permite que los mecanismos de extensión bloqueen la representación de páginas.
52 | Admite extensiones para recursos como
53 | [lightbox](/docs/reference/extended/amp-lightbox.html),
54 | [inserciones de Instagram](/docs/reference/extended/amp-instagram.html),
55 | [tuits](/docs/reference/extended/amp-twitter.html), etc.
56 | Si bien estos recursos necesitan de solicitudes HTTP adicionales,
57 | estas no bloquean el diseño ni la representación de páginas.
58 |
59 | Todas las páginas en las que se use un script personalizado deben indicarle al sistema AMP
60 | que eventualmente tendrá una etiqueta personalizada.
61 | Por ejemplo, el script [`amp-iframe`](/docs/reference/extended/amp-iframe.html)
62 | le indica que habrá una etiqueta `amp-iframe`.
63 | Las páginas AMP crean el cuadro de iframe antes de determinar lo que incluirá:
64 |
65 | [sourcecode:html]
66 | <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
67 | [/sourcecode]
68 |
69 | ## Se mantiene el contenido JavaScript de terceros lejos de la ruta de acceso crítica
70 |
71 | En el contenido JS de terceros generalmente se aplica carga de JS sincrónica y
72 | también se implementa `document.write` en más scripts de sincronización.
73 | Por ejemplo, si tienes cinco anuncios y cada uno de ellos tiene tres cargas sincrónicas
74 | con una conexión de latencia de 1 segundo,
75 | tendrás 15 segundos de carga solo para el contenido JS.
76 |
77 | Las páginas AMP permiten JavaScript de terceros, pero solo en iframes de espacio aislado.
78 | Si se restringen a los iframes, no pueden bloquear la ejecución de la página principal.
79 | Incluso si activan varios recálculos de estilo,
80 | sus minúsculos iframes tienen muy poco del DOM.
81 |
82 | Los recálculos de estilo y los diseños son típicos del tamaño del DOM.
83 | Por lo tanto, los recálculos de iframe son muy rápidos en comparación
84 | con el recálculo de estilos y el diseño para la página.
85 |
86 | ## Los elementos de CSS deben estar alineados y su tamaño debe estar limitado
87 |
88 | Los elementos de CSS bloquean toda representación y la carga de páginas, y su tamaño tiende a aumentar.
89 | En páginas HTML de AMP, solo se permiten los estilos en línea.
90 | Esto elimina una o, a menudo, más solicitudes HTTP de la ruta de acceso de representación crítica
91 | en comparación con la mayoría de páginas web.
92 |
93 | Además, la hoja de estilo en línea tiene un tamaño máximo de 50 kilobytes.
94 | Si bien este tamaño es suficiente para páginas muy sofisticadas,
95 | es necesario que el autor de la página realice un mantenimiento de CSS adecuado.
96 |
97 | ## La activación de fuentes debe ser eficaz
98 |
99 | Las fuentes web son muy grandes. Por lo tanto, la
100 | [optimización de fuentes web](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization)
101 | es crucial para el rendimiento.
102 | En una página típica que tiene algunos scripts sincrónicos y algunas hojas de estilo externas,
103 | el navegador aguarda para comenzar a descargar estas fuentes enormes hasta que todo esto suceda.
104 |
105 | El sistema de AMP declara cero solicitudes HTTP hasta que las fuentes comienzan a descargarse.
106 | Esto solo es posible porque todo el contenido JS en AMP tiene el atributo asíncrono
107 | y porque solo se permiten hojas de estilo en línea;
108 | no hay solicitudes HTTP que impidan que el navegador descargue las fuentes.
109 |
110 | ## Se minimizan los recálculos de estilo
111 |
112 | Siempre que se mide algo se activan recálculos de estilo que resultan pesados,
113 | ya que el navegador debe diseñar la página completa.
114 | En páginas AMP, todas las lecturas del DOM tienen lugar antes que las escrituras.
115 | Esto garantiza el valor máximo de un recálculo de estilos por cuadro.
116 |
117 | Puedes obtener más información sobre el impacto de los recálculos de estilo y diseño en
118 | [Rendimiento de la representación](https://developers.google.com/web/fundamentals/performance/rendering/).
119 |
120 | ## Solo se ejecutan animaciones con aceleración por GPU
121 |
122 | La única forma de lograr optimizaciones rápidas es ejecutarlas en la GPU.
123 | La GPU reconoce capas, identifica los procedimientos para llevar a cabo tareas en estos diseños
124 | y puede moverlos y atenuarlos, pero no puede actualizar el diseño de la página.
125 | Deriva la tarea al navegador, y eso no es conveniente.
126 |
127 | Las reglas para CSS relacionado con la animación garantizan que la GPU pueda acelerar las animaciones.
128 | Específicamente, el sistema de AMP solo permite realizar animaciones y transiciones en transformación y opacidad
129 | para que no se necesite el diseño de la página.
130 | Obtén más información sobre el
131 | [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).
132 |
133 | ## Se prioriza la carga de recursos
134 |
135 | El sistema de AMP controla todas las descargas de recursos. Prioriza la carga de recursos,
136 | ya que carga solo lo que es necesario y realiza capturas previas de recursos de carga diferida.
137 |
138 | Cuando descarga recursos, optimiza las descargas
139 | para que se descarguen primero los recursos actuales más importantes.
140 | Las imágenes y los anuncios solo se descargan si es probable que el usuario los vea,
141 | en la parte superior de la página, o se desplace rápidamente hacia ellos.
142 |
143 | El sistema de AMP también realiza capturas previas de recursos de carga diferida.
144 | Los recursos se cargan lo más tarde posible, pero su captura previa se produce lo más pronto posible.
145 | De esa manera, los objetos se cargan muy rápido, pero el CPU solo se usa
146 | cuando se muestran los recursos ante el usuario.
147 |
148 | ## Las páginas se cargan al instante
149 |
150 | La nueva [API de preconexión](http://www.w3.org/TR/resource-hints/#dfn-preconnect)
151 | se usa mucho para garantizar que las solicitudes HTTP sean lo más rápidas posible cuando se crean.
152 | De esta forma,
153 | una página se puede representar antes de que el usuario especifique explícitamente que quiere dirigirse hacia ella.
154 | La página puede estar disponible cuando el usuario la seleccione,
155 | lo cual hará que se cargue al instante.
156 |
157 | Si bien la representación previa puede aplicarse a todo el contenido web,
158 | 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
159 | y no se representan los objetos que puedan ser pesados en términos de uso de CPU.
160 |
161 | Cuando los documentos de AMP se representan previamente para la carga instantánea,
162 | solo se descargan los recursos que están en la parte superior de la página.
163 | A su vez, aquellos recursos que bajo las mismas circunstancias pudieran
164 | implicar una alta exigencia para el CPU (como iframes de terceros) no se descargarán.
165 |
166 | Obtén más información sobre la
167 | [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).
168 |
169 | ## Se agiliza el sistema de AMP
170 | El sistema de AMP es de código abierto.
171 | Necesitamos tu ayuda para que sea aún más rápido.
172 | Entérate de [cómo contribuir](/docs/support/contribute.html).
173 |
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/analytics_amp/analytics_basics.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: "Analytics: the Basics"
3 | $order: 0
4 | toc: true
5 | ---
6 |
7 | Start here to learn the basics about AMP analytics.
8 |
9 | [TOC]
10 |
11 | ## Use amp-pixel or amp-analytics?
12 |
13 | AMP provides two components to meet your analytics and measurement needs:
14 | [amp-pixel](/docs/reference/amp-pixel.html) and
15 | [amp-analytics](/docs/reference/extended/amp-analytics.html).
16 | Both options send analytics data to a defined endpoint.
17 |
18 | If you are looking for behavior like a simple
19 | [tracking pixel](https://en.wikipedia.org/wiki/Web_beacon#Implementation),
20 | the `amp-pixel` component provides basic page view tracking;
21 | page view data gets sent to a defined URL.
22 | Some integrations with a vendor may call for this component,
23 | in which case they will specify the exact URL endpoint.
24 |
25 | For most analytics solutions, use `amp-analytics`.
26 | Page view tracking works in `amp-analytics` too.
27 | But you can also track user engagement with any type of page content,
28 | including clicks on links and buttons.
29 | And you can measure how far on the page the user scrolled,
30 | whether or not the user engaged with social media, and more
31 | (see
32 | [Deep Dive into AMP Analytics](/docs/guides/analytics/deep_dive_analytics.html)).
33 |
34 | As part of integrating with the AMP platform,
35 | providers have offered pre-defined `amp-analytics` configurations
36 | so that it's easy to capture data and push to their tracking tools.
37 | Access vendor documentation from the
38 | [amp-analytics specification](/docs/reference/extended/amp-analytics.html).
39 |
40 | You can use both `amp-pixel` and `amp-analytics` in your pages:
41 | `amp-pixel` for simple page view tracking,
42 | and `amp-analytics` for everything else.
43 | You can also add multiples of each tag.
44 | If you're working with multiple analytics providers,
45 | you will need one tag per solution.
46 | Keep in mind that simpler AMP pages are better for users,
47 | so if you don’t need the extra tags, don’t use them.
48 |
49 | ## Create a simple analytics configuration
50 |
51 | Learn how to create a simple
52 | [amp-pixel](/docs/reference/amp-pixel.html) and
53 | [amp-analytics](/docs/reference/extended/amp-analytics.html) configuration.
54 |
55 | ### Simple amp-pixel configuration
56 |
57 | To create a simple `amp-pixel` configuration,
58 | insert something like the following into the body of your AMP page:
59 |
60 | [sourcecode:html]
61 | <amp-pixel src="https://foo.com/pixel?RANDOM"></amp-pixel>
62 | [/sourcecode]
63 |
64 | In this example,
65 | the page view data gets sent to the defined URL, along with a random number.
66 | The `RANDOM` variable is one of many
67 | [substitution variables in the AMP platform](https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md).
68 | Learn more about
69 | [Variable substitution](/docs/guides/analytics/analytics_basics.html#variable-substitution) here.
70 |
71 | The [amp-pixel](/docs/reference/amp-pixel.html)
72 | component is built-in,
73 | so you won't need an inclusion declaration like you do
74 | for AMP's extended components, including `amp-analytics`.
75 | But you should place the `amp-pixel` tag as close as possible
76 | to the start of your `<body>`.
77 | The tracking pixel will only fire when the tag comes into view itself.
78 | If `amp-pixel` is positioned near the bottom of the page,
79 | it may not fire.
80 |
81 | ### Simple amp-analytics configuration
82 |
83 | To create a simple
84 | [amp-analytics](/docs/reference/extended/amp-analytics.html) configuration,
85 | you must first include this `custom-element` declaration
86 | in the `<head>` of the AMP document (see also
87 | [Component inclusion declaration](/docs/reference/extended.html#component-inclusion-declaration)):
88 |
89 | [sourcecode:html]
90 | <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
91 | [/sourcecode]
92 |
93 | The following example is similar to the [`amp-pixel` example](/docs/guides/analytics/analytics_basics.html#simple-amp-pixel-configuration).
94 | Everytime a page is visible,
95 | the trigger event fires, and
96 | sends the pageview data to a defined URL along with a random ID:
97 |
98 | [sourcecode:html]
99 | <amp-analytics>
100 | <script type="application/json">
101 | {
102 | "requests": {
103 | "pageview": "https://foo.com/pixel?RANDOM",
104 | },
105 | "triggers": {
106 | "trackPageview": {
107 | "on": "visible",
108 | "request": "pageview"
109 | }
110 | }
111 | }
112 | </script>
113 | </amp-analytics>
114 | [/sourcecode]
115 |
116 | In the above example, we have defined a request called pageview to be https://foo.com/pixel?RANDOM. As discussed earlier, RANDOM is substituted by a random number, so the request will actually end up looking like https://foo.com/pixel?0.23479283687235653498734.
117 |
118 | When the page becomes visible
119 | (as specified by the use of the trigger keyword `visible`),
120 | an event triggers and the `pageview` request is sent.
121 | The triggers attribute determines when the pageview request fires.
122 | Learn more about [requests and triggers](/docs/guides/analytics/deep_dive_analytics.html#requests-triggers--transports).
123 |
124 | ## Variable substitution
125 |
126 | Both the [amp-pixel](/docs/reference/amp-pixel.html) and
127 | [amp-analytics](/docs/reference/extended/amp-analytics.html) components
128 | allow all standard URL variable substitutions (see
129 | [AMP HTML Variable Substitutions](https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md)).
130 | In the following example,
131 | the page view request is sent to the URL,
132 | along with the current AMP document’s canonical URL, its title, and a
133 | [client ID](/docs/guides/analytics/analytics_basics.html#user-identification):
134 |
135 | [sourcecode:html]
136 | <amp-pixel src="https://example.com/analytics?url=${canonicalUrl}&title=${title}&clientId=${clientId(site-user-id)}"></amp-pixel>
137 | [/sourcecode]
138 |
139 | Due to its simplicity,
140 | the `amp-pixel` tag can only include variables defined by the platform
141 | or that the AMP runtime can parse from the AMP page.
142 | In the above example,
143 | the platform populates the values for both
144 | `canonicalURL` and `clientId(site-user-id)`.
145 | The `amp-analytics` tag can include the same variables as `amp-pixel`,
146 | as well as uniquely defined variables inside the tag configuration.
147 |
148 | Use the format `${varName}` in a request string for a page
149 | or platform-defined variable.
150 | The `amp-analytics` tag will replace the template with its actual value
151 | at the time of construction of the analytics request (see also
152 | [Variables supported in amp-analytics](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/analytics-vars.md)).
153 |
154 | In the following `amp-analytics` example,
155 | the page view request is sent to the URL,
156 | with additional data extracted from variable substitutions,
157 | some provided by the platform,
158 | some defined inline,
159 | within the `amp-analytics` configuration:
160 |
161 | [sourcecode:html]
162 | <amp-analytics>
163 | <script type="application/json">
164 | {
165 | "requests": {
166 | "pageview":"https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}&clientId=${clientId(site-user-id)}",
167 | },
168 | "vars": {
169 | "account": "ABC123",
170 | },
171 | "triggers": {
172 | "someEvent": {
173 | "on": "visible",
174 | "request": "pageview",
175 | "vars": {
176 | "title": "My homepage",
177 | }
178 | }
179 | }
180 | }
181 | </script>
182 | </amp-analytics>
183 | [/sourcecode]
184 |
185 | In the above example,
186 | the variables, `account` and `title` are defined
187 | in the `amp-analytics` configuration.
188 | The `canonicalUrl` and `clientId` variables aren't defined in the configuration,
189 | so their values get substituted by the platform.
190 |
191 | **Important:** Variable substitution is flexible;
192 | you can have the same variables defined in different locations,
193 | and the AMP runtime will parse the values in this order of precedence
194 | (see [Variable substitution ordering](/docs/guides/analytics/deep_dive_analytics.html#variable-substitution-ordering)).
195 |
196 | ## User identification
197 |
198 | Websites use cookies to store information specific to a user in the browser.
199 | Cookies can be used to tell that a user has visited a site before.
200 | In AMP,
201 | pages can be served from either a publisher's website or a cache
202 | (like the Google AMP Cache).
203 | The publisher's website and the cache are likely to have different domains.
204 | For security reasons,
205 | browsers can (and often will) limit access to another domain’s cookies
206 | (see also
207 | [Tracking users across origins](https://github.com/ampproject/amphtml/blob/master/spec/amp-managing-user-state.md)).
208 |
209 | By default,
210 | AMP will manage the provision of a client ID whether the page is accessed from the publisher's original website or through a cache.
211 | The AMP-generated client ID has a value of `"amp-"`
212 | followed by a random `base64` encoded string and remains the same
213 | for the user if that same user visits again.
214 |
215 | AMP manages reading and writing of the client ID in all cases.
216 | This is particularly notable in the case when a page is served
217 | via a cache or otherwise shown outside the viewing context
218 | of the publisher's original site.
219 | In this circumstance, access to the publisher site's cookies is unavailable.
220 |
221 | When an AMP page is served from a publisher's site,
222 | the client ID framework that AMP uses can be told about a fallback cookie
223 | to look for and use.
224 | In this case,
225 | the `cid-scope-cookie-fallback-name` argument of the `clientId` variable
226 | is interpreted as a cookie name.
227 | The formatting may appear as either
228 | `CLIENT_ID(cid-scope-cookie-fallback-name)` or
229 | `${clientId(cid-scope-cookie-fallback-name)}`.
230 |
231 | For example:
232 |
233 | [sourcecode:html]
234 | <amp-pixel src="https://foo.com/pixel?cid=CLIENT_ID(site-user-id-cookie-fallback-name)"></amp-pixel>
235 | [/sourcecode]
236 |
237 | If AMP finds that this cookie is set,
238 | then the client ID substitution will return the cookie's value.
239 | If the AMP finds that this cookie is not set,
240 | then AMP will generate a value of the form `amp-` followed
241 | by a random base64 encoded string.
242 |
243 | Learn more about client ID substitution,
244 | including how to add an optional user notification ID, in
245 | [Variables supported in AMP analytics](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/analytics-vars.md).
246 |
```
--------------------------------------------------------------------------------
/content/learn/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Accélération de la performance avec AMP
3 | ---
4 | [TOC]
5 |
6 | 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 :
7 |
8 | 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.
9 |
10 | <amp-youtube
11 | data-videoid="hVRkG1CQScA"
12 | layout="responsive"
13 | width="480" height="270">
14 | </amp-youtube>
15 |
16 | ## Autoriser uniquement les scripts asynchrones
17 |
18 | JavaScript est puissant.
19 | Il peut modifier pratiquement tous les aspects de la page,
20 | mais aussi bloquer la construction DOM et retarder le rendu de la page
21 | (voir aussi [Ajouter l'interactivité avec JavaScript](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/adding-interactivity-with-javascript)).
22 | Pour empêcher JavaScript de retarder le rendu de la page,
23 | AMP autorise uniquement les scripts JavaScript asynchrones.
24 |
25 | Les pages AMP ne peuvent inclure aucun autre JavaScript rédigé.
26 | Plutôt que d'utiliser JavaScript,
27 | les fonctions de page interactives sont traitées dans des éléments AMP personnalisés.
28 | Les éléments AMP personnalisés peuvent intégrer du JavaScript,
29 | mais ils sont conçus de sorte à ne pas impacter la performance.
30 |
31 | Même si des scripts JS tiers sont autorisés dans les iframes,
32 | ils ne peuvent pas bloquer le rendu.
33 | Par exemple, si un script JS tiers utilise l'
34 | [API `document.write` à fort impact négatif sur la performance](http://www.stevesouders.com/blog/2012/04/10/dont-docwrite-scripts/),
35 | il ne bloque pas le rendu de la page principale.
36 |
37 | ## Dimensionner toutes les ressources de manière statique
38 |
39 | Les ressources externes, comme les images, les publicités ou les iframes, doivent déclarer leur taille dans le code HTML
40 | pour permettre à AMP de déterminer la taille et la position de chaque élément avant leur téléchargement.
41 | AMP charge la disposition de la page sans attendre le téléchargement des ressources.
42 |
43 | AMP dissocie la disposition des documents de celle des ressources.
44 | Une seule requête HTTP est nécessaire pour mettre en page le document entier
45 | ([+ les polices](#font-triggering-must-be-efficient)).
46 | Dans la mesure où AMP est optimisé pour éviter les coûteux recalculs de style et dispositions dans le navigateur,
47 | aucune re-disposition n'est nécessaire lors du chargement des ressources.
48 |
49 | ## Empêcher les mécanismes d'extension de bloquer le rendu
50 |
51 | AMP empêche les mécanismes d'extension de bloquer le rendu des pages.
52 | AMP prend en charge les extensions d'objets tels que les
53 | [mosaïques](/docs/reference/extended/amp-lightbox.html), les
54 | [intégrations Instagram](/docs/reference/extended/amp-instagram.html), les
55 | [tweets](/docs/reference/extended/amp-twitter.html), etc.
56 | Même si ces extensions exigent des requêtes HTTP supplémentaires,
57 | ces dernières ne bloquent ni la mise en page ni le rendu des pages.
58 |
59 | Toute page qui utilise un script personnalisé doit indiquer au système AMP
60 | qu'elle contiendra ultérieurement une balise personnalisée.
61 | Par exemple, le script [`amp-iframe`](/docs/reference/extended/amp-iframe.html)
62 | indique au système qu'il y aura une balise `amp-iframe`.
63 | AMP crée le cadre iframe avant même de savoir ce qu'il contiendra :
64 |
65 | [sourcecode:html]
66 | <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
67 | [/sourcecode]
68 |
69 | ## Écarter le JavaScript tiers du processus principal
70 |
71 | Le script JS tiers aime utiliser le chargement JS synchrone.
72 | Il aime également appliquer `document.write` à d'autres scripts synchrones.
73 | Par exemple, si vous avez cinq publicités, chacune exécutant
74 | trois chargements synchrones avec une connexion
75 | d'une latence d'une seconde, le chargement JS prend à lui seul 15 secondes.
76 |
77 | Les pages AMP autorisent le JavaScript tiers, mais seulement dans des iframes placés en sandbox.
78 | Limité aux iframes, ces scripts ne peuvent pas bloquer l'exécution de la page principale.
79 | Même s'ils déclenchent plusieurs recalculs de style,
80 | le DOM de leurs iframes minuscules est très réduit.
81 |
82 | Les recalculs de style et les dispositions dépendent de la taille du DOM ;
83 | aussi, les recalculs d'iframe sont très rapides
84 | comparés aux recalculs de styles et à la disposition de la page.
85 |
86 | ## Tout le style CSS doit être en ligne et limité en taille
87 |
88 | Le CSS bloque tout le rendu. Il bloque le chargement des pages et a tendance à « gonfler ».
89 | Dans les pages AMP HTML, seuls les styles en ligne sont autorisés.
90 | Une ou souvent plusieurs requêtes HTTP sont ainsi supprimées du processus de rendu principal,
91 | par rapport à la plupart des pages Web.
92 |
93 | De plus, la taille des feuilles de style en ligne est limitée à 50 Ko maximum.
94 | Même si cette taille est suffisante pour les pages très complexes,
95 | le créateur de la page doit malgré tout appliquer un style CSS propre.
96 |
97 | ## Le déclenchement de police doit être efficace
98 |
99 | Les polices Web étant très volumineuses,
100 | l'[optimisation des polices Web](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization)
101 | est essentielle pour la performance.
102 | Sur une page standard ne contenant que peu de scripts synchrones et de feuilles de style externes,
103 | le navigateur doit attendre sans fin le téléchargement de ces énormes polices.
104 |
105 | Le système AMP ne déclare aucune requête HTTP avant le début du téléchargement des polices.
106 | En effet, tous les scripts JS dans AMP contiennent l'attribut « asynch »
107 | et seules les feuilles de style en ligne sont autorisées.
108 | Aucune requête HTTP n'empêche donc le navigateur de télécharger les polices.
109 |
110 | ## Réduire au minimum les recalculs de style
111 |
112 | Dès lors que vous effectuez des mesures, de coûteux recalculs de style sont exécutés
113 | car le navigateur doit définir la disposition de la page entière.
114 | Dans les pages AMP, toutes les lectures DOM se produisent avant toutes les écritures.
115 | Ainsi, un seul recalcul de style maximum est effectué par cadre.
116 |
117 | Pour en savoir plus sur l'impact des recalculs de style et de disposition, voir
118 | [performances de rendu](https://developers.google.com/web/fundamentals/performance/rendering/).
119 |
120 | ## Exécuter uniquement les animations accélérées par GPU
121 |
122 | La seule façon d'obtenir des optimisations rapides, c'est de les exécuter sur le GPU.
123 | Le GPU connaît les couches, il sait comment exécuter certaines choses sur ces couches,
124 | il peut les déplacer, il peut les diminuer, mais il ne peut pas actualiser
125 | la disposition de la page. Il laisse cette tâche au navigateur, ce qui n'est pas une bonne chose.
126 |
127 | Les règles concernant le CSS lié aux animations garantissent que ces dernières peuvent être accélérées par GPU.
128 | Tout particulièrement, AMP autorise les animations et transitions uniquement sur les propriétés transform et opacity
129 | ; aucune disposition de la page n'est ainsi requise.
130 | En savoir plus sur
131 | 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).
132 |
133 | ## Hiérarchiser le chargement des ressources
134 |
135 | AMP contrôle tous les téléchargements de ressources : il hiérarchise
136 | le chargement, ne chargeant que ce qui est nécessaire, et pré-extrait les ressources les plus lentes à charger.
137 |
138 | Lorsqu'AMP télécharge des ressources, il optimise ces téléchargements
139 | de sorte que les ressources actuellement les plus importantes soient téléchargées en premier lieu.
140 | Les images et publicités ne sont téléchargées que si elles seront vues par l'utilisateur,
141 | dans la partie au-dessus de la ligne de flottaison, ou si l'utilisateur fera défiler rapidement la page pour y accéder.
142 |
143 | De plus, AMP pré-extrait les ressources les plus lentes à charger.
144 | Les ressources sont chargées le plus tard possible, mais pré-extraites le plus tôt possible.
145 | De cette façon, le chargement est très rapide ; le processeur
146 | n'est utilisé que lorsque les ressources sont effectivement affichées aux utilisateurs.
147 |
148 | ## Charger les pages instantanément
149 |
150 | La nouvelle [API de pré-connexion](http://www.w3.org/TR/resource-hints/#dfn-preconnect)
151 | est largement utilisée pour garantir des requêtes HTTP aussi rapides que possible dès leur lancement.
152 | Ainsi,
153 | une page peut être rendue avant même que l'utilisateur n'indique explicitement qu'il aimerait y accéder.
154 | La page peut être déjà disponible avant l'instant où l'utilisateur la sélectionne effectivement,
155 | ce qui permet un chargement instantané.
156 |
157 | Alors que tout contenu Web peut être pré-rendu,
158 | 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
159 | dans la partie au-dessus de la ligne de flottaison et n'inclut pas les éléments gourmands en processeur.
160 |
161 | Lorsque les documents AMP sont pré-rendus pour un chargement instantané,
162 | seules les ressources situées dans la partie au-dessus de la ligne de flottaison sont effectivement téléchargées.
163 | Lorsque les documents AMP sont pré-rendus pour un chargement instantané,
164 | les ressources susceptibles d'utiliser une grande quantité de ressources du processeur (telles que les iframes tiers) ne sont pas téléchargées.
165 |
166 | En savoir plus sur
167 | 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).
168 |
169 | ## Contribuer à l'accélération d'AMP
170 | AMP est une initiative open-source.
171 | Nous avons besoin de votre aide pour rendre AMP encore plus rapide.
172 | Découvrez [comment contribuer](/docs/support/contribute.html).
173 |
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/responsive_amp/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Obsługiwane układy
3 | ---
4 |
5 | Atrybut `layout=responsive` zapewnia elastyczność elementów umieszczanych na stronie.
6 |
7 | [TOC]
8 |
9 | ## Obsługiwane wartości atrybutu układu
10 |
11 | Domyślnie należy stosować układy elastyczne.
12 |
13 | Pełna lista obsługiwanych wartości atrybutów układu:
14 |
15 | <table>
16 | <thead>
17 | <tr>
18 | <th class="col-twenty" data-th="Layout type">Typ układu</th>
19 | <th class="col-twenty" data-th="Width/height required">Wymagana szerokość/wysokość</th>
20 | <th data-th="Behavior">Zachowanie</th>
21 | </tr>
22 | </thead>
23 | <tbody>
24 | <tr>
25 | <td class="col-twenty" data-th="Layout type"><code>nodisplay</code></td>
26 | <td class="col-twenty" data-th="Description">Nie</td>
27 | <td data-th="Behavior">Element niewyświetlany. Ten układ można stosować dla każdego elementu AMP. Komponent nie zajmuje miejsca na ekranie, tak jakby nie miał stylu wyświetlania. Element powinien się wyświetlać wskutek działania użytkownika, np. [<code>amp-lightbox</code>](/docs/reference/extended/amp-lightbox.html).</td>
28 | </tr>
29 | <tr>
30 | <td class="col-twenty" data-th="Layout type"><code>fixed</code></td>
31 | <td class="col-twenty" data-th="Description">Tak</td>
32 | <td data-th="Behavior">Nieelastyczny element o stałej szerokości i wysokości. Jedyne wyjątki to elementy [<code>amp-pixel</code>](/docs/reference/amp-pixel.html) i [<code>amp-audio</code>](/docs/reference/extended/amp-audio.html).</td>
33 | </tr>
34 | <tr>
35 | <td class="col-twenty" data-th="Layout type"><code>responsive</code></td>
36 | <td class="col-twenty" data-th="Description">Tak</td>
37 | <td data-th="Behavior">Rozmiar elementu jest dopasowywany do szerokości kontenera, a jego wysokość jest automatycznie dopasowywana do współczynnika proporcji określonego za pomocą atrybutów width oraz height. Ten układ bardzo dobrze współpracuje z większością elementów AMP, w tym z elementami [<code>amp-img</code>](/docs/reference/amp-img.html) oraz [<code>amp-video</code>](/docs/reference/amp-video.html). Ilość dostępnego miejsca zależy od elementu nadrzędnego i można ją również dostosowywać za pomocą stylu <code>max-width</code>.</td>
38 | </tr>
39 | <tr>
40 | <td class="col-twenty" data-th="Layout type"><code>fixed-height</code></td>
41 | <td class="col-twenty" data-th="Description">Tylko wysokość</td>
42 | <td data-th="Behavior">Element zajmuje dostępne dla niego miejsce, ale jego wysokość się nie zmienia. Ten układ bardzo dobrze współpracuje z elementami takimi jak [<code>amp-carousel</code>](/docs/reference/extended/amp-carousel.html), zawierającymi treść zorientowaną poziomo. Atrybut <code>width</code> nie może występować w kodzie lub musi mieć wartość <code>auto</code>.</td>
43 | </tr>
44 | <tr>
45 | <td class="col-twenty" data-th="Layout type"><code>fill</code></td>
46 | <td class="col-twenty" data-th="Description">Nie</td>
47 | <td data-th="Behavior">Element zajmuje dostępne dla niego miejsce zarówno dla atrybutów szerokości oraz wysokości. Innymi słowy układ elementu fill odpowiada elementowi nadrzędnemu.</td>
48 | </tr>
49 | <tr>
50 | <td class="col-twenty" data-th="Layout type"><code>container</code></td>
51 | <td class="col-twenty" data-th="Description">Nie</td>
52 | <td data-th="Behavior">Element zezwala elementom podrzędnym na samodzielne definiowanie rozmiaru, podobnie jak zwykły tag HTML <code>div</code>. Komponent nie powinien mieć żadnego określonego układu, tylko zachowywać się jak kontener. Jego elementy podrzędne renderują się błyskawicznie.</td>
53 | </tr>
54 | </tbody>
55 | </table>
56 |
57 | ### Co się dzieje, jeśli szerokość i wysokość nie są zdefiniowane?
58 |
59 | Jeśli atrybuty `width` lub `height` nie są zdefiniowane, standard AMP w kilku przypadkach nada im wartości domyślne w następujący sposób:
60 |
61 | * [`amp-pixel`](/docs/reference/amp-pixel.html): szerokość i wysokość przyjmują wartość 0.
62 | * [`amp-audio`](/docs/reference/extended/amp-audio.html): domyślne wartości dla szerokości i wysokości są wnioskowane z danych przeglądarki.
63 |
64 | ### Co się dzieje, jeśli atrybut układu nie jest zdefiniowany?
65 |
66 | Zachowanie atrybutu jest określane w następujący sposób:
67 |
68 | * Jeśli atrybut `height` jest obecny, a brakuje atrybutu `width` lub ma on wartość `auto`, przyjmowany jest układ `fixed-height`.
69 | * Jeśli atrybuty `width` i `height` są obecne z atrybutem `sizes`, przyjmowany jest układ `responsive`.
70 | * Jeśli atrybuty `width` i `height` są obecne, przyjmowany jest układ `fixed`.
71 | * Jeśli atrybuty `width` i `height` nie są obecne, przyjmowany jest układ `container`.
72 |
73 | ## Zapytania mediów i atrybuty @media
74 |
75 | Atrybut [`@media`](https://developer.mozilla.org/pl-PL/docs/Web/CSS/@media) służy do kontroli wyglądu i zachowania układu, tak jak w przypadku każdej innej strony.
76 | Gdy okno przeglądarki zmienia rozmiar lub orientację, zapytania mediów są ponownie przeliczane, a elementy są ukrywane i wyświetlane na podstawie nowych wyników.
77 |
78 | Dowiedz się więcej na temat kontrolowania układu za pomocą zapytań mediów z artykułu na temat [wykorzystania mediów CSS do uzyskania elastyczności](https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries?hl=pl).
79 |
80 | Atrybut `media` jest dodatkową funkcją z zakresu elastycznego projektowania stron dostępną w standardzie AMP.
81 | Tego atrybutu można używać w odniesieniu do każdego elementu AMP.
82 | Działa on podobnie do zapytań mediów stosowanych w globalnym arkuszu stylów,
83 | jednak ma wpływ tylko na określone elementy na pojedynczej stronie.
84 |
85 | Na przykład mamy tutaj 2 obrazy z wzajemnie wykluczającymi się zapytaniami mediów.
86 |
87 | [sourcecode:html]
88 | <amp-img
89 | media="(min-width: 650px)"
90 | src="wide.jpg"
91 | width=466
92 | height=355
93 | layout="responsive" >
94 | </amp-img>
95 | [/sourcecode]
96 |
97 | W zależności od szerokości ekranu tylko jeden z nich zostanie pobrany i zrenderowany.
98 |
99 | [sourcecode:html]
100 | <amp-img
101 | media="(max-width: 649px)"
102 | src="narrow.jpg"
103 | width=527
104 | height=193
105 | layout="responsive" >
106 | </amp-img>
107 | [/sourcecode]
108 |
109 | ## Atrybut srcset i rozmiary
110 |
111 | Atrybut `srcset` służy do kontrolowania zasobów elementów na podstawie różnych zapytań mediów.
112 | W szczególności używa się go w przypadku wszystkich tagów [`amp-img`](/docs/reference/amp-img.html) do wskazywania, których zasobów obrazu użyć w zależności od rozmiaru ekranu.
113 |
114 | W tym prostym przykładzie atrybut `srcset` określa, który obraz zostanie użyty, na podstawie szerokości ekranu.
115 | Deskryptor `w` informuje przeglądarkę o szerokości każdego obrazu na liście:
116 |
117 | [sourcecode:html]
118 | <amp-img
119 | src="wide.jpg"
120 | srcset="wide.jpg" 640w,
121 | "narrow.jpg" 320w >
122 | </amp-img>
123 | [/sourcecode]
124 |
125 | **Uwaga:** standard AMP obsługuje deskryptor `w` we wszystkich przeglądarkach.
126 |
127 | Aby dowiedzieć się więcej na temat tworzenia elastycznych obrazów za pomocą atrybutu `srcset`, przeczytaj artykuł [Using Responsive Images (Now)](http://alistapart.com/article/using-responsive-images-now).
128 |
129 | Możesz także użyć atrybutu `sizes` w połączeniu z atrybutem `srcset`.
130 | Atrybut `sizes` opisuje sposób obliczania rozmiaru elementu w oparciu o dowolne zapytanie mediów.
131 | Klient użytkownika, na podstawie obliczonego rozmiaru elementu, dobiera najbardziej odpowiednie źródło podane przez atrybut `srcset`.
132 |
133 | Na przykład:
134 |
135 | [sourcecode:html]
136 | <amp-img
137 | src="wide.jpg"
138 | srcset="wide.jpg" 640w,
139 | "narrow.jpg" 320w
140 | sizes="(min-width: 650px) 50vw, 100vw" >
141 | </amp-img>
142 | [/sourcecode]
143 |
144 | Atrybut `sizes` definiuje szerokość elementu do 50% rozmiaru widocznego obszaru, gdy ma on co najmniej 650 pikseli.
145 | Na przykład jeśli widoczny obszar miałby 800 pikseli, szerokość elementu wynosiłaby 400 pikseli.
146 | Następnie przeglądarka wybiera zasób `srcset` odpowiadający wartości 400 pikseli, przyjmując 1 jako proporcję piksela. W tym przypadku będzie to `narrow.jpg` (320 pikseli).
147 |
148 | **Ważne:** gdy atrybut rozmiaru jest określony wraz z szerokością i wysokością, układ domyślnie przyjmuje wartość `responsive`.
149 |
150 | Więcej informacji na temat sposobu porównywania zapytań mediów przez atrybuty `sizes` i `srcset` zawiera post na blogu dotyczący [atrybutów srcset i sizes](https://ericportis.com/posts/2014/srcset-sizes/).
151 |
152 | ## Korzystanie z symboli i kreacji zastępczych
153 |
154 | ### symbol zastępczy
155 |
156 | Element oznaczony za pomocą atrybutu `placeholder` pełni funkcję symbolu zastępującego nadrzędny element AMP.
157 | Jeśli zostanie określony, element `placeholder` musi być bezpośrednim elementem podrzędnym elementu AMP.
158 |
159 | [sourcecode:html]
160 | <amp-anim src="animated.gif" width=466 height=355 layout="responsive" >
161 | <amp-img placeholder src="preview.png" layout="fill"></amp-img>
162 | </amp-anim>
163 | [/sourcecode]
164 |
165 | Domyślnie symbol zastępczy jest natychmiast wyświetlany zamiast elementu AMP nawet w przypadku niepobrania lub braku inicjalizacji zasobów elementu AMP.
166 | Po skonfigurowaniu element AMP zwykle ukrywa symbol zastępczy i wyświetla treść.
167 |
168 | **Uwaga:** symbol zastępczy nie musi być elementem AMP. Może nim być dowolny element HTML.
169 |
170 | ### kreacja zastępcza
171 |
172 | Atrybut `fallback` służy do wskazywania zachowania kreacji zastępczej w odniesieniu do dowolnego elementu nieobsługiwanego przez przeglądarkę.
173 | Na przykład atrybut `fallback` służy do informowania użytkownika, że przeglądarka nie obsługuje określonej funkcji:
174 |
175 | [sourcecode:html]
176 | <amp-video width=400 height=300 src="https://yourhost.com/videos/myvideo.mp4"
177 | poster="myvideo-poster.jpg" >
178 | <div fallback>
179 | <p>Your browser doesn’t support HTML5 video.</p>
180 | </div>
181 | </amp-video>
182 | [/sourcecode]
183 |
184 | Atrybut `fallback` można ustawić dla dowolnego atrybutu HTML, nie tylko elementów AMP.
185 | Jeśli jest obecny w kodzie, element `fallback` musi być bezpośrednim elementem podrzędnym elementu AMP.
186 |
187 | ### noloading
188 |
189 | Wiele elementów AMP znajduje się na białej liście, by umożliwić wyświetlanie „wskaźnika ładowania”, który jest podstawowym animowanym elementem informującym o niepełnym wczytaniu elementu.
190 | Można wyłączyć takie zachowanie elementów za pomocą atrybutu `noloading`.
191 |
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/responsive_amp/control_layout@pt_BR.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Layouts compatíveis
3 | ---
4 |
5 | Torne seus elementos responsivos;
6 | inclua `layout=responsive`.
7 |
8 | [TOC]
9 |
10 | ## Valores compatíveis com o atributo de layout
11 |
12 | Por padrão,
13 | use os layouts responsivos.
14 |
15 | Veja esta lista completa de valores compatíveis com o atributo de layout:
16 |
17 | <table>
18 | <thead>
19 | <tr>
20 | <th class="col-twenty" data-th="Layout type">Tipo de layout</th>
21 | <th class="col-twenty" data-th="Width/height required">Largura/altura necessária</th>
22 | <th data-th="Behavior">Comportamento</th>
23 | </tr>
24 | </thead>
25 | <tbody>
26 | <tr>
27 | <td class="col-twenty" data-th="Layout type"><code>nodisplay</code></td>
28 | <td class="col-twenty" data-th="Description">Não</td>
29 | <td data-th="Behavior">Elemento não exibido. Pode ser aplicado a cada elemento da AMP. O componente não ocupa espaço na tela, como se o seu estilo de exibição fosse "none". A ação esperada é que o elemento seja exibido mediante ação do usuário, por exemplo, <a href="/docs/reference/extended/amp-lightbox.html"><code>amp-lightbox</code></a>.</td>
30 | </tr>
31 | <tr>
32 | <td class="col-twenty" data-th="Layout type"><code>fixed</code></td>
33 | <td class="col-twenty" data-th="Description">Sim</td>
34 | <td data-th="Behavior">O elemento tem largura e altura fixas sem suporte à responsividade. As únicas exceções são os elementos <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>
35 | </tr>
36 | <tr>
37 | <td class="col-twenty" data-th="Layout type"><code>responsive</code></td>
38 | <td class="col-twenty" data-th="Description">Sim</td>
39 | <td data-th="Behavior">O elemento é redimensionado para a largura do seu elemento contêiner e redimensiona a sua altura automaticamente de acordo com a proporção determinada pelos atributos de largura e altura. Este layout funciona muito bem na maioria dos elementos de AMP, incluindo <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>. O espaço disponível depende do elemento principal e também pode ser personalizado com a CSS <code>max-width</code>.</td>
40 | </tr>
41 | <tr>
42 | <td class="col-twenty" data-th="Layout type"><code>fixed-height</code></td>
43 | <td class="col-twenty" data-th="Description">Somente altura</td>
44 | <td data-th="Behavior">O elemento ocupa o espaço disponibilizado para ele, mas mantém a altura inalterada. Este layout funciona bem para elementos como <a href="/docs/reference/extended/amp-carousel.html"><code>amp-carousel</code></a>, que envolvem conteúdo posicionado horizontalmente. O atributo <code>width</code> não deve estar presente ou deve ser igual a <code>auto</code>.</td>
45 | </tr>
46 | <tr>
47 | <td class="col-twenty" data-th="Layout type"><code>fill</code></td>
48 | <td class="col-twenty" data-th="Description">Não</td>
49 | <td data-th="Behavior">O elemento ocupa o espaço disponibilizado para ele, tanto em largura quanto em altura. Em outras palavras, o layout de um elemento de preenchimento corresponde ao layout pai dele.</td>
50 | </tr>
51 | <tr>
52 | <td class="col-twenty" data-th="Layout type"><code>container</code></td>
53 | <td class="col-twenty" data-th="Description">Não</td>
54 | <td data-th="Behavior">O elemento permite que seus derivados definam seu tamanho, quase como um <code>div</code> de HTML normal. Supõe-se que o componente não tem um layout próprio específico e apenas atua como um contêiner. Seus derivados são renderizados imediatamente.</td>
55 | </tr>
56 | </tbody>
57 | </table>
58 |
59 | ### E se largura e altura estiverem indefinidas?
60 |
61 | Em alguns casos, se `width` ou `height` não forem especificadas,
62 | o tempo de execução da AMP poderá adotar os seguintes valores padrão:
63 |
64 | * [`amp-pixel`](/docs/reference/amp-pixel.html): largura e altura adotam o padrão de 0.
65 | * [`amp-audio`](/docs/reference/extended/amp-audio.html): largura e altura padrão são inferidas a partir do navegador.
66 |
67 | ### E se o atributo de layout não estiver definido?
68 |
69 | O comportamento do layout é determinado assim:
70 |
71 | * Se `height` estiver presente e `width` estiver ausente ou for igual a `auto`, o layout `fixed-height` será assumido.
72 | * Se os atributos `width` ou `height` estiverem presentes juntamente com o atributo `sizes`, o layout `responsive` será assumido.
73 | * Se os atributos `width` ou `height` estiverem presentes, o layout `fixed` será assumido.
74 | * Se `width` e `height` não estiverem presentes, o layout `container` será assumido.
75 |
76 | ## Uso de @media e mídia
77 |
78 | Use [`@media`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media)
79 | para controlar a aparência e o comportamento do layout da página, assim como você faria em outro site.
80 | Quando a janela do navegador muda de tamanho ou de orientação,
81 | as consultas de mídia são reavaliadas e os elementos são escondidos e mostrados
82 | com base nos novos resultados.
83 |
84 | Saiba mais sobre como controlar o layout aplicando consultas de mídia em
85 | [Usar consultas de mídia CSS para gerar responsividade](https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries?hl=en).
86 |
87 | Outro recurso extra para a geração de um design responsivo disponibilizado na AMP é o atributo `media`.
88 | Esse atributo pode ser usado em cada elemento da AMP.
89 | Ele funciona de modo semelhante às consultas de mídia em sua folha de estilo global,
90 | mas impacta apenas esse determinado elemento em uma única página.
91 |
92 | Por exemplo, aqui temos duas imagens com consultas de mídia que se excluem mutuamente.
93 |
94 | [sourcecode:html]
95 | <amp-img
96 | media="(min-width: 650px)"
97 | src="wide.jpg"
98 | width=466
99 | height=355
100 | layout="responsive" >
101 | </amp-img>
102 | [/sourcecode]
103 |
104 | Dependendo da largura da tela, uma ou outra será buscada e processada.
105 |
106 | [sourcecode:html]
107 | <amp-img
108 | media="(max-width: 649px)"
109 | src="narrow.jpg"
110 | width=527
111 | height=193
112 | layout="responsive" >
113 | </amp-img>
114 | [/sourcecode]
115 |
116 | ## Uso de srcset e tamanhos
117 |
118 | Use o atributo `srcset` para controlar os recursos de um elemento
119 | com base em expressões de mídia variantes.
120 | Em particular, use-o em todas as tags [`amp-img`](/docs/reference/amp-img.html)
121 | para especificar quais recursos de imagem serão usados com base em tamanhos de tela diferentes.
122 |
123 | Neste exemplo simples,
124 | `srcset` especifica qual a imagem será usada conforme a largura da tela.
125 | O descritor `w` informa ao navegador a largura
126 | de cada imagem na lista:
127 |
128 | [sourcecode:html]
129 | <amp-img
130 | src="wide.jpg"
131 | srcset="wide.jpg" 640w,
132 | "narrow.jpg" 320w >
133 | </amp-img>
134 | [/sourcecode]
135 |
136 | **Observação:** a AMP é compatível com o descritor `w` em todos os navegadores.
137 |
138 | Saiba mais sobre a criação de imagens responsivas usando `srcset`
139 | em [Uso de imagens responsivas (agora)](http://alistapart.com/article/using-responsive-images-now).
140 |
141 | Você também pode usar o atributo `sizes` juntamente com `srcset`.
142 | O atributo `sizes` descreve como calcular o tamanho do elemento
143 | com base em qualquer expressão de mídia.
144 | Com base no tamanho calculado do elemento,
145 | o user agent seleciona a fonte mais relativa fornecida pelo atributo `srcset`.
146 |
147 | Considere o seguinte exemplo:
148 |
149 | [sourcecode:html]
150 | <amp-img
151 | src="wide.jpg"
152 | srcset="wide.jpg" 640w,
153 | "narrow.jpg" 320w
154 | sizes="(min-width: 650px) 50vw, 100vw" >
155 | </amp-img>
156 | [/sourcecode]
157 |
158 | O atributo `sizes` definirá a largura do elemento como 50% do tamanho da janela de visualização
159 | quando esta tiver 650 px ou mais.
160 | Por exemplo, se a janela de visualização tiver 800 px,
161 | a largura do elemento será definida como 400 px.
162 | O navegador então seleciona o recurso `srcset` relativo a 400 px,
163 | supondo que a proporção de pixels do dispositivo é de 1,
164 | que neste caso é `narrow.jpg` (320 px).
165 |
166 | **Importante:** quando o atributo de tamanhos é especificado juntamente com a largura e a altura,
167 | o layout assume o padrão de `responsive`.
168 |
169 | Saiba mais sobre os atributos `sizes` e `srcset` em comparação
170 | com as consultas de mídia nesta
171 | postagem do blog: [Srcset e tamanhos](https://ericportis.com/posts/2014/srcset-sizes/).
172 |
173 | ## Incluir marcadores de posição e substitutos
174 |
175 | ### placeholder
176 |
177 | O elemento marcado com o atributo `placeholder` atua
178 | como um marcador de posição para o elemento de AMP principal.
179 | Se especificado, um elemento `placeholder` deve ser um derivado direto do elemento da AMP.
180 |
181 | [sourcecode:html]
182 | <amp-anim src="animated.gif" width=466 height=355 layout="responsive" >
183 | <amp-img placeholder src="preview.png" layout="fill"></amp-img>
184 | </amp-anim>
185 | [/sourcecode]
186 |
187 | Por padrão, o marcador de posição é imediatamente mostrado para o elemento da AMP,
188 | mesmo que os recursos do elemento da AMP não tenham sido transferidos ou inicializados.
189 | Depois de pronto, o elemento da AMP normalmente esconde seu marcador de posição e mostra o conteúdo.
190 |
191 | **Observação:** o marcador de posição não precisa ser um elemento da AMP.
192 | Qualquer elemento HTML pode atuar como marcador de posição.
193 |
194 | ### fallback
195 |
196 | Use o atributo `fallback` para indicar o comportamento de substituição
197 | de qualquer elemento incompatível com o navegador.
198 | Por exemplo, use o atributo `fallback` para comunicar o usuário
199 | que o navegador não é compatível com um determinado recurso:
200 |
201 | [sourcecode:html]
202 | <amp-video width=400 height=300 src="https://yourhost.com/videos/myvideo.mp4"
203 | poster="myvideo-poster.jpg" >
204 | <div fallback>
205 | <p>Your browser doesn’t support HTML5 video.</p>
206 | </div>
207 | </amp-video>
208 | [/sourcecode]
209 |
210 | O atributo `fallback` pode ser definido em qualquer elemento HTML, e não apenas em elementos da AMP.
211 | Se especificado, o elemento `fallback` deve ser um derivado direto do elemento da AMP.
212 |
213 | ### noloading
214 |
215 | Muitos elementos da AMP estão na lista de permissões para a exibição de um "indicador de carregamento",
216 | ou seja, uma animação básica que mostra que o elemento ainda não foi totalmente carregado.
217 | Os elementos podem desativar esse comportamento adicionando o atributo `noloading`.
218 |
```
--------------------------------------------------------------------------------
/content/docs/guides/debug/validate.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Validate AMP Pages
3 | $order: 0
4 | toc: true
5 | ---
6 | [TOC]
7 |
8 |
9 | The key strength of AMP isn’t just that it makes your pages fast, but that it makes your pages fast in a way that can be *validated*. This way, third parties such as Twitter, Instagram or Google Search can feel great about serving AMP pages to readers in increasingly interesting ways.
10 |
11 | ## How do I check if my page is valid AMP?
12 |
13 | There are several ways available to validate an AMP document. They will all
14 | produce the exact same result, so use whichever one suits your development
15 | style the most.
16 |
17 | In addition to AMP validity, you may also want to confirm that your AMP document is [discoverable](/docs/guides/discovery.html) to third-party platforms.
18 |
19 | ### Browser Developer Console.
20 |
21 | The AMP Validator comes bundled with the AMP JS library, so it is available on every AMP page out of the box. To validate:
22 |
23 | 1. Open your AMP page in your browser
24 | 1. Append "`#development=1`" to the URL, for example, `http://localhost:8000/released.amp.html#development=1`.
25 | 1. Open the [Chrome DevTools console](https://developers.google.com/web/tools/chrome-devtools/debug/console/) and check for validation errors.
26 |
27 | Developer Console errors will look similar to this:
28 |
29 | <amp-img src="/static/img/docs/validator_errors.png"
30 | width="713" height="243" layout="responsive"
31 | alt="Screen grab of AMP Validator errors in chrome developer console">
32 | </amp-img>
33 |
34 | ### Web Interface
35 |
36 | The AMP Validator can be used as a web interface at
37 | <a href="https://validator.ampproject.org/">validator.ampproject.org</a>. This
38 | interface shows errors displayed inline alongside the HTML source of the page.
39 | The interface is an interactive editor: changes to the html source result in
40 | interactive revalidation.
41 |
42 | <amp-img src="/static/img/docs/validator_web_ui.png"
43 | width="660" height="507" layout="responsive"
44 | alt="Screen grab of validator.ampproject.org with error examples.">
45 | </amp-img>
46 |
47 | ### Browser Extension
48 |
49 | The AMP Validator can be accessed directly from your browser's toolbar using
50 | a browser extension. As you browse, it will automatically validate each AMP page
51 | visited and gives a visual indication of the validity of the page as a colored
52 | icon.
53 |
54 | <table>
55 | <tr>
56 | <td>
57 | <amp-img src="/static/img/docs/validator_icon_invalid.png"
58 | width="20" height="20" layout="fixed"
59 | alt="Red AMP icon indicating invalid AMP document.">
60 | </amp-img>
61 | </td>
62 | <td>When there are errors within an AMP page the extension’s icon
63 | shows in a red color and displays the number of errors encountered.
64 | </td>
65 | </tr>
66 | <tr>
67 | <td>
68 | <amp-img src="/static/img/docs/validator_icon_valid.png"
69 | width="20" height="20" layout="fixed"
70 | alt="Green AMP icon indicating valid AMP document.">
71 | </amp-img>
72 | </td>
73 | <td>When there are no errors within an AMP page, the icon shows in a
74 | green color and displays the number of warnings, if any exist.
75 | </td>
76 | </tr>
77 | <tr>
78 | <td>
79 | <amp-img src="/static/img/docs/validator_icon_link.png"
80 | width="20" height="20" layout="fixed"
81 | alt="Blue AMP icon indicating AMP HTML variant if clicked.">
82 | </amp-img>
83 | </td>
84 | <td>When the page isn’t AMP but the page indicates that an AMP version is
85 | available, the icon shows in a blue color with a link icon, and clicking on
86 | the extension will redirect the browser to the AMP version.
87 | </td>
88 | </tr>
89 | </table>
90 |
91 | AMP Validator Extension for
92 | [Chrome](https://chrome.google.com/webstore/detail/amp-validator/nmoffdblmcmgeicmolmhobpoocbbmknc) and [Opera](https://addons.opera.com/en-gb/extensions/details/amp-validator/).
93 |
94 | ### Command Line Tool
95 |
96 | As a prerequisite, you may need to install [Node.js with its package manager
97 | 'npm' on your system](https://docs.npmjs.com/getting-started/installing-node).
98 |
99 | To install the [AMP HTML validator command line tool](https://www.npmjs.com/package/amphtml-validator), type `npm install -g amphtml-validator`.
100 |
101 | Now let's validate a real AMP HTML page.
102 |
103 | [sourcecode:console]
104 | $ amphtml-validator https://www.ampproject.org/
105 | https://www.ampproject.org/: PASS
106 | [/sourcecode]
107 |
108 | Unsurprisingly this page is valid AMP HTML. Let's try a page that is not valid:
109 | [several_errors.html](https://raw.githubusercontent.com/ampproject/amphtml/master/validator/testdata/feature_tests/several_errors.html). To run the `amphtml-validator` command, you can either provide the URL of the page or a local file name. Download and save [several_errors.html](https://raw.githubusercontent.com/ampproject/amphtml/master/validator/testdata/feature_tests/several_errors.html) into a file, then run:
110 |
111 | [sourcecode:console]
112 | $ amphtml-validator several_errors.html
113 | several_errors.html:23:2 The attribute 'charset' may not appear in tag 'meta name= and content='.
114 | several_errors.html:26:2 The tag 'script' is disallowed except in specific forms.
115 | 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)
116 | 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)
117 | ...
118 | [/sourcecode]
119 |
120 | The format of the error messages consists of file name, line, column, and message,
121 | often followed by a link to the AMP HTML reference. Some editors, including Emacs
122 | (look for compile command and compilation mode), can interpret this format and let
123 | you jump to the errors in the original file.
124 |
125 | For a good starting point to make your own AMP page consider [minimum_valid_amp.html](https://raw.githubusercontent.com/ampproject/amphtml/master/validator/testdata/feature_tests/minimum_valid_amp.html):
126 |
127 | [sourcecode:console]
128 | $ amphtml-validator minimum_valid_amp.html
129 | minimum_valid_amp.html: PASS
130 | [/sourcecode]
131 |
132 | The command line tool offers additional features including switching off
133 | the color, printing JSON output, or running a specific version of the
134 | validator Javascript (by default it runs the latest published script).
135 |
136 | [sourcecode:console]
137 | $ amphtml-validator --help
138 |
139 | Usage: index [options] <fileOrUrlOrMinus...>
140 |
141 | Validates the files or urls provided as arguments. If "-" is
142 | specified, reads from stdin instead.
143 |
144 | Options:
145 |
146 | -h, --help output usage information
147 | -V, --version output the version number
148 | --validator_js <fileOrUrl> The Validator Javascript.
149 | Latest published version by default, or
150 | dist/validator_minified.js (built with build.py)
151 | for development.
152 | --format <color|text|json> How to format the output.
153 | "color" displays errors/warnings/success in
154 | red/orange/green.
155 | "text" avoids color (e.g., useful in terminals not
156 | supporting color).
157 | "json" emits json corresponding to the ValidationResult
158 | message in validator.proto.
159 | [/sourcecode]
160 |
161 | ## What happens if my page isn’t valid?
162 |
163 | The AMP Validator isn’t just a convenience for you during development. It’s also used by platforms like Twitter or Google who integrate your AMP pages into their content and search results. More so, they usually don’t request the pages directly from your server but make use of the Google AMP Cache, a free service that caches your pages and makes them available across the world, so they load even faster.
164 |
165 | If the AMP validation service detects that there’s something wrong with your page, it won’t get discovered and distributed by third party websites and won’t appear in the Google AMP Cache. So not only would you lose the speed benefits of the cache, it’s likely that your page will not be seen in many places! That would be a shame, so let’s make sure it doesn’t happen.
166 |
167 | ## How do I fix validation errors?
168 |
169 | Most validation errors are easy to address and fix. Consider this HTML tag:
170 |
171 | [sourcecode:html]
172 | <img src="cat.png">
173 | [/sourcecode]
174 |
175 | Which generates this AMP validation error, shown in these different tools:
176 |
177 | * Browser Developer Console
178 | <amp-img src="/static/img/docs/validator_console_imgerror.png"
179 | width="696" height="30" layout="responsive"
180 | alt="AMP error: The tag 'img' may only appear as a descendant of tag
181 | 'noscript'. Did you mean 'amp-img'? line 11, column 2">
182 | </amp-img>
183 |
184 | * Web Interface
185 | <amp-img src="/static/img/docs/validator_webui_imgerror.png"
186 | width="676" height="58" layout="responsive"
187 | alt="AMP error: The tag 'img' may only appear as a descendant of tag
188 | 'noscript'. Did you mean 'amp-img'? line 11, column 2">
189 | </amp-img>
190 |
191 | * Browser Extension
192 | <amp-img src="/static/img/docs/validator_extension_imgerror.png"
193 | width="724" height="108" layout="responsive"
194 | alt="AMP error: The tag 'img' may only appear as a descendant of tag
195 | 'noscript'. Did you mean 'amp-img'? line 11, column 2">
196 | </amp-img>
197 |
198 | Each tool gives several pieces of information:
199 |
200 |
201 | 1. The location (line and column) in the HTML document where the error
202 | occurred, clickable in some interfaces to highlight that location. In this
203 | case the issue occurs on line 11, column 2.
204 | 1. A line of text describing the error. In this case the text indicates that
205 | we are using an `<img>` tag, when we should have used an `<amp-img>` tag.
206 | 1. A link to a relevant document about the error. In this case the
207 | documentation for the `<amp-img>` tag. Not all errors generate
208 | documentation links.
209 |
210 | Carefully re-reading the spec, we realize that we are using an `<img>` tag, when we should have used an `<amp-img>` tag.
211 |
212 | To better understand the complete list of potential errors,
213 | see the [AMP Validation Errors guide](https://www.ampproject.org/docs/reference/validation_errors.html).
214 | If you’re still stuck after careful evaluation, [ask a
215 | question](http://stackoverflow.com/questions/tagged/amp-html) and we'll try to
216 | help.
217 |
218 |
```
--------------------------------------------------------------------------------
/content/learn/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Il metodo di AMP per ottimizzare le prestazioni
3 | ---
4 | [TOC]
5 |
6 | Grazie alla combinazione tra seguenti ottimizzazioni, le pagine AMP sono così veloci da sembrare di essere caricate in pochi istanti:
7 |
8 | Se preferisci ascoltare anziché leggere, il seguente video realizzato da Malte Ubl, AMP engineering lead, offre una panoramica simile al contenuto delle seguenti sezioni.
9 |
10 | <amp-youtube
11 | data-videoid="hVRkG1CQScA"
12 | layout="responsive"
13 | width="480" height="270">
14 | </amp-youtube>
15 |
16 | ## Consentire solo gli script asincroni
17 |
18 | JavaScript è potente,
19 | può modificare praticamente qualsiasi aspetto della pagina,
20 | ma può anche bloccare la costruzione DOM e ritardare il rendering della pagina
21 | (vedi anche [Aggiunta di interattività con JavaScript](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/adding-interactivity-with-javascript)).
22 | Per impedire che JavaScript ritardi il rendering della pagina,
23 | AMP consente solo JavaScript asincrono.
24 |
25 | Le pagine AMP non possono includere JavaScript scritto dall’autore.
26 | Anziché utilizzare JavaScript,
27 | le funzioni interattive della pagina vengono gestite in elementi AMP personalizzati.
28 | Gli elementi AMP personalizzati possono contenere JavaScript che funzionano dietro le quinte
29 | e sono attentamente progettati per garantire che non provochino cali delle performance.
30 |
31 | Benché il codice JavaScript di terzi sia consentito in iframe,
32 | non può bloccare il rendering.
33 | Ad esempio, se il codice JavaScript di terzi utilizza l’
34 | [API `document.write` pessima amica delle prestazioni](http://www.stevesouders.com/blog/2012/04/10/dont-docwrite-scripts/),
35 | non blocca il rendering della pagina principale.
36 |
37 | ## Definire le dimensioni di tutte le risorse in modo statico
38 |
39 | Le risorse esterne come le immagini, gli annunci o iframe devono dichiarare le proprie dimensioni nell’HTML
40 | affinché AMP possa determinare le dimensioni e la posizione di ciascun elemento prima che le risorse vengano scaricate.
41 | AMP carica il layout della pagina senza attendere il download di alcuna risorsa.
42 |
43 | AMP separa il layout del documento da quello delle risorse.
44 | Per il layout dell’intero documento ([e dei font](#font-triggering-must-be-efficient)) è necessaria solamente una richiesta HTTP
45 | .
46 | Dal momento che AMP è ottimizzato per evitare dispendiosi ricalcoli di stile e layout nel browser,
47 | non è necessario rielaborare i layout al caricamento delle risorse.
48 |
49 | ## Non consentire ai meccanismi delle estensioni di bloccare il rendering
50 |
51 | AMP non consente ai meccanismi delle estensioni di bloccare il rendering della pagina.
52 | AMP supporta le estensioni per componenti come
53 | [lightbox](/docs/reference/extended/amp-lightbox.html),
54 | [incorporamenti instagram](/docs/reference/extended/amp-instagram.html),
55 | [tweet](/docs/reference/extended/amp-twitter.html) e così via.
56 | Benché questi avanzino ulteriori richieste HTTP,
57 | tali richieste non bloccano il layout e il rendering della pagina.
58 |
59 | Tutte le pagine che utilizzano uno script personalizzato devono indicare al sistema AMP
60 | che prima o poi avrà un tag personalizzato.
61 | Ad esempio, lo script [`amp-iframe`](/docs/reference/extended/amp-iframe.html)
62 | indica al sistema che ci sarà un tag `amp-iframe`.
63 | AMP crea la casella dell’iframe prima ancora di sapere cosa conterrà:
64 |
65 | [sourcecode:html]
66 | <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
67 | [/sourcecode]
68 |
69 | ## Tenere lontano dalla fase critica qualsiasi codice JavaScript di terzi
70 |
71 | Al codice JavaScript di terzi piace usare il caricamento JS sincrono.
72 | Ama anche usare `document.write` per creare più script sincroni.
73 | Ad esempio, se hai cinque annunci e ognuno di essi esegue tre caricamenti sincroni
74 | con una latenza di connessione di 1 secondo,
75 | ti ritrovi con 15 secondi di tempo di caricamento solo per il caricamento JS.
76 |
77 | Le pagine AMP consentono codice JavaScript di terzi ma solo in iframe in modalità sandbox.
78 | Circoscrivendo questo codice agli iframe gli viene impedito di bloccare l’esecuzione della pagina principale.
79 | Anche se attiva più ricalcoli di stile,
80 | i rispettivi piccoli iframe hanno DOM molto limitati.
81 |
82 | I ricalcoli di stile e i layout sono tipici delle dimensioni DOM,
83 | pertanto i ricalcoli degli iframe sono molto veloci rispetto
84 | alle operazioni di ricalcolo degli stili e dei layout per la pagina.
85 |
86 | ## Tutto il codice CSS deve essere in linea e di dimensioni limitate
87 |
88 | Il codice CSS blocca tutto il rendering, interrompe il caricamento delle pagine e tende a gonfiarsi.
89 | Nelle pagine HTML AMP sono consentiti solo gli stili incorporati.
90 | Questo elimina una o spesso più richieste HTTP dalla fase di rendering critica
91 | rispetto a quanto accade nella maggior parte delle pagine web.
92 |
93 | Inoltre, il foglio di stile incorporato ha una dimensione massima di 50 kilobyte.
94 | Sebbene queste dimensioni siano sufficienti per pagine più complesse,
95 | impone comunque all’autore della pagina di adottare una buona dose di moderazione nell’uso del codice CSS.
96 |
97 | ## L’attivazione dei font deve essere efficiente
98 |
99 | I font web sono particolarmente grandi, per cui
100 | l’[ottimizzazione dei font web](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization)
101 | è fondamentale per le performance.
102 | In una pagina tipica dotata di alcuni script sincroni e di alcuni fogli di stile esterni,
103 | il browser attende il completamento di tali operazioni per iniziare il download dei font di grandi dimensioni.
104 |
105 | Il sistema AMP dichiara zero richieste HTTP fino a quando non inizia il download dei font.
106 | Questo è possibile solamente perché tutto il codice JS in AMP ha l’attributo asincrono
107 | e perché sono consentiti solo i fogli di stile incorporati,
108 | non ci sono richieste HTTP che impediscono al browser di scaricare i font.
109 |
110 | ## Ridurre al minimo i ricalcoli di stile
111 |
112 | Ogni volta che misuri qualcosa si attivano dispendiosi ricalcoli di stile
113 | in quanto il browser deve elaborare il layout dell’intera pagina.
114 | Nelle pagine AMP, tutte le operazioni di lettura DOM vengono eseguite prima di tutte quelle di scrittura.
115 | In questo modo si garantisce un massimo di un ricalcolo di stili per frame.
116 |
117 | Per ulteriori informazioni sull’impatto dei ricalcoli di stile e layout consulta la sezione sulle
118 | [performance del rendering](https://developers.google.com/web/fundamentals/performance/rendering/).
119 |
120 | ## Eseguire solamente animazioni con accelerazione GPU
121 |
122 | L’unico modo per avere ottimizzazioni veloci è quello di eseguirle sulla GPU.
123 | La GPU è cosciente dei livelli, sa come eseguire alcune operazioni su questi livelli,
124 | è in grado di spostarli o applicare una dissolvenza su di essi ma non può aggiornare il layout della pagina,
125 | passa perciò il compito al browser e questa non è una buona idea.
126 |
127 | Le regole per il codice CSS correlato alle animazioni garantiscono che queste possano usufruire dell’accelerazione GPU.
128 | In particolare, AMP consente solamente l’animazione e la transizione su trasformazione e opacità
129 | per cui il layout della pagina non è necessario.
130 | Consulta ulteriori informazioni sull’
131 | [utilizzo delle variazioni di trasformazione e opacità per le animazioni](https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count).
132 |
133 | ## Dare priorità al caricamento delle risorse
134 |
135 | AMP controlla tutti i download delle risorse: assegna la priorità al caricamento delle risorse,
136 | caricando solo ciò che è necessario, ed esegue la prelettura delle risorse di tipo lazy-load.
137 |
138 | Quando AMP scarica le risorse, ottimizza i download
139 | in modo tale che vengano scaricate prima le risorse attualmente più importanti.
140 | Le immagini e gli annunci vengono scaricati solo se ci sono probabilità che vengano visualizzati dall’utente,
141 | nella parte visibile della pagina (above the fold), o se ci sono probabilità che l’utente scorra rapidamente su di esse.
142 |
143 | AMP esegue anche la prelettura delle risorse di tipo lazy-load, ovvero quelle che non vengono caricate finché non richieste.
144 | Le risorse vengono caricate con il maggior ritardo possibile, ma la loro prelettura viene eseguita il prima possibile.
145 | In tal modo i componenti vengono caricati molto rapidamente ma la CPU viene utilizzata unicamente
146 | quando le risorse vengono effettivamente mostrate agli utenti.
147 |
148 | ## Caricare le pagine in un attimo
149 |
150 | La nuova [API preconnect](http://www.w3.org/TR/resource-hints/#dfn-preconnect)
151 | viene utilizzata intensamente per garantire che le richieste HTTP vengano completate il più rapidamente possibile.
152 | Grazie a questo,
153 | il rendering della pagina può essere eseguito prima che l’utente dichiari in modo esplicito che vorrebbe navigare verso di essa e
154 | la pagina potrebbe essere già disponibile nel momento in cui l’utente la seleziona effettivamente,
155 | con conseguente caricamento istantaneo.
156 |
157 | Sebbene il prerendering possa applicarsi a tutto il contenuto web,
158 | può anche consumare una grande quantità di larghezza di banda e CPU. AMP è ottimizzato per limitare al minimo entrambi questi fattori. Il prerendering scarica unicamente le risorse più visibili della pagina (above the fold)
159 | e non esegue il rendering di elementi che potrebbero essere dispendiosi in termini di uso della CPU.
160 |
161 | Quando viene eseguito il prerendering dei documenti AMP per il caricamento istantaneo,
162 | vengono effettivamente scaricate solo le risorse visibili della pagina (above the fold).
163 | Quando viene eseguito il prerendering dei documenti AMP per il caricamento istantaneo,
164 | le risorse che potrebbero pesare in modo eccessivo sulla CPU (come iframe di terzi) non vengono scaricate.
165 |
166 | Scopri
167 | [perché HTML AMP non sfrutta appieno la funzione di scansione di precaricamento](https://medium.com/@cramforce/why-amp-html-does-not-take-full-advantage-of-the-preload-scanner-7e7f788aa94e).
168 |
169 | ## Aiutare a rendere AMP ancora più veloce
170 | AMP è una specifica open source.
171 | Ci serve il tuo aiuto per rendere AMP ancora più veloce.
172 | Scopri [come dare il tuo contributo](/docs/support/contribute.html).
173 |
```
--------------------------------------------------------------------------------
/content/learn/[email protected]:
--------------------------------------------------------------------------------
```yaml
1 | hero:
2 | title@: Cara AMP Mempercepat Kinerja
3 | subtitle@: |
4 | Kombinasi semua pengoptimalan berikut adalah alasan mengapa halaman AMP sangat cepat sehingga tampak dimuat seketika:
5 | <p>Jika Anda lebih memilih mendengarkan dibanding membaca, video berikut yang disajikan oleh pimpinan teknisi AMP Malte Ubl akan memberikan ikhtisar yang mirip dengan teks yang ada di bawahnya.
6 |
7 | points:
8 | pointlist:
9 | - title@: Hanya memperbolehkan skrip asinkron
10 | description@: |
11 | JavaScript sangat hebat,
12 | karena mampu memodifikasi hampir semua aspek halaman,
13 | tetapi di sisi lain, juga bisa memblokir konstruksi DOM dan menunda perenderan halaman
14 | (lihat juga [Menambahkan interaktivitas dengan JavaScript](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/adding-interactivity-with-javascript)).
15 | Agar JavaScript tidak terus-menerus menunda perenderan halaman,
16 | AMP hanya memperbolehkan JavaScript asinkron.
17 | <p>Halaman AMP tidak boleh berisi JavaScript apa pun yang disusun oleh penulis program.
18 | Sebagai ganti menggunakan JavaScript,
19 | fitur halaman interaktif ditangani di elemen AMP khusus.
20 | Elemen AMP khusus bisa berisi JavaScript di dalamnya,
21 | tetapi didesain dengan cermat agar tidak menyebabkan penurunan kinerja.
22 | <p>Meskipun diperbolehkan di iframe,
23 | JS pihak ketiga tidak diperbolehkan memblokir perenderan.
24 | Misalnya, jika JS pihak ketiga menggunakan
25 | [API `document.write` yang buruk untuk kinerja](http://www.stevesouders.com/blog/2012/04/10/dont-docwrite-scripts/),
26 | JS ini tidak memblokir perenderan halaman utama.
27 | - title@: Menyatakan ukuran semua sumber daya secara statis
28 | description@: |
29 | Sumber daya eksternal seperti gambar, iklan, atau iframe harus dinyatakan ukurannya di HTML
30 | sehingga AMP bisa menentukan ukuran dan posisi setiap elemen sebelum sumber daya diunduh.
31 | AMP memuat layout halaman tanpa menunggu sumber daya apa pun untuk diunduh.
32 | <p>AMP melepaskan layout dokumen dari layout sumber daya.
33 | Hanya satu permintaan HTTP yang diperlukan untuk melayout keseluruhan dokumen
34 | ([+font](#font-triggering-must-be-efficient)).
35 | Karena AMP dioptimalkan untuk menghindari rekalkulasi gaya dan layout yang bebannya besar di browser,
36 | tidak akan ada layout ulang saat sumber daya dimuat.
37 | - title@: Tidak memperbolehkan mekanisme ekstensi memblokir perenderan
38 | description@: |
39 | AMP tidak memperbolehkan mekanisme ekstensi memblokir perenderan halaman.
40 | AMP mendukung ekstensi untuk elemen-elemen seperti
41 | [lightbox](/docs/reference/extended/amp-lightbox.html),
42 | [sematan instagram](/docs/reference/extended/amp-instagram.html),
43 | [tweet](/docs/reference/extended/amp-twitter.html), dsb.
44 | Meskipun elemen ini memerlukan permintaan HTTP tambahan,
45 | permintaan tersebut tidak memblokir layout dan perenderan halaman.
46 | <p>Halaman apa pun yang menggunakan skrip khusus harus memberi tahu sistem AMP
47 | bahwa nantinya akan memiliki tag khusus.
48 | Misalnya, skrip [`amp-iframe`](/docs/reference/extended/amp-iframe.html)
49 | memberi tahu sistem bahwa akan ada tag `amp-iframe`.
50 | AMP membuat kotak iframe sebelum mengetahui apa yang akan disertakan:
51 | example: /content/includes/amp-iframe.md
52 | - title@: Mempertahankan semua JavaScript pihak ketiga di luar jalur penting
53 | description@: |
54 | JS pihak ketiga cenderung menggunakan pemuatan JS sinkron.
55 | Skrip ini juga cenderung menerapkan `document.write` pada skrip sinkronisasi lainnya.
56 | Misalnya, jika Anda memiliki lima iklan dan setiap iklan ini melakukan tiga pemuatan sinkronisasi
57 | dengan koneksi latensi 1 detik,
58 | Anda membutuhkan waktu pemuatan 15 detik hanya untuk memuat JS.
59 | <p>Halaman AMP memperbolehkan JavaScript pihak ketiga tetapi hanya dalam iframe yang di-sandbox.
60 | Dengan mencegahnya masuk ke dalam iframe, JavaScript pihak ketiga tidak bisa memblokir eksekusi halaman utama.
61 | Bahkan apabila memicu rekalkukasi gaya berkali-kali,
62 | iframe-nya yang sangat kecil hanya memiliki sedikit DOM.
63 | <p>Rekalkulasi gaya dan layout umumnya sebanding dengan ukuran DOM,
64 | sehingga rekalkulasi iframe sangat cepat dibandingkan dengan
65 | rekalkulasi gaya dan layout untuk halaman.
66 | - title@: Semua CSS harus sebaris dan dibatasi ukurannya
67 | description@: |
68 | CSS memblokir semua perenderan, memblokir pemuatan halaman, dan cenderung besar ukurannya.
69 | Di halaman AMP HTML, hanya gaya sebaris yang diperbolehkan.
70 | Ini menghilangkan 1 permintaan HTTP atau sering kali lebih dari jalur perenderan yang penting
71 | dibanding dengan sebagian besar laman web.
72 | <p>Selain itu, ukuran maksimum style sheet sebaris adalah 50 kilobyte.
73 | Meskipun ukurannya cukup besar untuk halaman yang sangat kompleks,
74 | style sheet sebaris mengharuskan penulis halaman untuk menerapkan gaya penulisan CSS yang bersih.
75 | - title@: Pemicuan font harus efisien
76 | id: font-triggering-must-be-efficient
77 | description@: |
78 | Font web ukurannya sangat besar, sehingga
79 | [pengoptimalan font web](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization)
80 | sangat penting bagi kinerja.
81 | Pada halaman umumnya yang memiliki beberapa skrip sinkronisasi dan beberapa style sheet eksternal,
82 | browser menunggu dan terus menunggu untuk mulai mengunduh font yang ukurannya besar hingga semuanya berakhir.
83 | <p>Sistem AMP menyatakan nol permintaan HTTP hingga font mulai diunduh.
84 | Ini hanya bisa dilakukan karena semua JS di AMP memiliki atribut asinkron
85 | dan hanya style sheet sebaris yang diperbolehkan;
86 | tidak ada permintaan HTTP yang memblokir browser mengunduh font.
87 | - title@: Meminimalkan rekalkulasi gaya
88 | description@: |
89 | Setiap kali Anda mengukur sesuatu, tindakan ini memicu rekalkulasi gaya yang bebannya berat
90 | karena browser harus melayout keseluruhan halaman.
91 | Di halaman AMP, semua pembacaan DOM terjadi di awal sebelum terjadi semua penulisan.
92 | Ini memastikan terjadi maksimal satu rekalkulasi gaya per bingkai.
93 | <p>Ketahui selengkapnya tentang dampak gaya dan rekalkulasi layout terhadap
94 | [kinerja perenderan](https://developers.google.com/web/fundamentals/performance/rendering/).
95 | - title@: Hanya menjalankan animasi yang diakselerasi GPU
96 | description@: |
97 | Satu-satunya cara untuk mendapatkan pengoptimalan maksimal adalah dengan menjalankan animasi di GPU.
98 | GPU memahami layer serta cara menjalankan beberapa hal di layer ini,
99 | GPU bisa menggerakkannya, memudarkannya, tetapi tidak bisa memperbarui layout halaman;
100 | GPU akan menyerahkan tugas ini kepada browser, yang dampaknya tidak bagus.
101 | <p>Aturan untuk CSS yang berkaitan dengan animasi memastikan animasi bisa diakselerasi oleh GPU.
102 | Khususnya, AMP hanya memperbolehkan animasi dan transisi pada transform dan opacity
103 | sehingga layout halaman tidak diperlukan.
104 | Ketahui selengkapnya tentang
105 | [menggunakan transform dan opacity untuk perubahan animasi](https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count)
106 | - title@: Memprioritaskan pemuatan sumber daya
107 | description@: |
108 | AMP mengontrol semua unduhan sumber daya: dengan memprioritaskan pemuatan sumber daya,
109 | memuat hanya apa yang diperlukan, dan mengambil di awal sumber daya yang lambat dimuat.
110 | <p>Saat mengunduh sumber daya, AMP mengoptimalkan unduhan
111 | sehingga sumber daya yang paling penting saat ini diunduh terlebih dulu.
112 | Gambar dan iklan hanya diunduh jika berpotensi besar dilihat oleh pengguna,
113 | di paro atas, atau jika pengguna berpotensi menggulir ke arahnya dengan cepat.
114 | <p>AMP juga mengambil sumber daya yang lambat dimuat di awal.
115 | Sumber daya dimuat selambat mungkin, tetapi diambil terlebih dahulu sedini mungkin.
116 | Dengan demikian, semuanya dimuat sangat cepat tetapi CPU hanya dipakai
117 | saat sumber daya benar-benar diperlihatkan ke pengguna.
118 | - title@: Memuat halaman seketika
119 | description@: |
120 | [API preconnect](http://www.w3.org/TR/resource-hints/#dfn-preconnect) yang baru
121 | sangat sering dipakai untuk memastikan permintaan HTTP secepat mungkin saat dibuat.
122 | Dengan demikian,
123 | halaman bisa dirender sebelum pengguna secara eksplisit menyatakan ingin menuju ke sana;
124 | halaman mungkin sudah tersedia saat pengguna benar-benar memilihnya,
125 | sehingga terjadi pemuatan seketika.
126 | <p>Meskipun pra-perenderan bisa diterapkan pada semua materi web,
127 | tindakan ini juga bisa menggunakan banyak sekali bandwidth dan CPU. AMP dioptimalkan untuk mengurangi kedua faktor ini. Pra-perenderan hanya mengunduh sumber daya di paro atas
128 | dan pra-perenderan tidak merender hal-hal yang memberatkan CPU.
129 | <p>Saat dokumen AMP dipra-render untuk pemuatan seketika,
130 | hanya sumber daya di paro atas yang benar-benar diunduh.
131 | Saat dokumen AMP dipra-render untuk pemuatan seketika,
132 | sumber daya yang berpotensi memakai banyak CPU (seperti iframe pihak ketiga) tidak diunduh.
133 | <p>Ketahui selengkapnya tentang
134 | [mengapa AMP HTML tidak penuh memanfaatkan pemindai pramuat](https://medium.com/@cramforce/why-amp-html-does-not-take-full-advantage-of-the-preload-scanner-7e7f788aa94e)
135 | - title@: Bantu mempercepat AMP
136 | description@: |
137 | AMP adalah upaya sumber terbuka.
138 | Kami membutuhkan bantuan Anda untuk semakin mempercepat AMP.
139 | Pelajari [cara berkontribusi](/docs/support/contribute.html).
140 |
```
--------------------------------------------------------------------------------
/content/docs/guides/debug/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Memvalidasi Laman AMP
3 | ---
4 |
5 | Kekuatan utama AMP tidak hanya membuat laman cepat dimuat, tetapi AMP membuat laman cepat dimuat dengan cara yang dapat *divalidasi*. Dengan cara ini, pihak ketiga seperti Twitter, Instagram, atau Google Penelusuran dapat merasa puas terkait penyajian laman AMP kepada pembaca dengan cara yang semakin menarik.
6 |
7 | ## Bagaimana cara memeriksa validitas laman AMP saya?
8 |
9 | Ada beberapa cara untuk memvalidasi dokumen AMP. Semuanya akan
10 | memberikan hasil yang sama persis, jadi gunakan cara mana saja yang paling sesuai dengan gaya
11 | pengembangan Anda.
12 |
13 | Selain untuk memvalidasi AMP, Anda mungkin juga ingin mengonfirmasi bahwa dokumen AMP [dapat ditemukan](/docs/guides/discovery.html) oleh platform pihak ketiga.
14 |
15 | ### Developer Console Browser.
16 |
17 | Validator AMP hadir sepaket dengan pustaka JS AMP, jadi validator tersedia di setiap laman AMP tanpa perlu diotak-atik. Untuk memvalidasi:
18 |
19 | * Buka laman AMP di browser
20 | * Tambahkan "`#development=1`" ke URL, misalnya, `http://localhost:8000/released.amp.html#development=1`.
21 | * Buka [konsol Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/debug/console/) dan periksa kesalahan validasi.
22 |
23 | Kesalahan Developer Console akan terlihat seperti ini:
24 |
25 | <amp-img src="/static/img/docs/validator_errors.png" width="713" height="243" alt="Tangkapan layar kesalahan Validator AMP di Developer Console Chrome" layout="responsive"></amp-img>
26 |
27 |
28 | ### Antarmuka Web
29 |
30 | Validator AMP dapat digunakan sebagai antarmuka web di
31 | [validator.ampproject.org](https://validator.ampproject.org/). Antarmuka
32 | ini menunjukkan kesalahan yang ditampilkan sebaris bersama dengan sumber HTML laman.
33 | Antarmuka adalah editor yang interaktif: perubahan pada sumber html menyebabkan
34 | validasi ulang yang interaktif.
35 |
36 | <amp-img src="/static/img/docs/validator_web_ui.png" width="660" height="507" alt="Tangkapan layar validator.ampproject.org dengan contoh kesalahan." layout="responsive"></amp-img>
37 |
38 |
39 | ### Ekstensi Browser
40 |
41 | Validator AMP dapat diakses langsung dari bilah alat browser menggunakan
42 | ekstensi browser. Saat Anda menjelajah, secara otomatis validator akan memvalidasi setiap laman AMP
43 | yang dikunjungi dan memberikan indikasi visual terkait validitas laman dengan ikon
44 | berwarna.
45 |
46 | <table>
47 | <tr>
48 | <td>
49 | <amp-img src="/static/img/docs/validator_icon_invalid.png" width="20" height="20" alt="Ikon AMP Merah menunjukkan dokumen AMP yang tidak valid."></amp-img>
50 |
51 | </td>
52 | <td>Jika terjadi kesalahan dalam laman AMP, ikon ekstensi
53 | muncul dalam warna merah dan menampilkan jumlah kesalahan yang ditemukan.
54 | </td>
55 | </tr>
56 | <tr>
57 | <td>
58 | <amp-img src="/static/img/docs/validator_icon_valid.png" width="20" height="20" alt="Ikon AMP Hijau menunjukkan dokumen AMP yang valid."></amp-img>
59 |
60 | </td>
61 | <td>Jika tidak ada kesalahan dalam laman AMP, ikon muncul dalam warna hijau
62 | dan menampilkan jumlah peringatan, jika ada.
63 | </td>
64 | </tr>
65 | <tr>
66 | <td>
67 | <amp-img src="/static/img/docs/validator_icon_link.png" width="20" height="20" alt="Ikon AMP Biru menunjukkan varian HTML AMP jika diklik."></amp-img>
68 |
69 | </td>
70 | <td>Jika laman bukan merupakan AMP namun mengindikasikan bahwa versi AMP tersedia,
71 | ikon muncul dalam warna biru dengan ikon tautan, dan mengeklik
72 | ekstensi tersebut akan mengalihkan browser ke versi AMP.
73 | </td>
74 | </tr>
75 | </table>
76 |
77 | Ekstensi Validator AMP untuk
78 | [Chrome](https://chrome.google.com/webstore/detail/amp-validator/nmoffdblmcmgeicmolmhobpoocbbmknc) dan [Opera](https://addons.opera.com/en-gb/extensions/details/amp-validator/).
79 |
80 | ### Alat Baris Perintah
81 |
82 | Sebagai prasyarat, Anda harus memasang <a href="https://docs.npmjs.com/getting-started/installing-node">Node.js dengan `npm` pengelola paketnya
83 | di sistem</a>.
84 |
85 | Untuk memasang [alat baris perintah validator HTML AMP ](https://www.npmjs.com/package/amphtml-validator), ketik `npm install -g amphtml-validator`.
86 |
87 | Sekarang, mari memvalidasi laman HTML AMP yang sesungguhnya.
88 |
89 | [sourcecode:console]
90 | $ amphtml-validator https://www.ampproject.org/
91 | https://www.ampproject.org/: PASS
92 | [/sourcecode]
93 |
94 | Ternyata laman ini adalah HTML AMP valid. Mari coba laman yang tidak valid:
95 | [several_errors.html](https://raw.githubusercontent.com/ampproject/amphtml/master/validator/testdata/feature_tests/several_errors.html). Untuk menjalankan perintah `amphtml-validator`, Anda dapat menyediakan URL laman atau nama file lokal. Download dan simpan [several_errors.html](https://raw.githubusercontent.com/ampproject/amphtml/master/validator/testdata/feature_tests/several_errors.html) ke file, lalu jalankan:
96 |
97 | [sourcecode:console]
98 | $ amphtml-validator several_errors.html
99 | several_errors.html:23:2 The attribute 'charset' may not appear in tag 'meta name= and content='.
100 | several_errors.html:26:2 The tag 'script' is disallowed except in specific forms.
101 | 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)
102 | 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)
103 | ...
104 | [/sourcecode]
105 |
106 | Format pesan kesalahan terdiri dari nama file, baris, kolom, dan pesan,
107 | sering kali diikuti oleh tautan ke referensi HTML AMP. Beberapa editor, termasuk Emacs
108 | (cari mode kompilasi dan perintah kompilasi), dapat menafsirkan format ini dan memungkinkan
109 | Anda melompat ke kesalahan di file asli.
110 |
111 | Untuk titik awal yang baik guna membuat laman AMP sendiri, pertimbangkan [minimum_valid_amp.html](https://raw.githubusercontent.com/ampproject/amphtml/master/validator/testdata/feature_tests/minimum_valid_amp.html):
112 |
113 | [sourcecode:console]
114 | $ amphtml-validator minimum_valid_amp.html
115 | minimum_valid_amp.html: PASS
116 | [/sourcecode]
117 |
118 | Alat baris perintah menawarkan fitur tambahan yang meliputi menonaktifkan
119 | warna, mencetak keluaran JSON, atau menjalankan versi tertentu dari
120 | Javascript validator (secara default menjalankan skrip terbaru yang dipublikasikan).
121 |
122 | [sourcecode:console]
123 | $ amphtml-validator --help
124 |
125 | Usage: index [options] <fileOrUrlOrMinus...>
126 |
127 | Validates the files or urls provided as arguments. If "-" is
128 | specified, reads from stdin instead.
129 |
130 | Options:
131 |
132 | -h, --help output usage information
133 | -V, --version output the version number
134 | --validator_js <fileOrUrl> The Validator Javascript.
135 | Latest published version by default, or
136 | dist/validator_minified.js (built with build.py)
137 | for development.
138 | --format <color|text|json> How to format the output.
139 | "color" displays errors/warnings/success in
140 | red/orange/green.
141 | "text" avoids color (e.g., useful in terminals not
142 | supporting color).
143 | "json" emits json corresponding to the ValidationResult
144 | message in validator.proto.
145 | [/sourcecode]
146 |
147 | ## Apa yang terjadi jika laman saya tidak valid?
148 |
149 | Validator AMP tidak hanya memudahkan Anda selama pengembangan. Validator juga digunakan oleh platform seperti Twitter atau Google yang mengintegrasikan laman AMP ke konten dan hasil penelusurannya. Selain itu, mereka biasanya tidak meminta laman langsung dari server, tetapi menggunakan Cache AMP Google, layanan gratis yang menyimpan cache laman Anda dan membuatnya tersedia di seluruh dunia, sehingga laman tersebut dimuat dengan lebih cepat.
150 |
151 | Jika layanan validasi AMP mendeteksi ada sesuatu yang salah di laman Anda, laman tidak akan dapat ditemukan dan didistribusikan oleh situs web pihak ketiga dan tidak akan muncul di Cache AMP Google. Jadi tidak hanya akan kehilangan manfaat kecepatan menyimpan dalam cache, tetapi laman tidak akan terlihat di banyak tempat! Sangat disayangkan, jadi pastikan itu tidak terjadi.
152 |
153 | ## Bagaimana cara saya memperbaiki kesalahan validasi?
154 |
155 | Kebanyakan kesalahan validasi cukup mudah dideteksi dan diperbaiki. Perhatikan tag HTML ini:
156 |
157 | [sourcecode:html]
158 | <img src="cat.png">
159 | [/sourcecode]
160 |
161 | Hal yang menyebabkan kesalahan validasi AMP ini ditampilkan di alat yang berbeda berikut:
162 |
163 | * Developer Console Browser
164 | <amp-img alt="Kesalahan AMP: Tag 'img' mungkin hanya muncul sebagai turunan tag 'noscript'. Apakah maksud Anda 'amp-img'? baris 11, kolom 2" height="30" src="/static/img/docs/validator_console_imgerror.png" width="696" layout="responsive"></amp-img>
165 |
166 | * Antarmuka Web
167 | <amp-img alt="Kesalahan AMP: Tag 'img' mungkin hanya muncul sebagai turunan tag 'noscript'. Apakah maksud Anda 'amp-img'? baris 11, kolom 2" height="58" src="/static/img/docs/validator_webui_imgerror.png" width="676" layout="responsive"></amp-img>
168 |
169 | * Ekstensi Browser
170 | <amp-img alt="Kesalahan AMP: Tag 'img' mungkin hanya muncul sebagai turunan tag 'noscript'. Apakah maksud Anda 'amp-img'? baris 11, kolom 2" height="108" src="/static/img/docs/validator_extension_imgerror.png" width="724" layout="responsive"></amp-img>
171 |
172 | Setiap alat memberikan beberapa informasi:
173 |
174 | 1. Lokasi (baris dan kolom) di dokumen HTML tempat kesalahan terjadi,
175 | dapat diklik pada beberapa antarmuka untuk menyorot lokasi tersebut. Pada kasus
176 | ini, masalah terjadi di baris 11, kolom 2.
177 | 1. Baris teks mendeskripsikan kesalahannya. Pada kasus ini, teks menunjukkan bahwa
178 | kami menggunakan tag `<img>`, ketika seharusnya menggunakan tag `<amp-img>`.
179 | 1. Tautan ke dokumen yang relevan tentang kesalahan. Pada kasus ini,
180 | dokumentasi tersebut untuk tag `<amp-img>`. Tidak semua kesalahan menghasilkan
181 | tautan dokumentasi.
182 |
183 | Berhati-hatilah saat membaca ulang spek, kami menyadari bahwa kami menggunakan tag `<img>`, yang seharusnya menggunakan tag `<amp-img>`.
184 |
185 | Untuk memahami daftar lengkap potensi masalah dengan lebih baik,
186 | lihat [panduan Kesalahan Validasi AMP](https://www.ampproject.org/docs/reference/validation_errors.html).
187 | Jika masih mengalami masalah setelah mengevaluasi secara hati-hati, <a href="http://stackoverflow.com/questions/tagged/amp-html">ajukan
188 | pertanyaan</a> dan kami akan mencoba
189 | membantu.
190 |
```
--------------------------------------------------------------------------------
/content/learn/about-how@pt_BR.yaml:
--------------------------------------------------------------------------------
```yaml
1 | hero:
2 | title@: Como o AMP acelera o desempenho
3 | subtitle@: |
4 | Combinadas, as otimizações a seguir são a razão das páginas AMP serem tão rápidas que parecem carregar instantaneamente:
5 | <p>Se você prefere ouvir em vez de ler, este vídeo feito pelo engenheiro-chefe em AMP, Malte Ubl, passa uma visão geral semelhante aos próximos parágrafos.
6 |
7 | points:
8 | pointlist:
9 | - title@: Permitir apenas scripts assíncronos
10 | description@: |
11 | O JavaScript é uma ferramenta eficaz,
12 | que pode modificar praticamente todos os aspectos da página,
13 | mas também pode bloquear uma construção em DOM e atrasar a renderização da página
14 | (veja também [Adicionar interatividade com o JavaScript](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/adding-interactivity-with-javascript)).
15 | Para evitar que o JavaScript atrase a renderização da página,
16 | o AMP permite apenas o JavaScript assíncrono.
17 | <p>Páginas AMP não podem incluir JavaScript escrito pelo autor.
18 | Em vez de usar JavaScript,
19 | os recursos interativos da página são processados em elementos AMP personalizados.
20 | Os elementos AMP personalizados podem incluir JavaScript,
21 | mas são projetados cuidadosamente para garantir que não atrapalhem o desempenho.
22 | <p>Embora JS de terceiros seja permitido nos iframes,
23 | ele não pode bloquear a renderização.
24 | Por exemplo, se o JS de terceiros usar a
25 | [API `document.write` muito prejudicial para o desempenho](http://www.stevesouders.com/blog/2012/04/10/dont-docwrite-scripts/),
26 | ela não bloqueará a renderização da página principal.
27 | - title@: Dimensionar todos os recursos estaticamente
28 | description@: |
29 | Recursos externos, como imagens, anúncios ou iframes, devem informar seu tamanho no HTML
30 | para que o AMP possa determinar o tamanho e a posição de cada elemento antes de que seja feito o download dos recursos.
31 | O AMP carrega o layout da página sem esperar que seja feito o download dos recursos.
32 | <p>O AMP separa o layout do documento do layout do recurso.
33 | Apenas uma solicitação HTTP é necessária para se ter o layout do documento inteiro
34 | ([+fontes](#font-triggering-must-be-efficient)).
35 | Como o AMP é otimizado para evitar recálculos de estilo e layouts pesados no navegador,
36 | o layout não será recriado quando os recursos forem carregados.
37 | - title@: Não permitir que mecanismos de extensões bloqueiem a renderização
38 | description@: |
39 | O AMP não permite que mecanismos de extensões bloqueiem a renderização da página.
40 | O AMP oferece suporte a extensões para itens como
41 | [efeitos Lightbox](/docs/reference/extended/amp-lightbox.html),
42 | [incorporações do Instagram](/docs/reference/extended/amp-instagram.html),
43 | [tweets](/docs/reference/extended/amp-twitter.html) etc.
44 | Embora eles precisem de solicitações HTTP adicionais,
45 | essas solicitações não bloqueiam o layout e a renderização da página.
46 | <p>Qualquer página que use um script personalizado deve informar ao sistema AMP
47 | que ela futuramente terá uma tag personalizada.
48 | Por exemplo, o script [`amp-iframe`](/docs/reference/extended/amp-iframe.html)
49 | informa ao sistema que haverá uma tag `amp-iframe`.
50 | O AMP cria a caixa de iframe antes mesmo de saber o que ela incluirá:
51 | example: /content/includes/amp-iframe.md
52 | - title@: Remover qualquer JavaScript de terceiros do caminho essencial
53 | description@: |
54 | JS de terceiros costuma usar o carregamento síncrono de JS.
55 | Eles também gostam de `document.write` mais scripts síncronos.
56 | Por exemplo, se tiver cinco anúncios e cada um realizar três carregamentos de sincronização
57 | em uma conexão com 1 segundo de latência,
58 | você terá 15 segundos de carregamento apenas para carregar o JS.
59 | <p>As páginas AMP permitem o uso de JavaScript de terceiros, mas apenas em iframes com sandbox.
60 | Ao serem restritos a iframes, eles não podem bloquear a execução da página principal.
61 | Mesmo que façam com que o estilo seja recalculado várias vezes,
62 | seus iframes pequenos contêm muito pouco DOM.
63 | <p>Recálculos de estilos e layouts são típicos para o tamanho de DOM,
64 | então os recálculos de iframe são muito rápidos em comparação
65 | a um recálculo de estilos e layout para a página.
66 | - title@: Qualquer CSS deve ser inline e de tamanho limitado
67 | description@: |
68 | O CSS bloqueia toda a renderização, bloqueia o carregamento da página e costuma ser excessivo.
69 | Nas páginas AMP HTML, apenas estilos inline são permitidos.
70 | Isso remove uma ou até mais solicitações HTTP do caminho essencial de renderização
71 | em comparação com a maioria das páginas da Web.
72 | <p>Além disso, a folha de estilo inline deve ter um tamanho máximo de 50 kilobytes.
73 | Embora esse tamanho seja grande o suficiente para páginas muito sofisticadas,
74 | ele ainda exige que o autor da página otimize o CSS.
75 | - title@: O acionamento de fontes deve ser eficiente
76 | id: font-triggering-must-be-efficient
77 | description@: |
78 | As fontes da Web são muito grandes, então uma
79 | [otimização de fontes da Web](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization)
80 | é essencial para o desempenho.
81 | Em uma página comum, com poucos scripts de sincronização e poucas folhas de estilo externas,
82 | o navegador fica esperando para começar a fazer o download dessas fontes enormes até que tudo isso aconteça.
83 | <p>O sistema AMP declara zero solicitação HTTP até que comece o download das fontes.
84 | Isso só é possível porque todo JS em AMP tem o atributo de sincronização
85 | e apenas folhas de estilo inline são permitidas;
86 | nenhuma solicitação HTTP impede que o navegador faça o download das fontes.
87 | - title@: Minimizar os recálculos de estilo
88 | description@: |
89 | Cada vez que você mede algo, recálculos de estilo são acionados, o que é pesado,
90 | pois o navegador precisa refazer o layout da página inteira.
91 | Nas páginas AMP, todas as leituras de DOM são realizadas primeiro, antes de todas as gravações.
92 | Isso garante que ocorra, no máximo, um recálculo de estilos por frame.
93 | <p>Saiba mais sobre o impacto dos recálculos de estilo e layout em
94 | [desempenho de renderização](https://developers.google.com/web/fundamentals/performance/rendering/).
95 | - title@: Executar apenas animações aceleradas por GPU
96 | description@: |
97 | A única maneira de ter otimizações rápidas é executá-las na GPU.
98 | A GPU entende camadas, sabe como realizar atividades nessas camadas,
99 | pode movê-las, pode desvanecê-las, mas não pode atualizar o layout da página;
100 | ela passa essa tarefa para o navegador e isso não é bom.
101 | <p>As regras para CSS relacionado a animações garantem que as animações possam ser aceleradas pela GPU.
102 | Especificamente, o AMP permite animação e transição apenas em transform e opacity
103 | para que o layout da página não seja necessário.
104 | Saiba mais sobre como
105 | [usar transform e opacity em alterações de animação](https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count).
106 | - title@: Priorizar o carregamento de recursos
107 | description@: |
108 | O AMP controla todos os downloads de recursos: ele prioriza o carregamento de recursos,
109 | carregando apenas o necessário, e realiza a pré-busca de recursos de carregamento lento.
110 | <p>Quando o AMP baixa recursos, ele otimiza os downloads
111 | para que se faça primeiro o download dos recursos mais importantes no momento.
112 | Somente é feito o download de imagens e anúncios quando forem ser vistos pelo usuário,
113 | vistos acima da dobra ou se for provável que o usuário chegue a eles rapidamente.
114 | <p>O AMP também realiza a pré-busca de recursos de carregamento lento.
115 | Os recursos são carregados o mais tarde possível, mas a pré-busca é feita assim que possível.
116 | Dessa forma, tudo é carregado muito rapidamente, mas a CPU só é usada
117 | quando os recursos são exibidos aos usuários.
118 | - title@: Carregar páginas em um instante
119 | description@: |
120 | A nova [preconnect API](http://www.w3.org/TR/resource-hints/#dfn-preconnect)
121 | é muito usada para garantir que as solicitações HTTP sejam tão rápidas quanto possível ao serem feitas.
122 | Assim,
123 | uma página pode ser renderizada antes de o usuário informar explicitamente que deseja navegar até ela;
124 | a página pode já estar disponível quando o usuário a selecionar,
125 | fazendo com que o carregamento seja instantâneo.
126 | <p>Embora a pré-renderização possa ser aplicada a todo o conteúdo Web,
127 | ela também pode usar muita largura de banda e recursos de CPU. O AMP é otimizado para reduzir esses fatores. A pré-renderização somente faz o download dos recursos acima da dobra
128 | e não renderiza itens que possam ser pesados em termos de uso de CPU.
129 | <p>Quando documentos AMP são pré-renderizados para carregamento instantâneo,
130 | somente é feito o download dos recursos acima da dobra.
131 | Quando documentos AMP são pré-renderizados para carregamento instantâneo,
132 | não é feito o download de recursos que podem usar muitos recursos de CPU (como iframes de terceiros).
133 | <p>Saiba mais sobre
134 | [por que o AMP HTML não aproveita ao máximo o scanner de pré-carregamento](https://medium.com/@cramforce/why-amp-html-does-not-take-full-advantage-of-the-preload-scanner-7e7f788aa94e).
135 | - title@: Ajude a tornar o AMP mais rápido
136 | description@: |
137 | AMP é um esforço de código aberto.
138 | Precisamos da sua ajuda para deixá-lo ainda mais rápido.
139 | Saiba [como contribuir](/docs/support/contribute.html).
140 |
```
