Category:AMP: Difference between revisions

[1]

1. AMP components may have JavaScript under the hood, but they're carefully designed to make sure they don't cause performance degradation.
   Ɓangarorin AMP kan iya samun manhajar JavaScript a cikinsu, amma an tsara su ne da kula don a tabbatar da cewa ba za su jinkirtar da gudanarwar aiki ba. [2]

   While custom JS is allowed in <a href="../documentation/components/reference/amp-script.md">amp-script</a>, and third-party JS is allowed in iframes, it cannot block rendering. For example, if third-party JS uses the <a href="http://www.stevesouders.com/blog/2012/04/10/dont-docwrite-scripts/">super-bad-for-performance document.write API</a>, it does not block rendering the main page.
   
   Duk da dai za a iya amfani da rubutun JS na kanka a cikin <a href="../documentation/components/reference/amp-script.md">amp-script</a>, kuma za a iya amfani da JS ɗin waje a cikin iframes, ba zai iya toshe fitowar shafi ba. Misali, idan JS ɗin waje yayi amfani da <a href="http://www.stevesouders.com/blog/2012/04/10/dont-docwrite-scripts/">super-bad-for-performance document.write API</a>, bai toshe fitowar babban shafin ba.

2. Manhajar JS ta waje na son amfani da yin lodin JS a lokaci ɗaya. Kuma suna son amfani da document.write don su daɗa gina tsarin gina manhajojin da ke gudanar da tafiya a lokaci ɗaya. Misali, idan kana da tallace-tallace guda biya a shafinka, kuma kowane na haifar da lodin da ke tafiya a lokaci ɗaya sau uku, kowane na ɗaukar ɗakika ɗaya kafin haɗi, ka kasance ka kai daƙiƙoƙi 15 don kawai kana lodin JS. Shafukan AMP kan iya samun manhajar JavaScript daga waje amma dai sai an sa a cikin sashin iframe ɗin da aka keɓe. Idan an hana su fita daga sashin iframe, ba za su iya toshe gudanar da tafiyar babban shafin ba. Ko ma idan sun jawo maimaicin ire-iren ƙidaya, guntayen iframes ɗinsu na da ƙananan DOM.
   1. Third-party JS likes to use synchronous JS loading. <> Manhajar JS ta waje na son amfani da yin lodin JS a lokaci ɗaya.
   2. They also like to document.write more sync scripts. <> Kuma suna son amfani da document.write don su daɗa gina tsarin gina manhajojin da ke gudanar da tafiya a lokaci ɗaya.
   3. For example, if you have five ads on your page, and each of them cause three synchronous loads, each with a 1 second latency connection, you’re in 15 seconds of load time just for JS loading. <> Misali, idan kana da tallace-tallace guda biya a shafinka, kuma kowane na haifar da lodin da ke tafiya a lokaci ɗaya sau uku, kowane na ɗaukar ɗakika ɗaya kafin haɗi, ka kasance ka kai daƙiƙoƙi 15 don kawai kana lodin JS.
   4. AMP pages allow third-party JavaScript but only in sandboxed iframes. <> Shafukan AMP kan iya samun manhajar JavaScript daga waje amma dai sai an sa a cikin sashin iframe ɗin da aka keɓe.
   5. By restricting them to iframes, they can’t block the execution of the main page. <> Idan an hana su fita daga sashin iframe, ba za su iya toshe gudanar da tafiyar babban shafin ba.
   6. Even if they trigger multiple style re-calculations, their tiny iframes have very little DOM. <> Ko ma idan sun jawo maimaicin ire-iren ƙidaya, guntayen iframes ɗinsu na da ƙananan DOM.
3. The time it takes to do style-recalculations and layouts are restricted by DOM size, so the iframe recalculations are very fast compared to recalculating styles and layout for the page. <> An ƙuntata lokacin maimaicin ƙidayar salo da tsarukan shafi ga girman DOM ɗin, saboda haka maimaicin ƙidayar iframe na da sauri idan an kwatanta da maimaicin ƙidayar salon da tsarin shafin.
4. All CSS must be inline and size-bound. <> Duk CSS ɗin da za a rubuta, a rubuta cikin layi kuma a ƙuntata girmansa.
5. Font triggering must be efficient. <> Dole a jawo tsarin haruffa da inganci.
   1. CSS blocks all rendering, it blocks page load, and it tends to get bloated. <> CSS yana toshe nuna shafi gabaki ɗaya, yana toshe lodin shafi, kuma yana iya zama jibgege.
   2. In AMP HTML pages, only inline styles are allowed. <> A shafukan AMP HTML, kawai salon abubuwan da ake rubutawa cikin layi ake bari.
   3. This removes 1 or often more HTTP requests from the critical rendering path compared to most web pages. <> Hakan na ɗauke buƙatar HTTP guda ko ma fiye da haka daga hanyar nuna shafi idan an kwatanta da mafi yawancin shafuka.
   4. Also, the inline style sheet has a maximum size of 50 kilobytes. <> Hakazalika, dole salon cikin shafin ya kasance ƙasa da kilobytes 50.
   5. While this size is big enough for very sophisticated pages, it still requires the page author to practice good CSS hygiene. <> Toh duk da dai wannan girman zai ishe gawutattun shafuka, ana buƙatar marubucin shafin ya yi tsaftace aikin CSS da kyau.
6. Tsarukan haruffa na yanar gizo ƙatun-ƙatun ne, saboda haka <a href="https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization">ƙarfafa gyaran tsarin haruffa</a> na da muhummanci game da gudanarwar aiki. A kan shafi na yau da kullum da ke da tsarukan gina manhaja da ke gudana a lokaci ɗaya kaɗan da kuma shafukan salo a waje, browser sai ta yi ta jira kafin ta fara sakko da waɗannan jibgegen tsarukan haruffa har sai duk waɗannan sun auku. Tsarin AMP ba zai bayyana ko buƙatar HTTP ba ko guda har sai tsarukan haruffa sun fara sauka. Wannan na yiyuwa ne kaɗsi aboda uk mahajar JS da ke cikin AMP na da siffar da ke gudana a lokuta daban-daban kuma kawai shafukan salon da aka rubuta a layi ake bari; babu wani buƙatun HTTP da za su toshe wa browser daga sakko da tsaukan haruffa ba. 
   1. Web fonts are super large, so <a href="https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization">web font optimization</a> is crucial to performance. <> Tsarukan haruffa na yanar gizo ƙatun-ƙatun ne, saboda haka <a href="https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization">ƙarfafa gyaran tsarin haruffa</a> na da muhummanci game da gudanarwar aiki.
   2. On a typical page that has a few sync scripts and a few external style sheets, the browser waits and waits to start downloading these huge fonts until all this happens. <> A kan shafi na yau da kullum da ke da tsarukan gina manhaja da ke gudana a lokaci ɗaya kaɗan da kuma shafukan salo a waje, browser sai ta yi ta jira kafin ta fara sakko da waɗannan jibgegen tsarukan haruffa har sai duk waɗannan sun auku.
   3. The AMP system declares zero HTTP requests until fonts start downloading. <> Tsarin AMP ba zai bayyana ko buƙatar HTTP ba ko guda har sai tsarukan haruffa sun fara sauka.
   4. This is only possible because all JS in AMP has the async attribute and only inline style sheets are allowed; <> Wannan na yiyuwa ne kaɗsi aboda uk mahajar JS da ke cikin AMP na da siffar da ke gudana a lokuta daban-daban kuma kawai shafukan salon da aka rubuta a layi ake bari;
   5. there’s no HTTP requests blocking the browser from downloading fonts. <> babu wani buƙatun HTTP da za su toshe wa browser daga sakko da tsaukan haruffa ba.