Tantangan Performa Front-End: Pemenang Dan Hasil

Beberapa minggu yang lalu, kami meminta pembaca dan komunitas kami untuk menggunakan semua yang mereka bisa untuk membuat situs web dan proyek mereka berkinerja sangat cepat. Hari ini, kami sangat senang untuk memamerkan hasil dari tantangan ini dan mengumumkan pemenang yang memang akan diberikan beberapa hadiah besar!

Hadiah apa, Anda bertanya? Pemenangnya memenangkan penerbangan pulang pergi ke London, akomodasi penuh di hotel mewah, tiket ke SmashingConf London 2018, dan yang tak kalah pentingnya, lokakarya Smashing pilihan mereka.

Tantangan? Tantangan apa?

Yah, tugas itu tidak sesederhana kedengarannya. Para kontestan diminta untuk meningkatkan kinerja situs web sambil menjaga tampilan visual akhir tetap sama sebelum dan sesudah. Pemuatan font diizinkan untuk berbeda, dan reflow dapat diterima selama mereka dijaga agar tetap minimum.

Saat memilih pemenang yang beruntung, kami melihat hasil yang disajikan oleh Lighthouse dan WebPageTest, serta kompleksitas situs web yang telah dikerjakan oleh peserta kami, tentu saja. Cat bermakna pertama dan waktu untuk interaktif adalah metrik yang paling penting.

Tapi cukup fakta sulit untuk saat ini. Kami tahu Anda sudah penasaran, dan kami tidak ingin membuat Anda tegang lagi. Jadi ini dia, proyek pemenang.

Dan pemenangnya adalah…

Leonardo Losoviz

Teknik optimasi yang disajikan dalam pengajuan Leonardo semuanya DIY, dirancang dan diimplementasikan dari awal. Dia menambahkan semua pengoptimalan ke PoP, kerangka kerja sumber terbuka untuk membangun situs web, dan menggunakan Agenda Urbana untuk menguji peningkatan kinerja pada proyek yang sebenarnya.

Kami merasa pengajuan ini benar-benar masuk ke dalam semangat tantangan dengan tidak hanya meningkatkan kinerja satu situs web tetapi mencoba melakukan penyempurnaan pada kerangka kerja yang digunakan di sejumlah situs web. Fakta bahwa PoP didukung oleh WordPress berarti bahwa Leonardo berada dalam situasi yang mirip dengan banyak orang yang tidak dapat melakukan beberapa hal yang tersedia untuk kerangka kerja JavaScript. Seperti yang dia catat:

PoP dibangun di atas WordPress. Itu berarti bahwa banyak teknik pengoptimalan inovatif yang tersedia untuk kerangka kerja Javascript, seperti pemecahan kode menggunakan Webpack atau Service Worker melalui sw-precache, berada di luar jangkauan (setidaknya begitu tanpa solusi besar). Dengan demikian, semua teknik pengoptimalan yang dijelaskan di bawah ini semuanya DIY, dirancang dan diimplementasikan dari awal.

Jika Anda tertarik untuk menggali semua detail seluk beluk kirimannya, jangan ragu untuk melakukannya. Kami semua senang membaca detail pengoptimalan Leonardo dan menganggapnya sebagai pemenang yang layak karena banyaknya pekerjaan yang telah dilakukan untuk entri ini.

Semua Kiriman

Kami sangat senang dengan kualitas kiriman yang kami terima, dan sejujurnya tidak mudah untuk memilih pemenang. Terima kasih kepada semua orang yang telah mengirimkan — teruskan karya yang brilian!

Jorgen Verweij

Jorgen Verweij mempresentasikan versi yang dioptimalkan dari situs web perusahaannya Perplex Internetmarketing BV. Bersama dengan tim yang terdiri dari UX'er, front-end, dan pengembang back-end, dan administrator sistem, ia memulai upaya kinerja.

Hasilnya adalah implementasi yang sangat baik dengan hasil perf yang sangat baik di seluruh papan: SpeedIndex jauh di bawah target yang ditetapkan 1250, waktu buka kurang dari 1 detik, mulai render dalam setengah detik, ¹⁰⁰ ₁₀₀ PageSpeedscore dan audit Lighthouse yang hampir sempurna . Dibandingkan dengan situasi lama, waktu buka hampir delapan kali lebih cepat. Pujian! Anda dapat membaca detail lebih lanjut tentang prosesnya dalam artikel komprehensif yang disusun oleh Jorgen ini.

Marco Hengstenberg

Marco Hengstenberg mengajukan versi yang dioptimalkan dari situs web agen pariwisata Land in Sicht . Untuk meningkatkan kinerja, Marco menggunakan cukup banyak trik dan teknik kecil yang bagus. Pramuat lembar gaya utama dan pemuatan font kritis dengan pramuat di browser pendukung hanyalah dua di antaranya. Dia juga merestrukturisasi HTML untuk membuatnya sedatar, semantik, dan dapat diakses semaksimal mungkin dan mengurangi jumlah data yang awalnya ditransfer pada kunjungan pertama dari hampir 3MB menjadi 1,3MB di desktop (dan karena penggunaan gambar responsif untuk gambar pahlawan, itu bahkan kurang dari itu pada layar sempit).

Untuk merampingkan situs, terlebih lagi, Marco menghapus Bootstrap, jQuery, dan Modernizr, menyiapkan proses pembuatan dengan Grunt, dan memperkenalkan ServiceWorker yang membuat situs juga tersedia secara offline. Upaya itu sepadan: Hasilnya adalah TTL dramatis yang turun dari 32 detik menjadi 2 detik dan hampir 50% penurunan permintaan HTTP dan byte yang ditransfer (lihat juga laporan Lighthouse, ZIP 251KB). Pramuat dan perenderan awal yang cepat keduanya membantu pada waktu muat yang dirasakan. Kerja bagus!

Gabriel Mariani

Situs web San Diego Christian College adalah situs tempat Gabriel Mariani menerapkan keterampilan kinerjanya. Dia membagi proses optimasi menjadi empat langkah. Pertama, dia memotong semua gambar ke ukuran maksimum yang sebenarnya dibutuhkan dan membuat versi skala selulernya. Dia kemudian membuat semua gambar malas memuat. Langkah kedua berfokus pada JavaScript dan menghapus semua skrip sebaris yang disertakan dengan situs WordPress dan tema serta plugin pihak ketiganya. Kemudian dia mengantrekan skrip sebanyak mungkin sehingga Autoptimize dapat mengambilnya dan mengecilkan/menggabungkannya menjadi satu file.

Gabriel juga memangkas jumlah font yang digunakan dan mengatur font Google untuk dimuat secara async sehingga jalur kritis CSS akan dimuat terlebih dahulu. Last but not least, dia membahas beberapa peluang kecil lainnya dan tujuan seperti menyesuaikan plugin WordPress, jadi mereka mengandalkan ajax daripada PHP. Ini memungkinkan dia untuk mengaktifkan caching halaman dan akhirnya mengaktifkan CDN untuk situs tersebut. Peralihan ke HTTP/2 dan HTTPS adalah langkah terakhir. Lihat WebPageTest untuk hasil lengkapnya. Bagus!

Alexander Zarges

Alexander Zarges mengembangkan Cloud Player, aplikasi web satu halaman berdasarkan Angular 4 yang memungkinkan Anda mencari dan memutar aplikasi YouTube dan SoundCloud. Versi yang ditingkatkan menggunakan kompiler Angular sebelumnya untuk mencapai waktu inisialisasi sekitar 2,9 detik (dibandingkan dengan 5,2 detik saat menggunakan kompiler just-in-time). Jika Anda ingin mempelajari kode lebih dalam, lihat repositori GitHub yang menyertainya.

Bradly mengejek

Bradley Taunt mengambil tantangan kami sebagai kesempatan untuk bereksperimen dengan situs pribadinya. Sebagai dasar untuk upaya pengoptimalannya, ia menggunakan beranda dan artikel yang sarat gambar. Untuk mempersingkat waktu pemuatan artikel menjadi 4,2 detik, Bradley default ke Font Sistem OS pengguna alih-alih menggunakan font web, antara lain.

Untuk peningkatan ekstra, versi yang dioptimalkan juga menyejajarkan CSS penting, menyajikan gambar responsif, dan menggunakan caching CDN. Anda bisa melihat lebih detail di balik layar, dalam posting blog yang ditulis Bradley tentang bagaimana dia mengatasi tantangan.

John Beales

John Beales menantang dirinya sendiri untuk meningkatkan kinerja 4RoadService.com. Ketika dia memulai, sudah ada beberapa pengoptimalan. Gambar statis dijalankan melalui ImageOptim, misalnya, CSS dan JS diperkecil, mereka menjalankan CDN melalui CloudFlare, dan situs sudah menggunakan pemuat gaya Aplikasi Satu Halaman sehingga konten baru selalu diambil oleh XHR dan halamannya tidak pernah sepenuhnya digambar ulang.

Untuk tantangan ini, John mengaktifkan Pengoptimalan Gambar dan kompresi WebP di Cloudflare. Situs yang diperbarui sekarang menggunakan HTTP/2 Server Push untuk mengirimkan file CSS dan JS utama dengan pemuatan halaman awal dan bergantung pada Guetzli untuk kompresi JPEG. Untuk mengoptimalkan caching, ia memperbarui URL semua aset statis sehingga URL akan berubah setiap kali aset berubah, lalu menyetel semua aset statis ke cache selama setahun. Untuk caching gambar yang lebih baik, John juga memperbarui URL gambar yang diubah ukurannya secara dinamis sehingga CloudFlare menganggapnya sebagai file gambar statis.

Hasilnya: Cat pertama yang bermakna turun dari 2.220 md menjadi 1.290 md dan Interaktif Pertama dari 5.480 md menjadi 3.040 md. Anda dapat melihat hasil lengkap Lightbox dan WebPage Test di sini.

Shaun O'Connell

Entri Shaun O'Connel adalah pekerjaan yang dia lakukan di kiwi.ruby.nz. Tujuannya adalah untuk mengubah situs konferensi menjadi PWA sehingga peserta konferensi dapat mencari semua informasi mengenai acara secara offline. Beberapa hal yang dia lakukan: mengganti iframe Google Maps biasa dengan Google Static Maps, font subset hosting sendiri, memindahkan CSS sebaris untuk menjaga permintaan pertama di bawah 14KB, menghapus dependensi, menambahkan Service Worker pra-cache, dan menambahkan Turbolink untuk snappy transisi halaman. Dengan begitu, waktu render awal turun dari 3,9 detik menjadi 0,3 detik.

Untuk detail lebih lanjut, lihat WebPageTests.

Ruslan Julbarissow

Ruslan Julbarissow mengirimkan situs pribadinya zerofy.de. Karena dia menyelesaikan pekerjaan pengoptimalannya sesaat sebelum kontes diterbitkan, sayangnya, tidak ada detail hasil sebelumnya, tetapi Ruslan menulis dengan baik tentang bagaimana tweaknya menghasilkan ukuran halaman 1.6KB dan TTFB 197ms. Selain caching, minifying, GZIP, dan tweak jQuery, ia memuat font sesudahnya untuk menghindari pemblokiran render, dan dengan mengganti FontAwesome dengan kumpulan 10 ikon IcoMoon yang disesuaikan, ia berhasil menghemat 130KB tambahan.

Untuk meningkatkan skor indeks kecepatan dan mendapatkan pengalaman tercepat, ia juga membuat file PHP terpisah yang berisi semua gaya CSS yang memengaruhi tampilan paruh atas. Detail yang bagus: Skrip kecil Barba.js memungkinkannya membuat transisi halaman tanpa memuat ulang seluruh situs.

Terima Kasih Untuk Semua Yang Telah Berpartisipasi

Fiuh! Itu benar-benar sebuah tantangan! Bagi Anda yang menikmati tantangan yang bagus dan menggelitik otak sesekali, nantikan tantangan berikutnya. Kami akan segera membuat yang lain — itu pasti!