Ambil waktu berjalan animasi dari homepage sepenuhnya

Performancekamo-marketing
Dikirim
19 Agustus 2026 pukul 20.27 UTC
Penulis
Kamo
Commit
f911fd4

Langkah A dari pekerjaan hydration. Framer Motion hilang dari homepage yang bersemangat bundel: 798,723 - > 687,593 byte mentah, 245.367 - > 209.422 gzip. Itu 35.945 lebih sedikit byte di atas kawat, terhadap prediksi 36,444 dibuat dengan mengukur potongan sebelumnya, ditambah parse dan eksekusi yang datang dengan itu. Empat belas komponen digunakan. Tidak salah satu dari mereka membutuhkannya. Tiap below - daerah -fold membuat sebuah 'while InView' atau sebuah 'use InView' dari react- intersection- pengamat untuk memudar isinya sampai pada gulungan. Itu dua perpustakaan dan batas hydration per bagian untuk melakukan apa 'animation- timeline: view ()' tidak secara native, pada kompoitor, tanpa waktu berjalan - dan itu membawa cacat yang sama pahlawan memiliki, karena serial Framer 'inisiatif' ke dalam server HTML. 96 elemen tiba di 'opasitas: 0' dan tinggal Tak terlihat sampai React dehidrasi. Konten di bawah lipatan digated pada JavaScript bundel. Ini adalah 9 sekarang, dan semua sembilan yang disengaja: JumpToBar sebelum pertama Gulungan, gulungan pahlawan sebelum dicari, dan tujuh hexagon dekorasi di opasitas 0.1-0.15 bahwa sebuah substring cocok untuk menangkap "opasitas: 0". '@ support (animation- timeline: view ()' guard adalah bagian load- bantalan. The aturan dasar '.expose' tidak ada opasitas sendiri, sehingga peramban tanpa scroll- driven animasi tidak berlaku apa-apa dan isinya hanya terlihat. Tidak ada di sini bisa Kapal konten tersembunyi, yang merupakan properti versi lama tidak memiliki. Sisanya lebih kecil dan lebih jelas salah tempat: 'While Hover' / 'whileTap' pada kartu dan tombol menjadi '.lift' dan '.press'. Umpan balik hover yang membutuhkan dehidrasi sebelum bekerja selalu salah bentuk. HoverMorph menjalankan loop keyframe * tak terbatas pada 'batas radius' - sebuah properti kompositor tidak dapat menghidupkan - selama pointer beristirahat pada kartu. Ini adalah transisi sekarang. Akordion FAQ yang tinggi animasi: 0 - > auto ', satu transisi CSS bisa tidak selama bertahun-tahun dan alasan yang wajar telah mencapai perpustakaan. Baris kisi pergi '0fr - > 1fr' melakukannya secara native. Jawabannya juga tetap di DOM sementara runtuh sekarang, dimana kehadiran transisi digunakan untuk melepaskan mereka, jadi find-in-page dan mesin pencari dapat melihat mereka; tombol-tombol yang diperoleh 'aria- expanded' mereka harus selalu memiliki. HeroOfferBanner mengimpor seluruh runtime untuk 'Use ReducedMotion', yaitu satu media query. Footer wrapped the locale-aware < Link > in 'motion.create' so a hover state bisa menghidupkan, yang menempatkan waktu-jalan dalam tata letak bersama setiap halaman. MagneticButton adalah satu hal yang benar-benar hilang. Ini memiringkan CTA terhadap adalah impor terakhir memegang 36 KB di tempat - untuk efek tidak ada perangkat sentuh dapat menghasilkan sama sekali. Tombol terus '.press'. File-nya tersisa di pohon, tidak digunakan; itu layak mengetahui bahwa importing lagi diam-diam mengembalikan waktu berjalan. Konversi dilakukan oleh scanner daripada dengan regex, dan dalam sesi scratchpad daripada repo karena itu adalah satu-off. atribut JSX nilai berisi nested kurung, string dan panah fungsi, jadi '< motion.div... >' tidak dapat dicocokkan dengan apapun yang tidak melacak kedalaman - setiap animasi - hanya Prop dijatuhkan dan segala sesuatu yang lain diawetkan verbatim dan dalam rangka. Setiap berkas diff dibaca secara individual sesudahnya; Features memiliki dua objek variant yang tersisa Kepada anak yatim yang memiliki hubungan kerabat, sebagai belas kasihan karena kekerabatan dan kemiskinannya. Apa ini TIDAK lakukan adalah menghentikan bagian-bagian hydrating - mereka semua masih '"gunakan klien"', karena HomeClient adalah, dan sebuah komponen klien tidak dapat mengimpor server satu. Itu Langkah B, dan itu adalah perubahan ke komposisi halaman agak daripada file-file ini. Langkah ini sengaja tanah sendiri sehingga mengungkapkan dapat melihat pada browser sebelum apapun bergerak struktural.

Semua perubahan

Seperti apa yang Anda lihat pengiriman?

Semua pembaruan ini secara otomatis mendarat di ruang kerja Anda. Mulai bebas dan menontonnya tumbuh minggu demi minggu.

Mulai Bebas SelamanyaTampilkan Harga