Prestasi tapak berpotensi metrik yang paling penting . Semakin baik prestasi, peluang yang lebih baik pengguna tetap berada di halaman, membaca kandungan, membuat pembelian, atau hampir apa yang mereka perlu lakukan. Kajian 2017 oleh Akamai mengatakan sebanyak yang mendapati bahawa walaupun kelewatan 100ms dalam beban halaman dapat mengurangkan penukaran sebanyak 7% dan kehilangan 1% daripada jualan mereka untuk setiap 100ms yang diperlukan untuk laman web mereka untuk memuatkan yang, pada masa kajian, bersamaan dengan $ 1.6 bilion jika laman web itu diperlahankan dengan hanya satu saat. Penanda aras industri Google dari tahun 2018 juga memberikan pecahan yang mencolok bagaimana setiap detik pemuatan mempengaruhi kadar lantunan.
Di sisi lain, Firefox membuat halaman web mereka memuatkan 2.2 saat lebih cepat secara purata dan ia mendorong 60 juta lebih banyak muat turun Firefox setiap tahun. Kelajuan juga sesuatu yang dipertimbangkan Google apabila kedudukan penempatan laman web anda di telefon bimbit. Mempunyai tapak yang perlahan mungkin meninggalkan anda di halaman 452 hasil carian, tanpa mengira mana -mana metrik lain.
Dengan semua ini, saya fikir meningkatkan kelajuan versi saya sendiri dari tapak yang perlahan akan menjadi latihan yang menyeronokkan. Kod untuk laman web ini boleh didapati di GitHub untuk rujukan.
Ini adalah tapak yang sangat asas yang dibuat dengan HTML, CSS, dan JavaScript yang mudah. Saya dengan sengaja cuba mengekalkan ini semudah mungkin, yang bermaksud sebabnya perlahan tidak ada kaitan dengan kerumitan tapak itu sendiri, atau kerana beberapa kerangka yang digunakannya. Mengenai bahagian yang paling kompleks adalah beberapa butang media sosial untuk orang berkongsi halaman.
Inilah perkara: prestasi adalah lebih daripada satu tugas. Ia sememangnya terikat dengan segala yang kita bina dan berkembang. Jadi, walaupun ia menggoda untuk menyelesaikan segala -galanya dalam satu kejatuhan, pendekatan terbaik untuk meningkatkan prestasi mungkin menjadi berulang. Tentukan jika ada buah-buahan yang rendah, dan tentukan apa yang mungkin lebih besar atau usaha jangka panjang. Dalam erti kata lain, penambahbaikan tambahan adalah cara terbaik untuk menjaringkan kemenangan prestasi. Sekali lagi, setiap kiraan milisaat.
Dalam semangat itu, apa yang kita lihat dalam artikel ini memberi tumpuan lebih kepada kemenangan tambahan dan kurang menyediakan senarai lengkap atau senarai semak strategi prestasi.
Kami akan bekerja dengan Lighthouse. Ramai di antara kamu mungkin sudah terlalu akrab dengannya. Ia juga telah diliputi sekumpulan di sini pada trik CSS. Ia adalah perkhidmatan Google yang mengaudit prestasi, aksesibiliti, SEO, dan amalan terbaik. Saya akan mengaudit prestasi tapak perlahan saya sebelum dan selepas perkara -perkara yang kita jalankan dalam artikel ini. Laporan Lighthouse boleh diakses secara langsung di Devtools Chrome.
Teruskanlah, lihatlah perkara -perkara yang dikatakan oleh Lighthouse adalah salah dengan laman web. Adalah baik untuk mengetahui apa yang perlu diselesaikan sebelum menyelam tepat.
Kita benar -benar boleh membetulkannya, jadi mari kita mulakan!
Sebelum kita melakukan apa -apa lagi, mari kita lihat apa yang berlaku apabila kita mula -mula memukul laman web. Ia akan diarahkan. Laman ini digunakan untuk berada di satu URL dan sekarang ia hidup di tempat lain. Ini bermakna apa -apa pautan yang merujuk URL lama akan mengarahkan ke URL baru.
Redirects sering cukup ringan dari segi latensi yang mereka tambahkan ke laman web, tetapi mereka adalah perkara pertama yang mudah untuk diperiksa, dan mereka secara amnya boleh dikeluarkan dengan sedikit usaha.
Kami boleh cuba membuangnya dengan mengemas kini di mana sahaja kami menggunakan URL sebelumnya di laman web ini, dan menunjuk ke URL yang dikemas kini supaya pengguna dibawa ke sana secara langsung dan bukannya diarahkan. Menggunakan Inspektor Permintaan Rangkaian, saya akan melihat sama ada ada apa -apa yang boleh kita keluarkan melalui panel rangkaian di DevTools. Kita juga boleh menggunakan alat, seperti Postman jika kita perlu, tetapi kita akan mengehadkan kerja kita ke DevTools sebanyak mungkin demi kesederhanaan.
Pertama, mari kita lihat jika terdapat pengalihan HTTP atau HTML. Saya suka menggunakan Fiddler, dan apabila saya memeriksa permintaan rangkaian, saya melihat bahawa terdapat beberapa URL lama dan pengalihan yang terapung.
Saya baru -baru ini menamakan semula github saya dari Anonrobot ke Kealanparr , jadi semuanya adalah sama kecuali nama domain.
Ia kelihatan seperti permintaan pertama yang kami pukul adalah https://anonrobot.github.io/redirect-to-slow-site/ sebelum ia mengalihkan html ke https://anonrobot.github.io/slow-site/. Kami boleh mengulangi semua URL-URL kami ke URL kami ke URL yang dikemas kini. Di DevTools, pemeriksa rangkaian membantu kita melihat apa yang dilakukan oleh laman web pertama juga. Dari pandangan saya di Fiddler nampaknya ini:
Ini memberitahu kami bahawa laman web ini menggunakan pengalihan HTML ke tapak seterusnya. Saya akan mengemas kini URL yang dirujuk ke laman web baru untuk membantu mengurangkan latensi yang menambah seret ke beban halaman awal.
Seterusnya, saya akan profil duduk dengan panel prestasi di DevTools. Saya paling berminat untuk menyekat laman web ini daripada memberikan kandungan secepat mungkin. Ini adalah proses mengubah HTML, CSS dan JavaScript menjadi laman web interaktif sepenuhnya.
Ia bermula dengan mengambil HTML dari pelayan dan menukarnya ke dalam Model Objek Dokumen (DOM). Kami akan menjalankan mana-mana JavaScript sebaris seperti yang kita lihat, atau memuat turunnya jika ia adalah aset luaran kerana kami pergi ke barisan dengan garis HTML. Kami juga akan membina CSS ke dalam model objek CSS (CSSOM). CSSOM dan DOM menggabungkan untuk membuat pokok render. Dari sana, kami menjalankan susun atur yang meletakkan segala -galanya di skrin di tempat yang betul sebelum akhirnya menjalankan cat.
Proses ini boleh "disekat" jika ia perlu menunggu sumber untuk dimuat sebelum ia berjalan. Itulah yang kita sebut jalan kritikal , dan perkara -perkara yang menghalang jalan adalah sumber kritikal .
Sumber kritikal yang paling biasa adalah:
Terdapat beberapa jenis sumber yang mungkin menghalang laluan kritikal, seperti fon, tetapi kedua -dua di atas adalah yang paling biasa. Sumber -sumber ini menyekat kerana penyemak imbas menganggap halaman itu "belum selesai" dan tidak tahu apa sumber yang diperlukan atau ada. Untuk semua penyemak imbas tahu, laman web ini boleh memuat turun sesuatu yang mengharapkan penyemak imbas melakukan lebih banyak kerja, seperti gaya gaya atau warna; Oleh itu, laman web ini tidak lengkap kepada penyemak imbas, jadi ia menganggap yang terburuk dan blok rendering.
Contoh fail CSS yang tidak akan menyekat rendering adalah:
<link href="printing.css" rel="stylesheet" media="print">
Atribut "media =" cetak "hanya memuat turun stylesheet apabila pengguna mencetak laman web (kerana mungkin anda ingin gaya perkara yang berbeza dalam cetakan), yang bermaksud fail itu sendiri tidak menyekat apa -apa dari rendering sebelum itu.
Seperti yang dikatakan oleh Chris, pemaju depan sedar. Dan menyedari apa yang perlu dimuat turun oleh halaman sebelum rendering bermula sangat penting untuk meningkatkan skor audit prestasi.
Menyekat jalan render adalah satu perkara yang kita dapat dengan segera mempercepatkan, dan kita juga boleh menyekat parsing jika kita tidak berhati -hati dengan JavaScript kita. Parsing adalah apa yang menjadikan unsur -unsur HTML sebahagian daripada DOM, dan apabila kita menemui JavaScript yang perlu dijalankan sekarang, kita menyekat penguraian HTML yang berlaku.
Sesetengah JavaScript dalam laman web perlahan saya tidak perlu menyekat parsing. Dalam erti kata lain, kita boleh memuat turun skrip secara asynchronously dan terus menguraikan HTML ke dalam DOM tanpa berlengah -lengah.
Tag
Terdapat perdagangan di sini di antara JavaScript yang terbabas (jadi menjalankannya tidak memerlukan permintaan rangkaian) berbanding meletakkannya ke dalam fail JavaScript sendiri (untuk modularity dan penggunaan semula kod). Jangan ragu untuk membuat panggilan penghakiman anda sendiri di sini kerana laluan terbaik akan bergantung kepada kes penggunaan. Prestasi sebenar memohon CSS dan JavaScript ke laman web akan sama sama ada ia adalah aset luaran atau digariskan, sebaik sahaja ia tiba. Satu -satunya perkara yang kita berikan apabila kita sebaris adalah masa permintaan rangkaian untuk mendapatkan aset luaran (yang kadang -kadang membuat perbezaan besar).
Perkara utama yang kami targetkan adalah untuk melakukan sedikit sebanyak mungkin. Kami mahu menangguhkan aset memuatkan dan membuat aset tersebut sekecil mungkin pada masa yang sama. Semua ini akan diterjemahkan ke dalam hasil prestasi yang lebih baik.
Tapak perlahan saya adalah memanfaatkan pelbagai permintaan kritikal, di mana penyemak imbas perlu membaca baris HTML seterusnya, tunggu, kemudian baca seterusnya untuk memeriksa aset lain, kemudian tunggu. Saiz aset, apabila mereka dimuat turun, dan sama ada mereka menyekat semua akan bermain dengan pantas ke seberapa cepat laman web kami boleh dimuatkan.
Saya menghampiri ini dengan memaparkan tapak di panel Prestasi DevTools, yang hanya merekodkan cara memuatkan tapak dari masa ke masa. Saya secara ringkas mengimbas HTML saya dan apa yang dimuat turun, kemudian ditambah
Adalah menarik bahawa Chrome mempunyai had penyemak imbas di mana ia hanya dapat menangani enam sambungan HTTP setiap nama domain, dan akan menunggu aset untuk kembali sebelum meminta yang lain apabila enam orang berada dalam penerbangan. Itu menjadikan meminta pelbagai aset kritikal lebih buruk lagi untuk parsing HTML. Membenarkan penyemak imbas untuk meneruskan parsing akan mempercepatkan masa yang diperlukan untuk menunjukkan sesuatu kepada pengguna, dan meningkatkan audit prestasi kami.
Jumlah saiz tapak adalah faktor penentu yang besar tentang seberapa cepat ia akan dimuatkan. Menurut Web.dev, tapak harus bertujuan untuk berada di bawah 1,600 kb interaktif di bawah 10 saat. Muatan besar sangat berkorelasi dengan masa yang lama untuk memuatkan. Anda juga boleh mempertimbangkan muatan yang besar sebagai perbelanjaan kepada pengguna akhir, kerana muat turun yang besar mungkin memerlukan pelan data yang lebih besar yang memerlukan lebih banyak wang.
Pada masa yang tepat, tapak perlahan saya adalah kekalahan 9,701 kb - lebih daripada enam kali saiz ideal. Mari kita memotongnya.
Pada permulaan perkembangan saya, saya fikir saya mungkin memerlukan aset atau kerangka tertentu. Saya memuat turunnya ke halaman saya dan kini tidak dapat mengingati mana yang sebenarnya digunakan. Saya pasti mempunyai beberapa aset yang tidak melakukan apa -apa tetapi membuang masa dan ruang.
Menggunakan Inspektor Rangkaian di DevTools (atau alat yang anda rasa selesa), kita dapat melihat beberapa perkara yang pasti dapat dikeluarkan dari tapak tanpa mengubah tingkah laku yang mendasari. Saya dapati banyak nilai dalam panel liputan di DevTools kerana ia akan menunjukkan berapa banyak kod yang digunakan selepas semuanya dimuat turun.
Seperti yang telah kita bincangkan, selalu ada keseimbangan yang baik ketika membatalkan CSS dan JavaScript berbanding menggunakan aset luaran. Tetapi, pada masa ini, pastinya kelihatan bahawa laman web ini memuat turun terlalu banyak daripada yang benar -benar diperlukan.
Satu lagi cara cepat untuk memangkas perkara -perkara adalah untuk mencari sama ada mana -mana aset laman web ini cuba memuat 404s. Permintaan tersebut pasti boleh dikeluarkan tanpa sebarang kesan negatif ke laman web ini kerana mereka tidak memuatkan lagi. Inilah yang ditunjukkan oleh Fiddler:
Melihat lagi pada laporan liputan, kami tahu ada perkara yang dimuat turun tetapi mempunyai sejumlah besar kod yang tidak digunakan masih membuat perjalanan ke halaman. Dalam erti kata lain, aset ini melakukan sesuatu, tetapi juga bersedia untuk melakukan perkara -perkara yang kita tidak perlukan untuk mereka lakukan. Ini termasuk React, JQuery dan Vue, jadi mereka boleh dikeluarkan dari tapak perlahan saya tanpa kesan sebenar.
Mengapa begitu banyak perpustakaan JavaScript? Nah, kita tahu ada senario kehidupan sebenar di mana kita mencapai sesuatu kerana ia memenuhi keperluan kita; Tetapi kemudian keperluan tersebut berubah dan kita perlu mencapai sesuatu yang lain. Sekali lagi, kita harus sedar sebagai pemaju depan, dan terus mengawasi sumber apa yang berkaitan dengan tapak adalah sebahagian daripada kesedaran keseluruhan.
Hanya kerana kita perlu melayani aset tidak bermakna kita perlu melayani ia sebagai saiz penuh, atau bahkan melayani semula aset tersebut pada masa akan datang pengguna melawat laman web ini. Kami boleh memampatkan aset kami, meminimumkan gaya dan skrip kami, dan perkara -perkara cache yang bertanggungjawab supaya kami melayani apa yang pengguna perlukan dengan cara yang paling berkesan.
Mari kita lihat tiga jenis aset dan bagaimana untuk mengetuk mereka dengan taktik ini.
Ini termasuk fail teks, seperti HTML, CSS dan JavaScript. Kami mahu melakukan segala -galanya dalam kuasa kami untuk menjadikannya sebagai ringan yang mungkin, jadi kami memampatkan, meminimumkan, dan cache mereka jika mungkin.
Pada tahap yang sangat tinggi, GZIP berfungsi dengan mencari bahagian yang biasa dan berulang dalam kandungan, menyimpan urutan ini sekali, kemudian menghilangkannya dari teks sumber. Ia menyimpan penampilan seperti kamus sehingga dapat dengan cepat merujuk kepingan-kepingan yang disimpan dan meletakkannya kembali di tempat di mana mereka berada, dalam proses yang dikenali sebagai gunzipping. Semak contoh -contoh ini yang mengandungi fail yang mengandungi puisi.
Kami melakukan ini untuk membuat apa-apa muat turun berasaskan teks sekecil yang kami boleh. Kami sudah menggunakan GZIP. Saya memeriksa menggunakan alat ini oleh gidnetwork. Ia menunjukkan bahawa kandungan tapak perlahan adalah 59.9% dimampatkan. Ini mungkin bermakna terdapat lebih banyak peluang untuk membuat perkara lebih kecil.
Saya memutuskan untuk menyatukan fail CSS berganda ke dalam satu fail tunggal yang dipanggil Styles.css. Dengan cara ini, kami mengehadkan bilangan permintaan rangkaian yang diperlukan. Selain itu, jika kita memecahkan tiga fail, masing -masing mengandungi sejumlah kecil CSS bahawa tiga permintaan rangkaian hanya tidak wajar.
Dan, semasa melakukan ini, ia memberi saya peluang untuk menghapuskan pemilih CSS yang tidak perlu yang tidak diterapkan di DOM di mana sahaja, sekali lagi mengurangkan bilangan bait yang dihantar kepada pengguna.
Ilya Grigorik menulis artikel yang sangat baik dengan strategi untuk memampatkan aset berasaskan teks.
Kami juga dapat mengoptimumkan imej di tapak yang perlahan. Seperti yang ditunjukkan secara konsisten, imej adalah permintaan aset yang paling biasa. Malah, pemindahan data median untuk imej adalah 948.1 kb untuk desktop dan 902 kb untuk peranti mudah alih dari 2016 hingga 2021. Itu sudah lebih daripada separuh daripada saiz 1,600kb yang ideal untuk beban halaman keseluruhan.
Tapak perlahan saya tidak berfungsi dengan banyak imej, tetapi imej yang berfungsi boleh menjadi lebih kecil. Saya berlari imej melalui alat dalam talian yang dipanggil Squoosh, dan mencapai simpanan 40% (18.6 kb hingga 11.2 kb). Itu kemenangan! Sudah tentu, ini adalah sesuatu yang boleh anda lakukan sebelum memuat naik menggunakan aplikasi desktop, seperti ImageOptim, atau bahkan sebagai sebahagian daripada proses binaan anda.
Saya tidak dapat melihat sebarang perbezaan visual antara imej asal dan versi yang dioptimumkan (yang hebat!) Dan saya juga dapat mengurangkan saiz lebih jauh dengan mengubah saiz fail sebenar, mengurangkan kualiti imej, dan juga mengubah palet warna. Tetapi itu adalah perkara yang saya lakukan dalam perisian penyuntingan imej. Idealnya, itu sesuatu yang anda atau pereka akan lakukan ketika pada mulanya membuat aset.
Kami telah menyentuh minifikasi dan pemampatan dan apa yang boleh kami lakukan untuk mencuba dan menggunakannya untuk kelebihan kami. Perkara terakhir yang boleh kita periksa ialah caching.
Saya telah meminta tapak perlahan berulang kali dan, setakat ini, saya dapat melihatnya selalu kelihatan seperti ia diminta segar setiap kali tanpa apa -apa caching. Saya melihat melalui HTML dan melihat caching melumpuhkan di sini:
<meta http-equiv="cache-control" content="no-cache, no-store, mesti-revalidate">
Saya mengeluarkan garis itu, jadi caching penyemak imbas kini dapat berlaku, membantu melayani kandungan lebih cepat.
Satu lagi peningkatan besar yang boleh kami buat di mana -mana laman web adalah berkhidmat sebanyak yang anda boleh dari rangkaian penghantaran kandungan (CDN). David Attard mempunyai sekeping yang sangat teliti mengenai cara menambah dan memanfaatkan CDN. Jalan tradisional untuk menyampaikan kandungan adalah untuk memukul pelayan, meminta data, dan tunggu untuk kembali. Tetapi jika pengguna meminta data dari jalan di seberang dunia dari mana data anda disampaikan, dengan baik, yang menambah masa. Membuat bait perjalanan lebih jauh dalam respons dari pelayan boleh menambah sehingga kerugian besar kelajuan, walaupun segala -galanya adalah kilat cepat.
CDN adalah satu set pelayan yang diedarkan di seluruh dunia yang mampu menyampaikan kandungan yang lebih dekat kepada pengguna kerana ia mempunyai banyak lokasi yang dipilih untuk menyampaikannya.
Kami membincangkan lebih awal bagaimana saya membuat pengguna memuat turun jQuery apabila ia tidak menggunakan kod yang dimuat turun, dan kami mengeluarkannya. Satu pembetulan mudah di sini, jika saya benar -benar memerlukan jQuery, adalah meminta aset dari CDN. Kenapa?
Kita boleh melakukan sesuatu semudah meraih jQuery dari CDN Google, yang mereka sediakan untuk sesiapa sahaja untuk merujuk di laman web mereka sendiri:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
Itu berfungsi dengan lebih cepat daripada permintaan standard dari pelayan saya, itu pasti.
Sekiranya anda telah melaksanakan bersama saya setakat ini, atau hanya membaca, sudah tiba masanya untuk memprofilan semula dan melihat apakah penambahbaikan telah dibuat mengenai apa yang telah kami lakukan setakat ini.
Ingat di mana kita bermula:
Selepas perubahan kami:
Saya harap ini dapat membantu dan menggalakkan anda mencari kemenangan prestasi tambahan di laman web anda sendiri. Dengan meminta aset secara optimum, menangguhkan beberapa aset dari pemuatan, dan mengurangkan saiz keseluruhan saiz tapak akan mendapat tapak yang berfungsi sepenuhnya, sepenuhnya interaktif di hadapan pengguna secepat mungkin.
Ingin terus perbualan? Saya berkongsi tulisan saya di Twitter jika anda ingin melihat lebih banyak atau menyambung.
Atas ialah kandungan terperinci Memperbaiki tapak perlahan secara berulang -alik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Aplikasi platform dagangan Ouyi
Kaedah pelaksanaan fungsi main balik dalam talian Python
Apakah yang termasuk storan penyulitan data?
Peranan fungsi pengesahan
Pemulihan data pemacu keadaan pepejal
Apakah perbezaan antara webstorm dan idea?
Kaedah pertanyaan nama domain peringkat kedua
Apakah had pemindahan Alipay?
Apakah yang perlu saya lakukan jika eDonkey Search tidak dapat menyambung ke pelayan?
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
