Cara Mengukur Kinerja Situs Web Front-end

Berbicara tentang proses optimasi hampir tidak ada di antara desainer web zaman baru. Bahkan banyak desainer web yang telah berkecimpung dalam bisnis satu dekade atau lebih tidak sepenuhnya memahami pentingnya optimasi situs.

Setelah jangka waktu yang lama situs web akan mulai macet. File frontend mungkin berisi blok kode yang berlebihan atau bit yang terkunci dan tersembunyi. Ini paling sering terlihat terjadi dalam file JavaScript atau gambar. Mungkin penting untuk membuat situs web yang menyenangkan untuk pengalaman pengguna, tetapi tanpa situs web yang dioptimalkan, desain mungkin bahkan tidak memiliki peluang untuk dimuat sepenuhnya pada pengguna yang tidak sabar..

Kiat di bawah ini untuk pengembang web pemula-menengah yang tertarik mengoptimalkan halaman mereka sepenuhnya. Ada banyak teknik yang tersedia dan masing-masing akan berperilaku berbeda tergantung pada masalah apa situs web Anda menderita. Cobalah membaca sekilas beberapa area dan lihat apakah Anda dapat menerapkan teknik ini pada tanda Anda sendiri.

Permintaan HTTP

Setiap kali situs web Anda memuatnya mengirimkan permintaan HTTP ke server jauh. Jenis transfer data ini disebut a protokol jaringan digunakan khusus untuk mendistribusikan dan menyimpan file plaintext. Ini sering termasuk kode frontend dasar Anda seperti HTML, CSS, dan JavaScript.

Setelah permintaan dikirim, browser Anda akan mengurai setiap elemen halaman. Bergantung pada mesin penguraian, setiap situs web akan memuat secara berbeda dan elemen akan muncul dalam urutan yang berbeda berdasarkan kecepatan transfer. Sebagai contoh, Internet Explorer akan membuat halaman web berbeda dari Chrome atau Safari, dan semua ini menjalankan mesin parsing yang sedikit berbeda dari Firefox atau Opera.

Yang harus dipertimbangkan adalah berapa lama waktu permintaan untuk setiap file dan jika tren ini berlaku secara konsisten. Pertimbangkan menerima lebih dari 100 ribu atau 1 juta pengunjung dalam sebulan. Adalah tugas browser untuk menyatukan setiap elemen halaman dan memuat file eksternal ke dalam memori.

Seringkali faktor-faktor yang menahan JavaScript klimaks referensi situs web dioptimalkan termasuk atau file gambar besar. Dengan dipopulerkannya Verizon FiOS, kecepatan Internet mencapai 600 kbps dan terus meningkat! Sayangnya ini bukan norma dan bahkan dengan koneksi berkecepatan tinggi dimungkinkan untuk mengalami kesalahan optimasi.

Solusi untuk Performa Situs

Kami tidak sendirian di bidang pengembangan web dan optimasi frontend. Agar pekerjaan yang layak diselesaikan ada alat-alat tertentu yang diperlukan untuk menangani pekerjaan itu.

Google telah merilis proyek berjudul Kecepatan Halaman yang dibangun untuk membantu pengembang mengoptimalkan situs web mereka dan memeriksa tingkat kinerja terbaik. Awalnya proyek ini dimulai sebagai add-on Firebug open-source dan sekarang diterima sebagai referensi pihak ke-3 untuk pengujian situs web.

Opsi lain untuk pengguna Firebug adalah add-on YSlow Yahoo !. Skrip menganalisis setiap permintaan halaman web dan menyarankan cara paling umum untuk meningkatkan kinerja. Saran-saran ini didasarkan pada Yahoo! Sumber daya pengembang untuk praktik pengoptimalan terbaik dalam desain web.

Program ini mungkin agak kasar pada awalnya karena mengandung begitu banyak informasi. Tetap berpegang pada dasar-dasar dan dengan mengikuti dokumentasi sederhana prosesnya harus sepotong kue.

Pengembang selalu tertarik untuk melompat ke proyek untuk memecah kode sehingga ini harus menjadi tidak punya otak. Untuk sedikit bantuan, Anda bisa membaca panduan bantuan YSlow.

Teknik Kecepatan

Ada beberapa trik sederhana yang dapat Anda terapkan ke situs web Anda segera untuk mempercepat kinerja. Cara pertama dan termudah adalah memisahkan file CSS dan JavaScript Anda.

Kode CSS termasuk dalam tajuk dokumen Anda. Ini berguna karena properti CSS perlu diuraikan saat DOM sedang memuat. Setelah browser web mengenali gaya CSS Anda di tajuk, ia akan menunggu untuk sepenuhnya menampilkan halaman web sampai semua gaya telah dimuat. Juga setiap gambar yang digunakan untuk ikon atau desain latar belakang akan membutuhkan waktu untuk memuat dan harus melakukannya terlebih dahulu.

Di sisi lain, memindahkan semua file JavaScript ke footer situs Anda dapat secara dramatis menyelesaikan waktu hangup. Banyak peramban memblokir unduhan paralel yang artinya sebelum merender laman, peramban web pengguna mungkin berhenti selama 4 detik untuk memuat JS eksternal sepenuhnya termasuk.

Ini tidak selalu mungkin dan tidak selalu diperlukan untuk setiap situs web. Jika halaman Anda memuat hal yang sama dengan waktu respons yang sama terlepas dari termasuk penempatan file, maka jangan repot-repot memainkan semua permainan.

Konten dinamis tidak dapat dimuat sampai seluruh DOM selesai, tetapi kadang-kadang ini akan mengembalikan kesalahan. Tes CSS / JS termasuk untuk melihat apakah Anda dapat mengembalikan manfaat optimasi.

Kompresi Ukuran File

Mengompresi file besar telah menjadi sangat populer. Sekarang bahkan dapat digunakan di halaman web untuk mengurangi waktu buka dan menjaga ukuran file sangat rendah. Sebagian besar pekerjaan telah dilakukan dan dengan alat-alat seperti YUI Compressor file berukuran mini adalah proses tanpa energi.

Ada banyak layanan gratis lainnya di web untuk membantu tugas ini juga. Minimalkan CSS memiliki seluruh antarmuka kompresi CSS untuk membuat prosesnya sederhana. Situs web yang sama juga memiliki kompresor JavaScript khusus yang melakukan banyak tugas yang sama tetapi membuat skrip terorganisir.

Anda juga dapat mempertimbangkan mengompres gambar terbesar di halaman web Anda. Ini dapat dilakukan dengan perangkat lunak pengedit foto seperti Adobe Photoshop atau GIMP dengan hanya mengubah gambar pada resolusi yang lebih rendah. Gambar PNG akan mengekspor rata-rata jauh lebih kecil daripada format jpg atau TIFF. Ada juga banyak alat online seperti Pengoptimal Gambar untuk membantu dalam proses kompresi.

Pengecekan dan Metrik Sumber

Ini adalah rutin yang tidak sering dilakukan oleh pengembang web yang dapat menawarkan hasil yang luar biasa. Dengan menganalisis semua elemen halaman di situs web Anda, Anda dapat melihat mana yang paling lama untuk memuat dan urutan masing-masing bagian dimuat.

Alat paling populer Mozilla Firebug adalah plug-in untuk browser Firefox. Aplikasi ini menginstal bilah alat kecil di bagian bawah browser Anda untuk memeriksa waktu respons, informasi tajuk, elemen halaman, dan skrip untuk setiap situs web. Script ini juga telah porting ke Firebug Lite sebagai ekstensi untuk Google Chrome.

Apache dengan mod_pagespeed

Tidak semua penyiapan akan menjalankan server web Apache, jadi opsi ini tidak selalu tersedia. Modul ini terkait langsung dengan Monitor Kecepatan Halaman Google disebutkan sebelumnya. Sebenarnya, kode untuk mod_pagespeed pada awalnya didasarkan pada banyak perpustakaan dari basis data Google Code.

Apache memungkinkan administrator server untuk menginstal paket kecil yang disebut modul untuk meningkatkan kinerja server mereka. mod_pagespeed adalah salah satu modul ini yang melakukan teknik optimasi secara otomatis saat runtime. Ada terlalu banyak proses untuk dicantumkan, meskipun beberapa aplikasi utama termasuk kompresi HTML / CSS / JS saat ini dan cache gambar.

Proyek saat ini bertempat di Google dan terbuka untuk pengembang. Google telah bekerja dengan GoDaddy untuk mengimplementasikan mod_pagespeed ke semua akun hosting yang menjalankan server HTTP Apache.

Meskipun banyak pilihan lain yang tersedia, pekerjaan pengembangan frontend adalah beberapa yang paling intens, terutama mempertimbangkan pra-optimasi untuk halaman web penting. Mengoptimalkan tajuk situs dan gambar besar bisa menjadi tugas yang sangat membosankan namun bermanfaat.

Pertimbangkan beberapa teknik yang diperkenalkan dalam artikel ini dan lihat bagaimana ini dapat diterapkan ke proyek web Anda. Seringkali pengembang tidak mengambil cukup waktu untuk menghargai pekerjaan mereka dan membersihkan potongan kode lama. Jika Anda masih berhasrat untuk beberapa kiat, Anda harus membaca panduan pengoptimalan web terbaik kami untuk petunjuk tentang pemeliharaan frontend dan peningkatan kinerja yang nyaman.