Bagi orang-orang teknis, pengoptimalan kinerja adalah topik abadi. Dengan evolusi berkelanjutan dari kerangka kerja, bahasa, pustaka, dan alat lainnya, apakah metode pengoptimalan tradisional masih berlaku? Dalam lingkungan inovasi, apa metode pengoptimalan pintasan? Pada artikel ini, penulis akan menggunakan situs web setahun yang lalu sebagai objek uji dan mencoba tiga metode terbaru, yang secara efektif meningkatkan kinerja situs web sebesar 24% Selanjutnya, kita akan mencari tahu.
Penulis | SwissGreg
Penerjemah | Bulan Sabit, Pemimpin Redaksi | Tu Min
Diproduksi | CSDN ( INDO: CSDNnews)
Berikut terjemahannya:
Akhir pekan lalu, kami meningkatkan kinerja situs web yang dibuat setahun yang lalu.
Situs web kami adalah platform pencarian kerja untuk pengembang perangkat lunak di Swiss. Kinerja situs web ini sangat penting karena dua alasan:
Pengalaman pengguna yang baik: Ini mencakup waktu pemuatan situs web (dan waktu interaksi dengan pengguna) dan kecepatan penggunaan situs web.
SEO: Sebagian besar, lalu lintas kita bergantung pada Google pencarian untuk ,dan Terkenal Google lebih condong ke situs dengan kinerja superior (bahkan Google pencarian untuk Laporan kecepatan ditampilkan di konsol).
Jika Anda sedang online pencarian untuk "Dasar-dasar performa situs", Anda akan menemukan banyak tips, seperti:
-
Gunakan CDN (Jaringan Pengiriman Konten) untuk menyediakan file statis yang dapat di-cache untuk jangka waktu tertentu.
-
Optimalkan ukuran dan format gambar.
-
Gunakan kompresi GZIP atau Brotli.
-
Kurangi ukuran kode JS dan CSS tidak penting.
Kami telah mencapai banyak tujuan mudah.
Selain itu, karena halaman beranda kami pada dasarnya adalah daftar yang dapat difilter (ditulis dalam React), kami telah memperkenalkan react-window, yang hanya dapat membuat 10 item daftar (bukan 250) pada satu waktu.
Teknik di atas telah sangat membantu kami meningkatkan kinerja, tetapi setelah memeriksa laporan kecepatan, saya merasa kami masih memiliki ruang untuk peningkatan.
Oleh karena itu, kami mulai mempelajari cara yang lebih tidak biasa untuk meningkatkan kecepatan situs web, dan akhirnya kami meraih kesuksesan besar! Inilah laporan minggu ini:
Laporan ini menunjukkan bahwa keseluruhan waktu buka situs web telah berkurang 24%!
Lantas, untuk mencapai hasil tersebut, upaya apa yang telah kita lakukan?
1. Gunakan rel = "preload" untuk data JSON
Baris kode yang ditambahkan dalam file index.html ini dapat menginstruksikan browser: Sebelum JavaScript memanggil AJAX / fetch untuk meminta data JSON, ia harus mendapatkan data ini.
Saat data benar-benar perlu digunakan, data dapat dibaca dari cache browser tanpa harus mengambil data lagi. Teknik ini membantu kami menghemat waktu pemuatan sekitar 0,5 detik.
Kami dapat menerapkan teknik ini lebih awal, tetapi ada beberapa masalah di browser Chrome yang menyebabkan duplikasi unduh . Tapi sekarang sepertinya sudah berubah.
2. Menerapkan caching super sederhana di sisi server
Setelah menerapkan pramuat JSON, kami menemukan unduh Daftar pekerjaan masih menjadi hambatan (dibutuhkan sekitar 0,8 detik untuk mendapatkan respons dari server). Oleh karena itu, kami memutuskan untuk mempelajari cache sisi server. Pertama, kami mencoba cache node, tetapi yang mengejutkan, waktu akuisisi tidak dipersingkat.
Perlu disebutkan bahwa endpoint / api / jobs adalah endpoint getAll sederhana, jadi tidak ada ruang untuk perbaikan.
Namun, kami memutuskan untuk melangkah lebih jauh dan cukup membangun cache kami sendiri melalui variabel JS. Sebagai berikut:
Satu-satunya hal yang tidak terdaftar di sini adalah titik akhir POST / pekerjaan, yang menghapus cache (cachedJobs = undefined).
Sepotong kode yang begitu sederhana memotong 0,4 detik waktu pemuatan!
3. Kurangi ukuran paket CSS dan JS
Terakhir, kami memeriksa ukuran paket CSS dan JS yang perlu dimuat halaman web. Kami melihat bahwa ukuran paket "font-awesome" melebihi 70kb.
Namun, kami hanya menggunakan sekitar 20% ikon.
Bagaimana kita menghadapinya? Kami memilih ikon yang perlu kami gunakan melalui icomoon.io dan membuat paket ikon efisien yang disesuaikan.
Oleh karena itu, 50kb disimpan!
Tiga teknik tidak biasa di atas membantu kami mengurangi waktu pemuatan situs web kami hingga 24%. Bahkan ada laporan yang menunjukkan bahwa waktu loading website telah berkurang 43% (menjadi 1-2 detik).
Saat ini kami sangat puas dengan peningkatan ini. Namun, kami yakin kami bisa melakukan yang lebih baik!
Jika Anda mengetahui trik tidak biasa lainnya yang dapat membantu, silakan beri komentar di komentar di bawah tinggalkan pesan !
asli : Https://dev.to/swissgreg/how-we-improved-website-performance-by-24-with-3-unusual-changes-9ei
Artikel ini adalah terjemahan CSDN, harap sebutkan sumber cetak ulang.
Akhir
- Departemen Obstetri dan Ginekologi Rumah Sakit Barat Rumah Sakit Provinsi Shandong memberikan ceramah tentang "Bagaimana Merawat Kesehatan Wanita" di dua komunitas di Jinan