Ada satu teknik yang sama sekali tak tertandingi yang memungkinkan Anda untuk menjaga kinerja proyek web tetap terkendali. Ini terdiri dari memperkenalkan mekanisme ke dalam proses pembangunan, yang hasilnya jelas terlihat. Mekanisme ini dirancang untuk selalu mengingatkan programmer tentang pentingnya kinerja. Ada sesuatu dalam konteks ini yang sangat saya sukai. Ini adalah tajuk HTTP Fitur-Kebijakan . Judul ini adalah fitur yang relatif baru yang memungkinkan pengembang membuat fitur browser tertentu hidup dan mati saat menjelajahi situsnya. Misalnya, Anda dapat memberi tahu peramban bahwa browser itu seharusnya tidak mengizinkan penggunaan Geolocation API dengan meneruskannya header berikut:
Feature-Policy: geolocation 'none'
Ada Feature-Policybanyak keuntungan menggunakan header dalam hal keamanan dan kinerja. Tapi saya sekarang terutama suka bagaimana Feature-PolicyAnda bisa menggunakannya untuk membuat masalah kinerja situs web yang biasanya mudah diabaikan lebih terlihat. Ini dapat dibandingkan dengan sesuatu seperti "linting kinerja." Secara khusus, kita berbicara tentang mengidentifikasi masalah dengan gambar yang digunakan dalam proyek web.Kebijakan gambar terlalu besar
Jika gambar ditransmisikan ke browser dalam format yang didukungnya, gambar seperti itu akan ditampilkan. Ini adalah perilaku browser standar. Peramban, yang mencoba membantu mereka yang melihat halaman, juga secara otomatis mengukur skala gambar tersebut. Oleh karena itu, mereka terlihat baik walaupun diwakili oleh file grafik besar. Akibatnya, jika Anda menggunakan gambar yang lebih besar dari ukuran yang dibutuhkan oleh halaman, maka ini, pada pandangan pertama, tidak terlihat.Kebijakan ( direktif )oversized-imagesmemberitahu browser bahwa itu tidak boleh mengizinkan penggunaan gambar yang ukurannya melebihi, dengan jumlah tertentu kali, ukuran wadah mereka. Gambar, sesuai dengan batasan standar, tidak boleh lebih dari 2 kali wadah. Tetapi nilai ini, jika perlu, dapat didefinisikan ulang.Jadi, jika browser menerima tajuk berikutnya, itu tidak akan memungkinkan Anda untuk menampilkan gambar yang diambil dari sumber apa pun (ini diatur terima kasih none), dimensi yang lebih dari 2 kali ukuran wadah mereka (lebar atau tinggi).Feature-Policy: oversized-images 'none';
Jika Anda membutuhkan lebih banyak fleksibilitas, Anda dapat memberi tahu browser bahwa peramban tidak boleh menampilkan gambar yang lebih dari 3 kali lebih besar dari wadah:Feature-Policy: oversized-images *(3) 'none';
Bagaimanapun, jika gambar tidak sesuai dengan batas yang ditentukan, tulisan rintisan akan ditampilkan sebagai ganti gambar, dan pesan kesalahan akan dikirim ke konsol.Jika situs menggunakan kebijakan gambar-besar, gambar besar akan diunggah, tetapi tulisan rintisan akan ditampilkan, dan pesan kesalahan akan ditampilkan di konsolGambar tidak dioptimalkan
Masalah umum lainnya dengan grafik adalah penggunaan gambar yang tidak dioptimalkan. Cukup sering Anda dapat menemukan gambar yang tidak cukup dikompres. Ukurannya, bagaimanapun, dapat dipilih dengan benar. Jadi, untuk file dengan foto, saat memotret dan membuatnya, banyak metadata yang tidak perlu dapat ditambahkan, yang sering tetap dalam file dan saat digunakan di browser. Salah satu contoh yang sangat menyebalkan dari ini adalah gambar, metadata yang berisi gambar mini mereka sendiri untuk pratinjau. Berkali-kali saya melihat bagaimana thumbnail yang disematkan pada gambar (keberadaan yang bahkan tidak diketahui oleh desainer dan pengembang), "lebih berat" daripada gambar itu sendiri!Antara lain, di sini Anda dapat mengingat kompresi gambar yang biasa, didukung oleh banyak format, yang memungkinkan Anda untuk mencapai keseimbangan sempurna antara kualitas gambar dan ukuran file.The unoptimized-lossy-gambar dan unoptimized-lossless-gambar kebijakan membiarkan tahu browser itu cocok ukuran file dan ukuran gambar dalam piksel.Feature-Policy: unoptimized-lossy-images 'none';
Feature-Policy: unoptimized-lossless-images 'none';
Jika jumlah byte per pixel (Byte-per-pixel, BPP) terlalu tinggi, maka browser akan menampilkan tulisan rintisan alih-alih gambar dan menampilkan pesan kesalahan di konsol.Menerapkan kebijakan yang tidak dioptimalkan- * menyebabkan tulisan rintisan ditampilkan alih-alih gambar yang tidak pantas - seperti halnya menggunakan kebijakan gambar yang besar,level BPP yang disarankan untuk gambar terkompresi yang hilang adalah 0,5, dan 1 untuk gambar yang dikompresi tanpa kehilangan. Selain itu, saat menganalisis gambar, sedikit penyimpangan ukuran totalnya dari level ini diperbolehkan. Sekarang penyimpangan ini untuk gambar yang dikompresi dengan kerugian adalah 1 Kb, untuk gambar yang dikompresi tanpa kehilangan - 10 Kb.Misalnya, misalkan kita memiliki gambar JPEG 200x200 piksel. JPEG adalah format kompresi gambar yang hilang, menghasilkan tingkat BPP yang disarankan sebesar 0,5. Pada saat yang sama, ukuran gambar total dapat melebihi ukuran yang disarankan hanya 1 Kb. Untuk mengetahui ukuran gambar yang sesuai dengan peramban, Anda perlu mengalikan dimensi sisi gambar dalam piksel satu sama lain dan dengan BPP, dan kemudian menambahkan penyimpangan yang diizinkan untuk apa yang terjadi.(200 x 200 x .5) + 1024 = 21,024byte, atau 20.5KbJika gambar dikompresi tanpa kehilangan, maka penyimpangan dari ukuran "ideal" 10 Kb diperbolehkan, sedangkan BPP gambar seperti itu adalah 1. Jika tidak, perhitungannya terlihat persis sama:(200 x 200 x 1) + 10,240 = 50,240byte, atau 49.1KbUkuran deviasi yang diizinkan kemungkinan akan berubah di masa depan. Faktanya, meskipun Blink, secara default, menggunakan indikator ini untuk gambar yang dikompres tanpa kehilangan, sama dengan 10 Kb, percobaan sudah berjalan dengan kebijakan unoptimized-lossless-images-strictyang mengubah indikator ini, menurunkannya ke level 1 Kb.Media tidak ditentukan
Yang baru adalah yang lama terlupakan.Untuk waktu yang lama penggunaan atribut gambar height, dan widthitu lebih atau kurang umum. Tanpa atribut ini, browser tidak tahu berapa banyak ruang yang harus ditempati gambar sampai saat gambar dimuat. Hal ini menyebabkan pergeseran tata letak halaman. Halaman ditampilkan, dan kemudian, setelah gambar tiba, isinya bergeser. Browser sekali lagi harus menghitung tata letak untuk mengalokasikan ruang untuk gambar.Ketika tiba saatnya tata letak di mana ukuran gambar harus diubah ukurannya secara fleksibel menggunakan CSS, ada atau tidaknya atribut ini tidak lagi memainkan peran khusus. Akibatnya, banyak yang berhenti menggunakan atribut ini.Namun berkat kerja terbarudiprakarsai oleh Jen Simmons, Firefox dan Chrome dapat menghitung rasio aspek gambar berdasarkan atribut heightdan width. Ketika pendekatan ini dikombinasikan dengan gaya yang diterapkan pada gambar, ternyata browser dapat menyediakan ruang untuk gambar selama bagian awal tata letak.Kebijakan unsized-media memberitahu browser bahwa semua elemen media harus memiliki atribut yang menentukan ukuran elemen-elemen ini. Jika tidak ada atribut seperti itu, browser harus menggunakan nilai default. Semuanya, pada kenyataannya, sedikit lebih rumit, tetapi intinya adalah bahwa jika gambar tidak memiliki atribut yang sesuai, browser menggunakan nilai 300x150piksel standar .Feature-Policy: unsized-media 'none';
Ketika kebijakan ini diterapkan, gambar akan ditampilkan, tetapi jika ukurannya tidak ditentukan dalam HTML, pengembang akan segera melihat bahwa gambar ditampilkan dalam ukuran default. Dan, seperti biasa, pesan kesalahan akan dikirim ke konsol.Penerapan kebijakan unsized-media mengarah pada fakta bahwa gambar dan video tanpa atribut tinggi dan lebar ditampilkan, tetapi browser menetapkan ukurannya menjadi 300x150 piksel.Mungkin, ada baiknya menyebutkan satu fitur yang tampak tidak biasa bagi saya pada awalnya. Dia menunjukkan dirinya ketika berbagi kebijakanunsized-mediadanoversized-images. Dalam situasi ini, orang tidak perlu terkejut dengan penampilan lebih dari sebelumnya, jumlah pesan tentang gambar terlalu besar. Faktanya adalah bahwa karena penerapan kebijakan,unsized-mediabrowser mengubah ukuran gambar yang tidak memiliki atributheightdanwidthhingga300x150piksel. Setelah itu ukuran ini yang digunakan browser sebagai titik referensi untuk menentukan apakah gambar cocok dengan wadahnya.Menarik perhatian pada masalah yang kurang terlihat
Dalam kebijakan yang berhubungan dengan gambar, saya menyukai kenyataan bahwa mereka, dalam proses pengembangan proyek, memungkinkan untuk membuat apa yang biasanya tersembunyi terlihat. Akibatnya, pengembang mengetahui bahwa ia tidak berhati-hati dalam mengoptimalkan gambar, atau bahwa ia lupa mengatur atribut heightdan width. Semua kesalahan ini segera tercermin dalam tampilan halaman. Bahkan, keuntungan utama menggunakan kebijakan di atas adalah bahwa mereka memungkinkan pengembang untuk dengan cepat menemukan masalah dengan gambar. Sementara politikunsized-mediadapat menyebabkan penurunan jumlah situasi di mana "pergeseran" tata letak halaman terjadi, penggunaan kebijakan lain tidak mencegah pemuatan gambar yang tidak pantas. Akibatnya, satu-satunya titik kuat menerapkan kebijakan ini adalah bahwa mereka menarik perhatian pengembang ke masalah.Ada beberapa kebijakan lain yang mungkin berguna dalam hal menganalisis halaman untuk dampak sesuatu pada kinerja mereka. Di sinilah kebijakan seperti skrip sinkronisasi muncul (kebijakan ini memblokir eksekusi skrip sinkron), sync-xhr(memblokir permintaan AJAX yang sinkron) dan document-write(memblokir panggilan document.write).Kebijakan ini adalah alat yang hebat untuk mengendalikan aspek tertentu dari kinerja halaman, tetapi mereka sendiri tidak memberikan pengembang dengan umpan balik nyata yang sama yang diberikan oleh banyak kebijakan di atas dalam bentuk gambar yang hilang. Tentu saja, jika halaman tersebut memiliki skrip sinkron, yang tanpanya tidak ditampilkan, maka ini tidak mudah untuk dilewatkan (dan halaman tersebut tidak begitu sulit ditemukan). Tetapi kebijakan ini biasanya menunjukkan kesalahan dalam bentuk pesan yang ditampilkan di konsol. Dan sejujurnya, saya curiga sebagian besar pengembang tidak terlalu memperhatikan konsol (saya pikir kita semua harus lebih berhati-hati tentang konsol).Namun, bagaimanapun, kita dapat membuat kesalahan yang terdeteksi oleh kebijakan "tak terlihat" jauh lebih terlihat menggunakan APIServer Pelaporan untuk memantau pelanggaran dan untuk menampilkan pemberitahuan yang relevan di halaman. Pemberitahuan semacam itu dapat dibuat sangat nyata.let reportingAlerts = document.createElement('ul');
reportingAlerts.setAttribute('id','reportingAlerts');
document.body.appendChild(reportingAlerts);
const alertBox = document.getElementById('reportingAlerts');
new ReportingObserver((reports, observer) => {
let fragment = document.createDocumentFragment();
Object.keys(reports).forEach(function(item) {
let li = document.createElement('li');
li.textContent = reports[item].body.message + ': ' + reports[item].body.featureId;
fragment.appendChild(li);
});
alertBox.appendChild(fragment)
}, {types: ['feature-policy-violation'], buffered: true}).observe();
Saya membuat sketsa contoh di CodePen tentang bagaimana ini terlihat.Contoh bagaimana Anda dapat menampilkan pemberitahuan pelanggaran kebijakan yang ditentukan oleh tajuk Kebijakan-Fitur. Pemberitahuan tersebut dirancang untuk keluaran di lingkungan pengembangan, atau di mana proyek disiapkan untuk keluaran untuk produksi.Kurangi penggunaan header Fitur-Kebijakan
Kelemahan besar menggunakan header Feature-Policyadalah dukungannya oleh browser. Rupanya, sekarang hanya didukung oleh browser berbasis Blink (Opera, Edge, Chrome, Samsung). Browser Firefox dan Safari mendukung atribut allowuntuk item iframe. Tetapi meskipun Feature-Policydidukung, untuk memastikan kesehatan banyak kebijakan, Anda harus mengaktifkan bendera Experimental Web Platform features(Anda dapat menemukannya di alamat about:flags).Bagaimana Saya Menggunakan Header Kebijakan-Fitur
Kurangnya gelar itu Feature-Policy, yang disebutkan di atas, bagi saya pribadi bukanlah masalah khusus. Saya lebih suka menggunakan kebijakan yang ditetapkan oleh header ini sebagai pemeriksa halaman berbasis browser. Karenanya, saya tidak perlu berusaha untuk menerapkan Feature-Policydalam produksi, atau untuk memastikan bahwa kebijakan berfungsi untuk semua pengguna saya. Mereka hanya dibutuhkan oleh saya, dan juga oleh mereka yang mengembangkan situs. Saya, dalam hal apa pun, menggunakan Chrome sebagai browser utama dalam proses pengembangan. Oleh karena itu, memastikan kinerja Feature-Policedi lingkungan kerja saya adalah mengaktifkan tanda yang sesuai. Setelah ini, para politisi bekerja tanpa campur tangan saya.Saya menemukan bahwa cara termudah untuk menggunakan header adalah Feature-Policydengan ekstensi browserModHeader . Ekstensi ini memungkinkan Anda untuk mengatur pos Anda sendiri yang diteruskan ke halaman ketika dilihat.Ekstensi ModHeader memungkinkan Anda untuk mengonfigurasi opsi header Fitur-Kebijakan. Mereka dapat dinyalakan dan dimatikan, jika diinginkan. Saya memiliki tiga set nilai headerFeature-Policyyang secara berkala saya gunakan:oversized-images 'none'; unoptimized-lossy-images 'none'; unoptimized-lossless-images 'none';unsized-media 'none'; oversized-images 'none'; unoptimized-lossy-images 'none'; unoptimized-lossless-images 'none';script-sync 'none'; unsized-media 'none'; oversized-images 'none'; unoptimized-lossy-images 'none'; unoptimized-lossless-images 'none';
Saya sering menyalakan yang pertama. Sangat menyenangkan untuk melakukan perjalanan melalui halaman web yang menerapkan kebijakan di dalamnya. Sangat menakutkan untuk melihat seberapa besar beberapa gambar. Ada banyak hal di web modern yang bisa diperbaiki.Jadi, politik sangat sering dipicu pada halaman unsized-media(dan saya juga berdosa dengan ini), sehingga penggunaannya selama kerja normal di Internet tidak nyaman. Itulah sebabnya saya menekankannya dalam kebijakan terpisah, yang dapat saya nyalakan dan matikan. Hal yang sama berlaku untuk kebijakan sync-scripts, aplikasi yang "menghancurkan" banyak situs.Beberapa tim tempat saya bekerja mulai menggunakan kebijakan yang saya jelaskan selama pengembangan. Ini memungkinkan mereka untuk dengan cepat memperhatikan masalah yang sebelumnya tidak terlihat. Tentu saja, saya sarankan untuk memasukkan semua kebijakan Feature-Policydi lingkungan pengembangan, yang memungkinkan Anda untuk dengan cepat mengidentifikasi dan memperbaiki kesalahan.Ringkasan
Saya berharap bahwa dukungan Feature-Policyakan muncul, sebagai akibatnya, tidak hanya di Chrome. Meskipun ini adalah browser utama saya, saya harus menggunakan browser lain juga. Akan sangat membantu jika mereka mendukung Feature-Policy. Tetapi di sini, bagaimanapun, kita melihat bahwa situasi langka ketika bahkan dukungan eksperimental dari kesempatan tertentu sudah cukup untuk itu menjadi manfaat nyata.Masalah kinerja yang halus juga merupakan masalah. Dan kemampuan untuk membuat masalah seperti itu lebih terlihat adalah salah satu metode terbaik yang dapat digunakan pengembang untuk mengidentifikasi dan memperbaikinya.Pembaca yang budiman! Apakah Anda berencana untuk menggunakan tajuk Kebijakan-Fitur untuk mengidentifikasi masalah yang tidak mencolok dalam proyek web?