Hoʻokipa ponoʻī i nā kumuwaiwai ʻekolu: ka maikaʻi, ka hewa, ka ʻino

I nā makahiki i hala iho nei, ʻoi aku ka nui o nā paepae no ka hoʻolālā ʻana i nā papahana mua e hāʻawi i nā manawa no ka hoʻokipa ponoʻī a i ʻole ke koho ʻana i nā kumuwaiwai ʻekolu. ʻAe ʻo Akamai iā ʻoe e hoʻonohonoho nā ʻāpana kikoʻī no nā URL i hana pono'ī. Loaʻa iā Cloudflare ka ʻenehana Edge Workers. Hiki iā Fasterzine kākau hou Nā URL ma nā ʻaoʻao i kuhikuhi lākou i nā kumuwaiwai ʻaoʻao ʻekolu i loaʻa ma ke kahua nui o ka pūnaewele.

Hoʻokipa ponoʻī i nā kumuwaiwai ʻekolu: ka maikaʻi, ka hewa, ka ʻino

Inā ʻike ʻoe ʻaʻole loli pinepine nā lawelawe ʻaoʻao ʻekolu i hoʻohana ʻia i kāu papahana, a hiki ke hoʻomaikaʻi ʻia ke kaʻina hana o ka hāʻawi ʻana iā lākou i nā mea kūʻai aku, a laila ke noʻonoʻo nei paha ʻoe e pili ana i ke koho ʻana i ia mau lawelawe. Me kēia ala, hiki iā ʻoe ke hoʻokokoke maikaʻi i kēia mau kumuwaiwai i kāu mea hoʻohana a loaʻa ka mana piha o kā lākou cache ma ka ʻaoʻao o ka mea kūʻai aku. ʻO kēia ka mea e hiki ai iā ʻoe ke pale i nā mea hoʻohana mai nā pilikia i hoʻokumu ʻia e ka "crash" o kahi lawelawe ʻaoʻao ʻekolu a i ʻole ka hōʻino ʻana o kāna hana.

Maikaʻi: Hoʻomaikaʻi i ka hana

ʻO ka hoʻokipa ponoʻī ʻana i nā kumuwaiwai a haʻi e hoʻomaikaʻi i ka hana ma ke ʻano maopopo loa. ʻAʻole pono ka polokalamu kele pūnaewele e komo hou i ka DNS, ʻaʻole pono e hoʻokumu i kahi pilina TCP a hana i kahi lulu lima TLS ma kahi ʻaoʻao ʻekolu. Hiki iā ʻoe ke ʻike i ke ʻano o ka hoʻokipa ʻana iā ia iho i nā kumuwaiwai a haʻi e pili ana i ka hana ma ka hoʻohālikelike ʻana i kēia mau kiʻi ʻelua.

Hoʻokipa ponoʻī i nā kumuwaiwai ʻekolu: ka maikaʻi, ka hewa, ka ʻino
Hoʻoiho ʻia nā kumuwaiwai ʻekolu mai nā kumu waho (i lawe ʻia mai mai kēia wahi)

Hoʻokipa ponoʻī i nā kumuwaiwai ʻekolu: ka maikaʻi, ka hewa, ka ʻino
Mālama ʻia nā kumuwaiwai ʻaoʻao ʻekolu ma kahi like me nā mea ʻē aʻe o ka pūnaewele (i lawe ʻia mai mai kēia wahi)

Hoʻomaikaʻi hou ʻia ke kūlana ma ka ʻoiaʻiʻo e hoʻohana ka polokalamu kele i ka hiki ke multiplex a hoʻonohonoho mua i ka ʻikepili mai ka pilina HTTP/2 i hoʻokumu ʻia me ka domain nui.

Inā ʻaʻole ʻoe e hoʻokipa i nā kumuwaiwai ʻekolu, a laila no ka mea e hoʻouka ʻia lākou mai kahi kikowaena ʻokoʻa mai ka mea nui, ʻaʻole hiki ke hoʻonohonoho mua ʻia. ʻO kēia ka mea e hoʻokūkū ai kekahi i kekahi no ka bandwidth o ka mea kūʻai aku. Hiki i kēia ke hopena i nā manawa hoʻouka no nā ʻike koʻikoʻi i ke kūkulu ʻana i kahi ʻaoʻao i ʻoi aku ka lōʻihi ma mua o ka mea e hiki ke loaʻa ma lalo o nā kūlana kūpono. ʻaneʻi kamaʻilio ma HTTP/2 prioritization e wehewehe maikaʻi i kēia mau mea āpau.

Hiki ke manaʻo ʻia ʻo ka hoʻohana ʻana i nā ʻano i nā loulou i nā kumuwaiwai o waho preconnect e kōkua i ka hoʻoponopono ʻana i ka pilikia. Eia nō naʻe, inā he nui loa kēia mau loulou i nā kikowaena like ʻole, hiki iā ia ke hoʻonui i ka laina kamaʻilio i ka manawa koʻikoʻi.

Inā hoʻokipa ʻoe i nā kumuwaiwai ʻaoʻao ʻekolu iā ʻoe iho, hiki iā ʻoe ke hoʻomalu i ka hāʻawi ʻia ʻana o kēia mau kumuwaiwai i ka mea kūʻai aku. ʻO ia, ke kamaʻilio nei mākou e pili ana i kēia:

  • Hiki iā ʻoe ke hōʻoia e hoʻohana ʻia ka algorithm compression data i kūpono i kēlā me kēia polokalamu kele pūnaewele (Brotli/gzip).
  • Hiki iā ʻoe ke hoʻonui i ka manawa caching no nā kumuwaiwai i maʻamau ʻaʻole lōʻihi loa, ʻoiai me nā mea hoʻolako kaulana loa (no ka laʻana, ua hoʻonohonoho ʻia ka waiwai kūpono no ka tag GA i 30 mau minuke).

Hiki iā ʻoe ke hoʻolōʻihi i ka TTL no kahi kumuwaiwai i, e ʻōlelo, i hoʻokahi makahiki ma ka hoʻokomo ʻana i nā ʻike pili i kāu hoʻolālā hoʻokele caching (URL hashes, versioning, etc.). E kamaʻilio mākou e pili ana i kēia ma lalo nei.

▍Ka pale ʻana i nā keakea i ka hana o nā lawelawe ʻaoʻao ʻekolu a i ʻole kā lākou pani ʻana

ʻO kekahi hiʻohiʻona hoihoi o ka mālama pono ʻana i nā kumuwaiwai ʻekolu ʻaoʻao ʻo ia ka mea e hiki ai iā ʻoe ke hoʻēmi i nā pilikia e pili ana i ka pau ʻana o nā lawelawe ʻaoʻao ʻekolu. E manaʻo kākou ua hoʻokō ʻia ka ʻaoʻao ʻekolu o ka ʻaoʻao hoʻāʻo A/B ma ke ʻano he palapala pale e hoʻouka ana ma ka ʻaoʻao poʻo o ka ʻaoʻao. Hoʻouka mālie kēia palapala. Inā hiki ʻole ke hoʻouka ʻia ka palapala pili, e nele ka ʻaoʻao. Inā lōʻihi loa ka hoʻouka ʻana, e ʻike ʻia ka ʻaoʻao me kahi lohi lōʻihi. A i ʻole, inā paha e hoʻohana ka papahana i kahi waihona i hoʻoiho ʻia mai kahi kumu CDN ʻaoʻao ʻekolu. E noʻonoʻo kākou ua loaʻa ʻole kēia kumuwaiwai i kahi hemahema a i pāpā ʻia paha ma kekahi ʻāina. ʻO ia kūlana e alakaʻi ai i ka uhaki i ka loiloi o ka pūnaewele.

No ka ʻike ʻana i ka hana ʻana o kāu pūnaewele ke loaʻa ʻole kekahi lawelawe waho, hiki iā ʻoe ke hoʻohana i ka ʻāpana SPOF ma webpagetest.org.

Hoʻokipa ponoʻī i nā kumuwaiwai ʻekolu: ka maikaʻi, ka hewa, ka ʻino
ʻO ka ʻāpana SPOF ma webpagetest.org

▍ Pehea e pili ana i nā pilikia me ka mālama ʻana i nā mea i loko o nā polokalamu kele? (hint: he moʻolelo)

Manaʻo paha ʻoe ʻo ka hoʻohana ʻana i nā CDN lehulehu e alakaʻi maʻalahi i ka hoʻokō waiwai ʻoi aku ka maikaʻi, no ka mea, aia kēia mau lawelawe i nā pūnaewele kiʻekiʻe kiʻekiʻe a hoʻolaha ʻia a puni ka honua. Akā ʻoi aku ka paʻakikī o nā mea a pau.

E ʻōlelo kākou he mau paena like ʻole mākou: website1.com, website2.com, website3.com. Hoʻohana kēia mau pūnaewele i ka waihona jQuery. Hoʻopili mākou iā lākou me ka CDN, no ka laʻana - googleapis.com. Hiki iā ʻoe ke manaʻo i ka polokalamu kele pūnaewele e hoʻoiho a hūnā i ka waihona i hoʻokahi manawa, a laila hoʻohana iā ia ma nā pūnaewele ʻekolu. Hiki i kēia ke hoʻemi i ka ukana ma ka pūnaewele. E ʻae paha kēia iā ʻoe e mālama i ke kālā ma kekahi wahi a kōkua i ka hoʻomaikaʻi ʻana i ka hana waiwai. Mai kahi hiʻohiʻona kūpono, ʻokoʻa nā mea a pau. No ka laʻana, loaʻa iā Safari kahi hiʻohiʻona i kapa ʻia Kāohi ʻana i ka ʻimi naʻauao: Hoʻohana ka cache i nā kī ʻelua e pili ana i ke kumu o ka palapala a me ke kumu o ka punawai ʻaoʻao ʻekolu. ʻaneʻi ʻatikala maikaʻi ma kēia kumuhana.

nā haʻawina kahiko Yahoo и Facebook, a me nā mea hou aku aʻo Paul Calvano, hōʻike ʻaʻole mālama ʻia nā kumuwaiwai i loko o nā huna huna no ka lōʻihi e like me kā mākou e manaʻo ai: “Aia kahi ʻokoʻa koʻikoʻi ma waena o ka manawa caching o nā kumuwaiwai ponoʻī a me nā ʻaoʻao ʻekolu. Ke kamaʻilio nei mākou e pili ana i CSS a me nā font pūnaewele. ʻO ia hoʻi, ʻo 95% o nā kikokikona ʻōiwi ke ola huna ʻoi aku ma mua o hoʻokahi pule, ʻoiai ʻo 50% o nā font ʻaoʻao ʻekolu he ola cache ma lalo o hoʻokahi pule! Hāʻawi kēia i nā mea hoʻomohala pūnaewele i kumu koʻikoʻi e hoʻokipa i nā faila font iā lākou iho!

ʻO ka hopena, inā hoʻokipa ʻoe i nā ʻike a nā poʻe ʻē aʻe, ʻaʻole ʻoe e ʻike i nā pilikia hana i hoʻokumu ʻia e ka cache browser.

I kēia manawa ua uhi mākou i ka ikaika o ka hoʻokipa ponoʻī ʻaoʻao ʻekolu, e kamaʻilio e pili ana i ka haʻi ʻana i ka hoʻokō maikaʻi ʻana o kēia ala mai kahi ʻino.

ʻO ka ʻino: Aia ka diabolo i nā kikoʻī

ʻAʻole hiki ke hana maʻalahi ka hoʻoneʻe ʻana i nā kumuwaiwai ʻaoʻao ʻekolu i kāu ʻaoʻao ponoʻī me ka ʻole e hōʻoia i ka hūnā pono ʻia o ia mau kumuwaiwai.

ʻO kekahi o nā pilikia nui ma ʻaneʻi ʻo ka manawa caching. No ka laʻana, ua hoʻokomo ʻia ka ʻike mana i nā inoa ʻaoʻao ʻekolu e like me kēia: jquery-3.4.1.js. ʻAʻole e loli kēlā faila i ka wā e hiki mai ana, a ʻo ka hopena, ʻaʻole ia e hoʻopilikia i kāna cache.

Akā inā ʻaʻole hoʻohana ʻia kekahi ʻano hoʻolālā i ka wā e hana ai me nā faila, nā ʻatikala cache, nā mea i hoʻololi ʻia ʻoiai ʻaʻole i hoʻololi ʻia ka inoa faila, hiki ke lilo i mea kahiko. He pilikia koʻikoʻi paha kēia, no ka mea, no ka laʻana, ʻaʻole ia e ʻae i ka hoʻohui ʻia ʻana o nā pale palekana automated i nā palapala e pono ai nā mea kūʻai aku e loaʻa koke. Pono ka mea hoʻomohala e hoʻoikaika e hoʻohou i ia mau palapala i loko o ka cache. Eia kekahi, hiki i kēia ke hana i nā hemahema o ka noi ma muli o ka ʻokoʻa o ke code i hoʻohana ʻia ma ka mea kūʻai mai ka cache mai ka mana hou o ke code i hoʻolālā ʻia ai ka ʻāpana kikowaena o ka papahana.

ʻOiaʻiʻo, inā mākou e kamaʻilio e pili ana i nā mea i hoʻonui pinepine ʻia (nā mana tag, nā hoʻonā no ka hoʻāʻo ʻana A/B), a laila ʻo ka mālama ʻana iā lākou me ka hoʻohana ʻana i nā mea hana CDN he hana hiki ke hoʻoponopono ʻia, akā ʻoi aku ka paʻakikī. ʻO nā lawelawe e like me Commanders Act, kahi hopena hoʻokele tag, hoʻohana i nā webhooks i ka wā e paʻi ana i nā mana hou. Hāʻawi kēia iā ʻoe i ka hiki ke hoʻokuʻu i kahi cache ma ka CDN, a i ʻole, ʻoi aku ka maikaʻi, ka hiki ke hoʻoikaika i kahi hash a i ʻole URL.

▍ Hāʻawi kūpono i nā mea kūʻai aku

Eia kekahi, i ka wā e kamaʻilio ai mākou e pili ana i ka caching, pono mākou e noʻonoʻo i ka ʻoiaʻiʻo ʻaʻole kūpono nā hoʻonohonoho caching i hoʻohana ʻia ma ka CDN no kekahi mau kumuwaiwai ʻekolu. No ka laʻana, hiki i ia mau kumuwaiwai ke hoʻohana i ka ʻenehana mea hoʻohana sniffing (adaptive serving) no ka lawelawe ʻana i nā mākaʻikaʻi kikoʻī me nā mana o ka ʻike i hoʻopaʻa pono ʻia no kēlā mau polokalamu kele. Ke hilinaʻi nei kēia mau ʻenehana i nā hōʻike maʻamau, a i ʻole kahi waihona o ka ʻike poʻomanaʻo HTTP, e ʻike i ka hiki ke nānā aku. User-Agent. Ke ʻike lākou i ka polokalamu kele pūnaewele a lākou e hana nei, hāʻawi lākou i nā mea i hoʻolālā ʻia no ia.

Maanei hiki iā ʻoe ke hoʻomanaʻo i ʻelua mau lawelawe. ʻO ka mea mua ʻo googlefonts.com. ʻO ka lua ka polyfill.io. Hāʻawi ka lawelawe Google Fonts, no kekahi kumuwaiwai, nā code CSS like ʻole, e pili ana i ka hiki o ka polokalamu kele (e hāʻawi ana i nā loulou i nā kumuwaiwai woff2 me ka hoʻohana ʻana unicode-range).

Eia nā hopena o nā nīnau Google Fonts i hana ʻia mai nā polokalamu kele like ʻole.

Hoʻokipa ponoʻī i nā kumuwaiwai ʻekolu: ka maikaʻi, ka hewa, ka ʻino
Loaʻa ka hulina Google Fonts mai Chrome

Hoʻokipa ponoʻī i nā kumuwaiwai ʻekolu: ka maikaʻi, ka hewa, ka ʻino
ʻO ka hopena o nā nīnau Google Fonts i hoʻokō ʻia mai IE10

Hāʻawi ʻo Polyfill.io i ka polokalamu kele pūnaewele i nā polyfills e pono ai. Hana ʻia kēia no nā kumu hana.

No ka laʻana, e nānā kāua i ka hopena inā e holo ʻoe i kēia noi mai nā polokalamu kele like ʻole: https://polyfill.io/v3/polyfill.js?features=default

Ma ka pane ʻana i kēlā noi i hoʻokō ʻia mai IE10, e loaʻa ka 34 KB o ka ʻikepili. A ʻo ka pane iā ia, i hana ʻia mai Chrome, e nele.

Huhū: ʻO kekahi mau manaʻo pilikino

ʻO kēia helu ka mea hope loa, akā ʻaʻole ka mea nui loa. ʻO ka manaʻo, ʻo ka hoʻokipa ponoʻī ʻana i nā kumuwaiwai ʻekolu ma ke kahua nui o ka papahana a i ʻole ma kāna subdomain hiki ke hoʻopilikia i ka pilikino o nā mea hoʻohana a hoʻopilikia maikaʻi i ka papahana pūnaewele nui.

Inā ʻaʻole i hoʻonohonoho pono ʻia kāu ʻōnaehana CDN, e hoʻopau paha ʻoe i ka hoʻouna ʻana i nā kuki o kāu kikowaena i kahi lawelawe ʻaoʻao ʻekolu. Inā ʻaʻole i hoʻonohonoho ʻia ke kānana kūpono ma ka pae CDN, a laila, kāu mau kuki kau, ʻaʻole hiki ke hoʻohana ʻia ma JavaScript (me ka httponly), hiki ke hoʻouna ʻia i kahi hoʻokipa haole.

ʻO kēia ka mea hiki ke loaʻa me nā trackers e like me Eulerian a i ʻole Criteo. Ua hoʻonoho paha ka poʻe mākaʻikaʻi ʻaoʻao ʻekolu i kahi ʻike kūʻokoʻa i ka kuki. Inā he ʻāpana lākou o nā mea pūnaewele, hiki iā lākou ke heluhelu i ka mea hōʻike ma ko lākou manaʻo ʻoiai e hana ana ka mea hoʻohana me nā kumuwaiwai pūnaewele like ʻole.

I kēia mau lā, ʻo ka hapa nui o nā mākaʻikaʻi e loaʻa i ka pale mai kēia ʻano hana tracker. ʻO ka hopena, hoʻohana ka poʻe trackers i kēia manawa i ka ʻenehana CNAME Cloaking, e hoʻopololei ana e like me kā lākou mau palapala no nā papahana like ʻole. ʻO ia hoʻi, hāʻawi ka poʻe trackers i nā mea nona ka pūnaewele e hoʻohui i kahi CNAME i kā lākou hoʻonohonoho no kahi kikowaena, ʻo ka helu o ka mea maʻamau e like me kahi pūʻulu o nā huaʻōlelo.

ʻOiai ʻaʻole ʻōlelo ʻia e hoʻolako i nā kuki pūnaewele i nā subdomains āpau (no ka laʻana - *.website.com), nui nā pūnaewele e hana i kēia. I kēia hihia, hoʻouna ʻia ia mau kuki i kahi tracker ʻaoʻao ʻekolu. ʻO ka hopena, ʻaʻole hiki iā mākou ke kamaʻilio hou e pili ana i kahi pilikino.

Eia kekahi, hana like me nā poʻomanaʻo HTTP Nā mea kūʻai aku, i hoʻouna ʻia i ke kikowaena nui wale nō, no ka mea hiki ke hoʻohana ʻia e hana manamana lima kikohoʻe mea hoʻohana. E hōʻoia i ka lawelawe CDN āu e hoʻohana ai e kānana pono i kēia mau poʻo.

Nā hopena

Inā ʻoe e hoʻolālā nei e hoʻokō koke i ka hoʻokipa ʻana i nā kumuwaiwai ʻekolu, e hāʻawi wau iā ʻoe i kekahi mau ʻōlelo aʻoaʻo:

  • Hoʻokipa i kāu mau hale waihona puke JS koʻikoʻi, nā kikokikona a me nā faila CSS. E hōʻemi ana kēia i ka pilikia o ka hemahema o ka paena a i ʻole ka hōʻino ʻana o ka hana ma muli o ka loaʻa ʻole o kahi kumuwaiwai koʻikoʻi i ka pūnaewele ma muli o ka hewa o kahi lawelawe ʻaoʻao ʻekolu.
  • Ma mua o kou hūnā ʻana i nā kumuwaiwai ʻaoʻao ʻekolu ma kahi CDN, e hōʻoia e hoʻohana ʻia kekahi ʻano ʻōnaehana hoʻololi i ka wā e kapa ai i kā lākou mau faila, a i ʻole hiki iā ʻoe ke hoʻokele i ke ola o kēia mau kumuwaiwai ma o ka hana lima a i ʻole ka hoʻihoʻi ʻana i ka cache CDN i ka wā e paʻi ana i kahi mana hou o ka palapala.
  • E makaʻala loa i kāu CDN, server proxy, a me nā hoʻonohonoho huna. E ʻae kēia iā ʻoe e pale i kāu papahana a i ʻole nā ​​poʻo mai ka hoʻouna ʻana i nā kuki Client-Hints nā lawelawe ʻaoʻao ʻekolu.

E nā mea heluhelu aloha! Ke hoʻokipa nei ʻoe i nā mea a nā poʻe ʻē aʻe ma kāu mau kikowaena i mea nui loa no ka hana o kāu mau papahana?

Hoʻokipa ponoʻī i nā kumuwaiwai ʻekolu: ka maikaʻi, ka hewa, ka ʻino
Hoʻokipa ponoʻī i nā kumuwaiwai ʻekolu: ka maikaʻi, ka hewa, ka ʻino

Source: www.habr.com

Pākuʻi i ka manaʻo hoʻopuka