Cara Mengukur Prestasi Laman Web Depan

Bercakap tentang proses pengoptimuman hampir tidak wujud di kalangan pereka web umur baru. Malah banyak pereka web yang telah berniaga dalam dekad atau lebih lama tidak memahami sepenuhnya pentingnya pengoptimuman tapak.

Selepas tempoh yang berpanjangan, sebuah laman web akan mula rusak. Fail frontend mungkin mengandungi blok kode yang dibesar-besarkan atau bit tersembunyi, tersembunyi. Ini biasanya dilihat dalam fail atau imej JavaScript. Ia mungkin penting untuk membuat laman web yang menyenangkan untuk pengalaman pengguna tetapi tanpa laman web yang dioptimumkan reka bentuk mungkin tidak mempunyai peluang untuk memuatkan sepenuhnya pada pengguna yang tidak sabar.

Petua di bawah ini adalah untuk pemaju web perantara yang berminat mengoptimumkan halaman mereka sepenuhnya. Terdapat banyak teknik yang tersedia dan setiap individu akan bertindak berbeza bergantung pada apa yang menimbulkan masalah laman web anda. Cuba melangkau beberapa kawasan dan lihat jika anda boleh menggunakan teknik ini ke dalam markah anda sendiri.

Permintaan HTTP

Setiap kali laman web anda memuat ia menghantar permintaan HTTP ke pelayan jauh. Jenis pemindahan data ini dipanggil a protokol rangkaian digunakan khusus untuk mengedarkan dan menyimpan fail plaintext. Ini sering merangkumi kod frontend asas anda seperti HTML, CSS, dan JavaScript.

Sebaik sahaja permintaan dihantar penyemak imbas anda akan menghurai setiap elemen halaman. Bergantung pada enjin parsing setiap laman web akan memuatkan secara berbeza dan elemen akan muncul dalam pelbagai pesanan berdasarkan kelajuan pemindahan. Contohnya, Internet Explorer akan menjadikan laman web berbeza daripada Chrome atau Safari, dan semua enjin pengesanan sedikit berbeza daripada Firefox atau Opera.

Apa yang perlu dipertimbangkan ialah berapa masa permintaan untuk setiap fail yang diambil dan jika trend ini memegang secara konsisten. Pertimbangkan untuk menerima lebih daripada 100k atau 1 juta pelawat dalam sebulan. Ia adalah tugas penyemak imbas untuk menyusun setiap elemen halaman dan memuatkan fail luaran ke dalam memori.

Seringkali faktor-faktor yang memegang rujukan kelajuan dioptimumkan laman web JavaScript clunky termasuk atau fail imej yang besar. Dengan popularisasi Verizon FiOS, ia adalah perkara biasa bagi kelajuan Internet untuk mencapai 600kbps dan terus memanjat! Malangnya ini bukan perkara biasa dan walaupun dengan sambungan berkelajuan tinggi mungkin mengalami kesilapan pengoptimuman.

Pemulihan kepada Prestasi Laman

Kami tidak bersendirian dalam bidang pembangunan web dan pengoptimuman frontend. Untuk kerja yang betul untuk disiapkan terdapat alat-alat tertentu yang diperlukan untuk mengendalikan kerja.

Google telah mengeluarkan satu projek bertajuk Page Speed ​​yang dibina untuk membantu pemaju mengoptimumkan laman web mereka dan menyemak tahap prestasi terbaik. Pada mulanya projek itu bermula sebagai sumber tambahan Firebug dan sekarang diterima sebagai rujukan pihak ke-3 untuk ujian laman web.

Pilihan lain untuk pengguna Firebug adalah Yahoo! S YSlow add-on. Skrip menganalisis setiap permintaan laman web dan mencadangkan cara yang paling biasa untuk meningkatkan prestasi. Cadangan ini adalah berdasarkan Yahoo! Sumber pemaju untuk amalan pengoptimuman yang terbaik dalam reka bentuk web.

Program ini mungkin sedikit kasar pada mulanya kerana ia mengandungi begitu banyak maklumat. Hanya berpegang pada asas-asas dan dengan mengikuti dokumentasi mudah, proses itu sepatutnya menjadi sekeping kek.

Pemaju sentiasa berminat untuk melompat ke projek untuk memecah kod supaya ini tidak menjadi pemikir. Untuk sedikit bantuan, anda boleh menyemak panduan bantuan YSlow.

Teknik Kelajuan

Terdapat beberapa helah mudah yang anda boleh memohon ke laman web anda dengan serta-merta untuk mempercepatkan prestasi. Cara pertama dan paling mudah ialah memisahkan fail CSS dan JavaScript anda.

Kod CSS kepunyaan pengepala dokumen anda. Ini berguna kerana sifat CSS perlu diuraikan semasa DOM dimuat. Apabila pelayar web mengenali gaya CSS anda dalam tajuk, ia akan menunggu untuk memaparkan halaman web sepenuhnya sehingga semua gaya telah dimuatkan. Juga mana-mana imej yang digunakan untuk ikon atau reka bentuk latar belakang akan mengambil masa untuk memuatkan dan harus melakukannya terlebih dahulu.

Pada sisi lain yang mengalihkan semua fail JavaScript ke tapak kaki anda, secara mendadak dapat menyelesaikan masa hangup. Ramai pelayar menghalang muat turun selari yang bermaksud sebelum membuat halaman pelayar web pengguna boleh berhenti selama 4 saat untuk memuatkan sepenuhnya JS luaran.

Ini tidak selalu mungkin dan tidak semestinya perlu untuk setiap laman web. Jika halaman anda memuat sama dengan masa tindak balas yang sama tanpa mengira peletakan fail termasuk, maka jangan repot-repot menggerakkan sebarang mainan.

Kandungan dinamik tidak dapat dimuat sehingga seluruh DOM selesai, tetapi kadang-kadang ini akan mengembalikan ralat. Uji CSS / JS termasuk untuk melihat apakah anda boleh mengembalikan sebarang manfaat pengoptimuman.

Pemampatan Saiz Fail

Memampatkan fail besar telah menjadi sangat popular. Ia kini boleh digunakan di laman web untuk mengurangkan masa beban dan menyimpan saiz fail yang sangat rendah. Kebanyakan kerja telah dilakukan dan dengan alat seperti YUI Compressor fail berukuran kecil adalah proses tanpa tenaga.

Terdapat banyak perkhidmatan percuma di web untuk membantu tugas ini juga. Kurangkan CSS mempunyai antara muka mampatan CSS keseluruhan untuk membuat proses mudah. Laman web yang sama juga mempunyai pemampat JavaScript tersuai yang melakukan banyak tugas yang sama tetapi mengekalkan skrip yang dianjurkan.

Anda juga boleh mempertimbangkan memampatkan imej terbesar di laman web anda. Ini boleh dilakukan dengan mana-mana perisian penyuntingan foto seperti Adobe Photoshop atau GIMP dengan hanya menyusun semula imej pada resolusi yang lebih rendah. Imej PNG akan mengeksport lebih kecil secara purata daripada format jpg atau TIFF. Terdapat juga banyak alat dalam talian seperti Pengoptimal Imej untuk membantu dalam proses pemampatan.

Pemeriksaan Sumber dan Metrik

Ini adalah rutin yang tidak sering dilakukan oleh pemaju web yang boleh menawarkan hasil yang luar biasa. Dengan menganalisis semua elemen halaman di laman web anda, anda dapat melihat yang mengambil yang paling lama untuk memuat dan susunan di mana setiap bahagian dimuatkan.

Alat yang paling popular Mozilla Firebug adalah plug-in untuk pelayar Firefox. Aplikasi ini memasang bar alat kecil di bahagian bawah penyemak imbas anda untuk memeriksa masa tindak balas, maklumat header, elemen halaman, dan skrip untuk setiap laman web. Skrip juga telah dipindahkan ke Firebug Lite sebagai pelanjutan untuk Google Chrome.

Apache dengan mod_pagespeed

Tidak semua setup akan menjalankan pelayan web Apache, jadi pilihan ini tidak selalu tersedia. Modul ini berkaitan secara langsung dengan Pemantau Kelajuan Halaman Google yang disebut tadi. Malah, kod untuk mod_pagespeed pada asalnya didasarkan pada banyak perpustakaan dari pangkalan data Google Code.

Apache membolehkan pentadbir pelayan untuk memasang pakej kecil dipanggil modul untuk meningkatkan prestasi pelayan mereka. mod_pagespeed adalah salah satu modul yang melaksanakan teknik pengoptimuman secara automatik semasa runtime. Terdapat terlalu banyak proses untuk disenaraikan, walaupun beberapa aplikasi utamanya termasuk pemampatan HTML / CSS / JS pada pemanduan dan imej caching.

Projek ini kini ditempatkan di Google dan terbuka kepada pemaju. Google telah bekerjasama dengan GoDaddy untuk melaksanakan mod_pagespeed ke dalam semua akaun hosting yang menjalankan pelayan HTTP Apache.

Walaupun banyak pilihan lain yang tersedia frontend pembangunan kerja adalah beberapa yang paling sengit, terutamanya mengingat pra-pengoptimuman untuk laman web penting. Mengoptimumkan untuk tajuk laman dan imej besar boleh menjadi tugas yang sangat membosankan namun bermanfaat.

Pertimbangkan beberapa teknik yang diperkenalkan dalam artikel ini dan lihat bagaimana cara ini dapat diterapkan ke dalam projek web anda. Seringkali pemaju tidak mengambil masa yang cukup untuk menghargai kerja mereka dan membersihkan bit lama kod. Sekiranya anda masih merindui beberapa petua, anda harus membaca panduan pengoptimuman web utama kami untuk petunjuk mengenai penyelenggaraan frontend dan peningkatan prestasi mudah.