Ing taun-taun pungkasan, luwih akeh platform kanggo ngoptimalake proyek ngarep nawakake kesempatan kanggo hosting dhewe utawa proxy sumber daya pihak katelu. Akamai ngidini sampeyan nyetel kanggo URL sing digawe dhewe. Cloudflare duwe teknologi Edge Workers. Fasterzine bisa URL ing kaca supaya nuding sumber daya pihak katelu sing ana ing domain utama situs kasebut.
Yen sampeyan ngerti manawa layanan pihak katelu sing digunakake ing proyek sampeyan ora asring owah-owahan, lan proses ngirim menyang klien bisa luwih apik, mula sampeyan bisa uga mikir babagan proxy layanan kasebut. Kanthi pendekatan iki, sampeyan bisa nggawa sumber daya kasebut luwih cedhak karo pangguna lan entuk kontrol sing luwih lengkap babagan caching ing sisih klien. Kajaba iku, iki ngidini sampeyan nglindhungi pangguna saka masalah sing disebabake dening "kacilakan" layanan pihak katelu utawa degradasi kinerja.
Apik: Apik kinerja
Nyedhiyakake sumber daya wong liya nambah kinerja kanthi cara sing jelas. Browser ora perlu ngakses DNS maneh, ora perlu nggawe sambungan TCP lan nindakake salaman TLS ing domain pihak katelu. Sampeyan bisa ndeleng carane hosting dhewe sumber daya wong liya mengaruhi kinerja dening mbandhingaké rong tokoh ing ngisor iki.
Sumber daya pihak katelu diundhuh saka sumber eksternal (dijupuk saka )
Sumber daya pihak katelu disimpen ing panggonan sing padha karo bahan situs liyane (dijupuk saka )
Kahanan kasebut uga luwih apik amarga browser bakal nggunakake kemampuan kanggo multiplex lan prioritize data saka sambungan HTTP / 2 sing wis digawe karo domain utama.
Yen sampeyan ora dadi tuan rumah sumber daya pihak katelu, mula bakal dimuat saka domain sing beda karo sing utama, mula ora bisa diprioritasake. Iki bakal nyebabake saingan siji liyane kanggo bandwidth klien. Iki bisa nyebabake wektu muat kanggo konten sing kritis kanggo mbangun kaca sing luwih suwe tinimbang sing bisa ditindakake ing kahanan sing cocog. Dhiskusi babagan prioritas HTTP / 2 sing nerangake kabeh iki kanthi apik.
Bisa dianggep yen nggunakake atribut ing pranala menyang sumber daya eksternal preconnect bakal mbantu ngrampungake masalah kasebut. Nanging, yen ana akeh banget pranala kasebut menyang domain sing beda-beda, bisa uga kakehan garis komunikasi ing wektu sing paling penting.
Yen sampeyan dadi tuan rumah sumber daya pihak katelu dhewe, sampeyan bisa ngontrol kepiye sumber daya kasebut diwenehake marang klien. Yaiku, kita ngomong babagan ing ngisor iki:
- Sampeyan bisa mesthekake yen algoritma komprèsi data sing paling cocog karo saben browser digunakake (Brotli / gzip).
- Sampeyan bisa nambah wektu caching kanggo sumber daya sing biasane ora dawa banget, malah karo panyedhiya paling kondhang (contone, nilai sing cocog kanggo tag GA disetel kanggo 30 menit).
Sampeyan bisa malah ngluwihi TTL kanggo sumber daya kanggo, sebutno, setahun kanthi nggabungake konten sing relevan menyang strategi manajemen caching (URL hashes, versioning, etc.). Kita bakal ngomong babagan iki ing ngisor iki.
▍Perlindhungan marang gangguan ing operasi layanan pihak katelu utawa mati
Aspek liyane sing menarik saka sumber daya pihak katelu sing nyedhiyakake dhewe yaiku ngidini sampeyan nyuda risiko sing ana gandhengane karo gangguan layanan pihak katelu. Ayo nganggep yen solusi pengujian A/B pihak katelu sing sampeyan gunakake dileksanakake minangka skrip pamblokiran sing dimuat ing bagean sirah kaca. Skrip iki mbukak alon-alon. Yen skrip sing cocog gagal dimuat, kaca bakal kosong. Yen mbutuhake wektu sing suwe banget kanggo mbukak, kaca bakal katon kanthi wektu tundha suwe. Utawa, umpamane proyek kasebut nggunakake perpustakaan sing diunduh saka sumber CDN pihak katelu. Coba bayangake manawa sumber daya iki ngalami kegagalan utawa diblokir ing negara tartamtu. Kahanan kasebut bakal nyebabake nglanggar logika situs kasebut.
Kanggo mangerteni carane situs bisa digunakake nalika sawetara layanan external ora kasedhiya, sampeyan bisa nggunakake bagean SPOF ing .
bagean SPOF ing webpagetest.org
▍ Apa masalah karo cache bahan ing browser? (petunjuk: iku mitos)
Sampeyan bisa uga mikir yen nggunakake CDN umum kanthi otomatis bakal ngasilake kinerja sumber daya sing luwih apik, amarga layanan kasebut nduweni jaringan sing cukup dhuwur lan disebar ing saindenging jagad. Nanging kabeh iku bener sethitik liyane rumit.
Ayo kita duwe sawetara situs beda: website1.com, website2.com, website3.com. Kabeh situs iki nggunakake perpustakaan jQuery. Kita nyambungake menyang wong-wong mau nggunakake CDN, contone - googleapis.com. Sampeyan bisa nyana browser ndownload lan cache perpustakaan sapisan, banjur gunakake ing kabeh telung situs. Iki bisa nyuda beban ing jaringan. Mbok menawa iki bakal ngidini sampeyan nyimpen dhuwit ing endi wae lan mbantu nambah kinerja sumber daya. Saka sudut pandang praktis, kabeh katon beda. Contone, Safari duwe fitur sing diarani : Cache nggunakake tombol dual adhedhasar sumber dokumen lan sumber sumber daya pihak katelu. artikel apik babagan topik iki.
pasinaon lawas и , uga luwih anyar Paul Calvano, nuduhake yen sumber daya ora disimpen ing caches browser kanggo anggere kita bisa nyana: "Ana longkangan serius antarane wektu caching saka project dhewe lan sumber daya pihak katelu. Kita ngomong babagan CSS lan font web. Yaiku, 95% font asli duwe umur cache luwih saka seminggu, dene 50% font pihak katelu duwe umur cache kurang saka seminggu! Iki menehi pangembang web alesan sing kuat kanggo ngatur file font dhewe!
Akibaté, yen sampeyan dadi tuan rumah konten wong liya, sampeyan ora bakal weruh masalah kinerja sing disebabake cache browser.
Saiki kita wis nutupi kekiyatan saka pihak katelu self-hosting, ayo kang pirembagan bab carane mbedakake implementasine apik saka pendekatan iki saka sing ala.
The Bad: Iblis ana ing rincian
Pindhah sumber daya pihak katelu menyang domain sampeyan dhewe ora bisa ditindakake kanthi otomatis tanpa mesthekake yen sumber daya kasebut disimpen kanthi bener.
Salah sawijining masalah utama ing kene yaiku wektu caching. Contone, informasi versi kalebu ing jeneng skrip pihak katelu kaya iki: jquery-3.4.1.js. File kasebut ora bakal diganti ing mangsa ngarep, lan minangka asil iki ora bakal nyebabake masalah karo caching.
Nanging yen sawetara skema versi ora digunakake nalika nggarap file, skrip sing di-cache, isi sing diganti nalika jeneng file tetep ora diganti, bisa dadi ketinggalan jaman. Iki bisa dadi masalah serius, amarga, contone, ora ngidini patch keamanan otomatis ditambahake menyang skrip sing kudu ditampa klien kanthi cepet. Pangembang kudu ngupayakake nganyari skrip kasebut ing cache. Kajaba iku, iki bisa nyebabake kegagalan aplikasi amarga kasunyatane kode sing digunakake ing klien saka cache beda karo versi kode paling anyar sing dirancang kanggo bagean server proyek kasebut.
Bener, yen kita ngomong babagan materi sing kerep dianyari (manajer tag, solusi kanggo tes A / B), banjur caching nggunakake alat CDN minangka tugas sing bisa ditanggulangi, nanging luwih rumit. Layanan kaya Commanders Act, solusi manajemen tag, nggunakake webhooks nalika nerbitake versi anyar. Iki menehi kemampuan kanggo meksa siram cache ing CDN, utawa, luwih apik, kemampuan kanggo meksa nganyari hash utawa URL.
▍ Pangiriman materi sing adaptif kanggo klien
Kajaba iku, nalika kita pirembagan bab caching, kita kudu njupuk menyang akun kasunyatan sing setelan caching digunakake ing CDN bisa uga ora cocok kanggo sawetara sumber daya pihak katelu. Contone, sumber daya kasebut bisa nggunakake teknologi sniffing (pelayanan adaptif) pangguna kanggo nglayani browser tartamtu kanthi versi konten sing dioptimalake khusus kanggo browser kasebut. Teknologi kasebut gumantung marang ekspresi reguler, utawa basis data informasi header HTTP, kanggo ngerteni kemampuan browser. User-Agent. Sawise ngerti browser apa sing ditangani, dheweke menehi bahan sing dirancang kanggo kasebut.
Ing kene sampeyan bisa ngelingi rong layanan. Sing pertama yaiku googlefonts.com. Sing nomer loro yaiku polyfill.io. Layanan Google Fonts nyedhiyakake, kanggo sumber tartamtu, macem-macem kode CSS, gumantung saka kapabilitas browser (menehi pranala menyang sumber daya woff2 nggunakake unicode-range).
Iki minangka asil saka sawetara pitakon Google Font sing digawe saka macem-macem browser.
Asil pitakon Google Fonts saka Chrome
Asil pitakon Google Fonts dieksekusi saka IE10
Polyfill.io menehi browser mung polyfills sing dibutuhake. Iki ditindakake kanthi alasan kinerja.
Contone, ayo deleng apa sing kedadeyan yen sampeyan nglakokake panjaluk ing ngisor iki saka macem-macem browser:
Nanggepi panjalukan kasebut sing ditindakake saka IE10, 34 KB data bakal ditampa. Lan jawaban kasebut, sing dieksekusi saka Chrome, bakal kosong.
Angry: Sawetara pertimbangan privasi
Titik iki pungkasan ing urutan, nanging ora paling penting. Intine yaiku hosting sumber daya pihak katelu ing domain utama proyek utawa ing subdomain bisa mbebayani privasi pangguna lan mengaruhi proyek web utama.
Yen sistem CDN sampeyan ora dikonfigurasi kanthi bener, sampeyan bisa uga ngirim cookie domain menyang layanan pihak katelu. Yen panyaring sing tepat ora diatur ing tingkat CDN, cookie sesi sampeyan, sing biasane ora bisa digunakake ing JavaScript (karo httponly), bisa dikirim menyang host manca.
Iki persis sing bisa kedadeyan karo pelacak kaya Eulerian utawa Criteo. Pelacak pihak katelu bisa uga wis nyetel pengenal unik ing cookie. Yen minangka bagean saka materi situs, dheweke bisa maca pengenal miturut kawicaksanane nalika pangguna nggarap sumber daya web sing beda-beda.
Saiki, umume browser kalebu proteksi marang jinis prilaku tracker iki. Akibaté, pelacak saiki nggunakake teknologi , masquerading minangka script dhewe kanggo macem-macem proyek. Yaiku, pelacak nawakake pamilik situs kanggo nambah CNAME menyang setelan kanggo domain tartamtu, alamat sing biasane katon kaya set karakter acak.
Sanajan ora dianjurake supaya cookie situs web kasedhiya kanggo kabeh subdomain (contone - *.website.com), akeh situs sing nindakake iki. Ing kasus iki, cookie kasebut kanthi otomatis dikirim menyang tracker pihak katelu sing nyamar. Akibaté, kita ora bisa ngomong babagan privasi apa wae.
Uga, kedadeyan sing padha karo header HTTP , sing dikirim mung menyang domain utama, amarga bisa digunakake kanggo nggawe panganggo. Priksa manawa layanan CDN sing sampeyan gunakake nyaring header kasebut kanthi bener.
Hasil
Yen sampeyan lagi ngrancang kanggo ngleksanakake hosting sumber daya pihak katelu kanthi cepet, aku menehi saran:
- Tuan rumah perpustakaan JS, font lan file CSS sing paling penting. Iki bakal nyuda risiko gagal situs utawa degradasi kinerja amarga sumber daya penting kanggo situs ora kasedhiya amarga kesalahan layanan pihak katelu.
- Sadurunge sampeyan nyimpen sumber daya pihak katelu ing CDN, priksa manawa sawetara jinis sistem versi digunakake nalika menehi jeneng file, utawa sampeyan bisa ngatur siklus urip sumber daya kasebut kanthi manual utawa otomatis ngreset cache CDN nalika nerbitake versi anyar naskah.
- Ati-ati banget babagan CDN, server proxy, lan setelan cache. Iki bakal ngidini sampeyan nyegah proyek utawa header dikirim cookie
Client-Hintslayanan pihak katelu.
Para pamaca ingkang kinurmatan! Apa sampeyan dadi tuan rumah materi wong liya ing server sampeyan sing penting banget kanggo operasi proyek sampeyan?
Source: www.habr.com