Pembelajaran dari Sesi WebpageTest di Trik CSS

Saya berkumpul dengan Tim Kadlec dari WebpageTest pada hari yang lain untuk digunakan melakukan sedikit ujian prestasi pada trik CSS. Pada dasarnya menggunakan alat ini, mencucuk, dan mengenal pasti titik kesakitan prestasi untuk berfungsi. Anda boleh menonton video di sini di laman web ini, atau di saluran Twitch mereka, yang bernilai melanggan lebih banyak penyiasatan prestasi seperti ini.

Kerja prestasi web dua kali ganda:

Langkah 1) Mengukur perkara & meneroka masalah
Langkah 2) Betulkannya

Tim dan saya, melalui alat yang menakjubkan iaitu WebpageTest, melakukan banyak langkah 1. Saya mengambil nota ketika kami mencubit. Kami mendapati beberapa kawasan masalah, agak besar! Sudah tentu, selepas itu, saya tidak dapat mengeluarkannya dari kepala saya, jadi saya terpaksa beraksi dan melakukan perkara -perkara Langkah 2 sebaik sahaja saya dapat, dan saya gembira melaporkan saya telah melakukan kebanyakannya dan melihat peningkatan. Mari menggali!

Masalah yang dikenal pasti #1) LCP yang lemah

Cat Terbesar (LCP) adalah salah satu teras Web Vitals (CWV), yang semua orang menonton dengan teliti sekarang dengan Google memberitahu kami ia adalah faktor SEO. LCP saya sedang mencatat pada 3.993s yang tidak bagus.

Saya belajar dari Tim bahawa ia adalah ideal jika Cat Contentfful pertama (FCP) mengandungi LCP. Kami dapat melihat yang tidak berlaku melalui WebpageTest.

Perkara yang perlu diperbaiki:

• Pastikan kawasan LCP, yang akhirnya menjadi imej yang besar, dioptimumkan dengan betul, mempunyai SRCSET responsif, dan CDN dihoskan. Semua perkara itu gagal pada imej tertentu yang bekerja di tempat lain.
• Imej LCP telah memuatkan = "malas" di atasnya, yang hanya kita pelajari bukan tempat yang baik untuk itu.

Memperbaiki Teknik dan Pembelajaran:

• Semua barangan pengendalian imej yang betul ada di tempat, tetapi atas sebab apa pun, tidak ada yang berfungsi untuk fail .gif, yang mana imej itu adalah hari ujian. Kami mungkin tidak boleh menggunakan fail .gif untuk kawasan itu pula.
• Matikan pemuatan malas imej LCP. Ini adalah imej yang dipaparkan oleh WordPress, jadi saya pada dasarnya perlu melakukan 'eager')); ?>. Jika ia adalah imej sebaris, saya akan melakukan yang memberitahu WordPress apa yang perlu diketahui.

Masalah yang dikenal pasti #2) Byte pertama untuk memulakan jurang membuat

Tim melihat ini segera sebagai masalah yang jelas.

Di dalam air terjun di atas (di sini adalah artikel terperinci mengenai Air Terjun dari Matt Hobbs), anda dapat melihat HTML tiba dalam kira -kira 0.5 saat, tetapi permulaan rendering (apa yang orang lihat, Big Green Line), tidak bermula sehingga kira -kira 2.9 saat. Itu terlalu lama.

Carta juga mengenal pasti masalah dalam garis kuning. Saya menghubungkan ke fail CSS pihak ketiga, yang kemudiannya mengalihkan ke fail CSS saya sendiri yang mengandungi fon tersuai. Itu mengalihkan kos masa, dan ketika kami menggali, bukan hanya masa pertama halaman-halaman, tetapi setiap beban halaman tunggal, bahkan beban halaman cache .

Perkara yang perlu diperbaiki:

• Hilangkan fail CSS Redirect.
• Fon tuan rumah sendiri.

Memperbaiki Teknik dan Pembelajaran:

• Saya telah melihat beberapa fon baru. Saya tidak lama lagi bahawa saya sangat suka inovasi pelesenan massa (harga oleh pekerja), tetapi saya sama-sama suka MD Primer, jadi saya membelinya. Untuk jenis badan, saya terjebak dengan serif yang selesa dengan Blanco, yang dengan penuh belas kasihan datang dengan versi Ribbi ¹ yang sangat baik. Kali seterusnya saya bersumpah saya akan mencari font berubah -ubah, tapi hei, anda mesti mengikuti hati anda kadang -kadang. Saya membeli ini, dan kini hosting sendiri font-files.
• Gunakan @font-face tepat di CSS saya sendiri, tanpa pengalihan. Juga menggunakan font-paparan: swap;, tetapi harus bekerja sedikit lebih banyak pada teknik pemuatan itu. Tidak sabar menunggu saiz-penyesuaian.

Setelah menguji semula dengan perubahan di tempat, anda dapat melihat pada halaman artikel besar yang dimulakan adalah 2 saat penuh lebih cepat pada sambungan 4G:

Masalah yang dikenal pasti #3) CLS pada panduan grid tidak baik

Tim mempunyai trik yang kemas sehingga lengannya untuk mengukur peralihan susun atur kumulatif (CLS) di halaman. Anda boleh mengarahkan WebPageTest untuk menatal ke bawah halaman untuk anda. Ini penting untuk sesuatu seperti CLS, kerana peralihan susun atur mungkin berlaku kerana menatal.

Lihat artikel ini mengenai CLS dan WebpageTest.

Caranya menggunakan tetapan lanjutan untuk menyuntik JavaScript tersuai ke halaman semasa ujian:

Pada ketika ini, kami tidak menguji laman utama, tetapi dengan sengaja halaman yang sangat penting: panduan lengkap kami untuk grid. Dengan ini, anda dapat melihat CWV berada dalam keadaan yang lebih buruk:

Saya tidak tahu apa yang perlu difikirkan mengenai LCP. Itu dicetuskan oleh apa yang berlaku sebagai imej terbesar yang jauh jauh ke halaman.

CLS lebih mengenai, kepada saya, kerana susun atur peralihan sentiasa menjengkelkan kepada pengguna. Lihat semua garis oren bertitik ini? Itu adalah CLS berlaku:

Perkara yang perlu diperbaiki:

• CLS adalah buruk kerana imej yang dimuatkan malas masuk dan mengalihkan susun atur.

Memperbaiki Teknik dan Pembelajaran:

• Saya tidak tahu! Semua imej itu adalah inline elemen. Saya mendapat pemuatan malas boleh menyebabkan CLS, tetapi imej -imej ini mempunyai atribut lebar dan ketinggian yang betul, yang sepatutnya menempah ruang yang tepat untuk imej (walaupun cecair, terima kasih kepada nisbah aspek) walaupun sebelum ia dimuatkan. Jadi ... apa yang memberi? Adakah kerana mereka SVG?

Sekiranya ada yang tahu, jangan ragu untuk memukul saya. Begitulah sifat kerja prestasi, saya dapati. Ia adalah campuran kemenangan mudah dari kesilapan bodoh, pertempuran kecil yang anda boleh bertarung dan menang, pertempuran yang lebih besar yang kadang -kadang melibatkan pengaruh luar yang lebih sukar untuk menang, dan tidak diketahui misteri yang memerlukan masa untuk sembuh. Nasib baik kami mempunyai alat seperti WebpageTest untuk memberitahu kami cerita -cerita sebenar yang berlaku di laman web kami dan memberi kami wawasan yang kami perlukan untuk melawan pertempuran prestasi ini.

1. Ribbi, saya baru belajar, bermakna biasa, italic, berani, dan berani Italic. Kombo klasik yang kebanyakannya menyalin badan pada keperluan web. ⮑

Atas ialah kandungan terperinci Pembelajaran dari Sesi WebpageTest di Trik CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!