Advertisement
  1. Code
  2. Tools & Tips

Aset Web - Kiat untuk Organisasi dan Kinerja yang Lebih Baik

by
Length:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Hasannudin Amin (you can also view the original English article)

Ingat kembali ketika kita harus menghabiskan banyak waktu untuk mengoptimalkan aset proyek kita (gambar, CSS, dll.)? Hari ini, pengguna memiliki koneksi Internet yang lebih cepat dan tampaknya kita dapat menggunakan gambar yang lebih besar atau file flash yang lebih besar dengan banyak video dan gambar di dalamnya. Namun, dengan meningkatnya perkembangan ponsel, kami kembali berada di situasi yang sama. Sangat penting untuk membuat situs yang dioptimalkan dengan baik, sehingga kami memiliki aplikasi yang lebih cepat, yang mengunduh lebih sedikit konten dan segera merespons.


Gambar

Sajikan Ukuran yang Tepat

Sering kali kami menggunakan gambar yang sama untuk berbagai bagian situs web kami. Misalnya, di toko online, semua produk memiliki gambaran umum. Katakanlah kita memiliki tiga halaman di mana kita harus menunjukkan gambar-gambar itu - satu halaman untuk daftar produk, halaman lain untuk detail produk, dan halaman ketiga yang hanya menampilkan gambar dalam ukuran aslinya.

Jadi, kita memerlukan tiga ukuran gambar yang berbeda dan jika kita menggunakan file yang sama untuk ketiga tempat yang berbeda, maka browser akan mengunduh gambar ukuran penuh bahkan untuk halaman daftar, di mana kita sebenarnya hanya membutuhkan gambar 200x200. Jika file asli sekitar 1MB dan kami memiliki sepuluh produk per halaman, maka pengguna akan mengunduh 10MB. Itu bukan ide yang bagus. Jika Anda bisa, cobalah untuk menghasilkan gambar yang berbeda untuk bagian yang berbeda dari situs Anda, ini akan menghemat banyak KB untuk pengguna Anda. Ini adalah ide yang baik untuk diingat resolusi layar saat ini. Misalnya, jika seseorang membuka situs Anda di iPhone mereka, Anda tidak perlu menyajikan gambar header raksasa, yang biasanya Anda gunakan. Dengan menggunakan CSS media queri, Anda dapat mengirim gambar dengan ukuran yang lebih kecil:

Kompresi

Mengirim gambar hanya dengan dimensi yang tepat tidak selalu cukup. Beberapa format file dapat dikompresi banyak tanpa kehilangan kualitasnya. Ada banyak program yang dapat membantu Anda. Misalnya, Photoshop menyediakan fitur bagus bernama Save for Web and Devices:

saveforweb

Ada banyak opsi dalam dialog ini, tetapi salah satu yang paling penting adalah Quality. Pengaturan ke sesuatu seperti 80% dapat mengurangi ukuran file secara signifikan.

Tentu saja, Anda dapat menggunakan kode untuk memadatkan file, tetapi saya pribadi lebih suka Photoshop dan saya menggunakannya kapan pun memungkinkan.

Sprite

Salah satu hal yang dapat Anda lakukan untuk meningkatkan kinerja aplikasi Anda adalah mengurangi jumlah permintaan ke server. Jadi, setiap gambar baru berarti permintaan baru. Sebaiknya kombinasikan gambar Anda menjadi satu. Gambar yang dihasilkan disebut sprite dan dengan mengubah gaya CSS background-position, Anda hanya dapat menampilkan bagian dari gambar yang Anda butuhkan. Misalnya, Twitter Bootstrap menggunakan sprite untuk ikon internalnya:

twittericons

Kemudian di CSS, Anda dapat melakukan sesuatu seperti ini, untuk menunjukkan bagian mana saja dari sprite yang Anda sukai:

Caching

Mekanisme cache browser adalah teman Anda. Ya, kadang-kadang selama pengembangan itu dapat menyebabkan beberapa situasi yang sangat funny, tetapi itu benar-benar membantu meningkatkan kinerja situs Anda. Setiap browser menyimpan konten seperti gambar, JavaScript, atau CSS. Ada beberapa cara untuk mengontrol cache dan saya sarankan Anda memeriksa artikel hebat ini untuk tinjauan terperinci. Secara umum, Anda dapat mengontrol proses dengan mengatur header, seperti:

Prefetching

HTML5 bergerak maju setiap hari. Ada fitur bagus bernama prefetching yang memberitahu browser bahwa Anda akan memerlukan beberapa sumber daya dalam waktu dekat dan harus diunduh sekarang, terlebih dahulu. Sebagai contoh:

Skema URI Data / Gambar Inline

Beberapa tahun yang lalu saya harus mengembangkan halaman web sederhana, yang seharusnya hanya satu file HTML. Tentu saja ada beberapa gambar, yang harus saya masukkan. Skema URI data membantu saya memecahkan masalah. Idenya adalah mengonversi gambar Anda menjadi string berenkode base64 dan menempatkannya di atribut src dari tag img. Sebagai contoh:

Dengan menggunakan pendekatan ini, gambar Anda sebenarnya ada dalam HTML dan Anda menyimpan satu permintaan HTTP. Tentu saja, jika Anda memiliki gambar besar, string akan sangat panjang. Berikut ini adalah skrip PHP sederhana yang mengubah gambar menjadi string base64:

Anda mungkin menemukan ini berguna dalam beberapa kasus, tetapi perlu diingat bahwa itu tidak bekerja dengan baik di IE.


CSS

Saya suka berpikir bahwa menulis CSS seperti menulis kode. Anda masih harus mengatur gaya Anda, untuk menentukan blok yang berbeda dan hubungan di antara mereka. Itu sebabnya saya pikir manajemen CSS sangat penting. Setiap bagian dari aplikasi harus memiliki gaya sendiri dan mereka harus dipisahkan dengan baik. Menjaga semua hal dalam file berbeda menyediakan organisasi yang baik, tetapi juga dilengkapi dengan masalahnya sendiri.

Kita semua tahu bahwa penggunaan pernyataan @import bukanlah ide yang sangat bagus. Itu karena setiap @import baru berarti permintaan baru ke server. Dan jika Anda memiliki, misalnya, 20 file .css yang berbeda itu berarti browser akan membuat 20 permintaan. Dan browser tidak merender / menampilkan halaman sebelum mengunduh semua gaya. Jika beberapa file .css Anda hilang atau sangat besar, Anda akan mendapatkan penundaan besar sebelum melihat sesuatu di layar.

Gunakan CSS Preprocessors

CSS preprocessor menyelesaikan semua masalah di atas. Anda masih membagi gaya Anda ke dalam file yang berbeda, tetapi pada akhirnya, preprocessor mengkompilasi semuanya menjadi satu file .css. Mereka sebenarnya menawarkan banyak fitur keren seperti variabel, blok bersarang, mixins dan warisan. Kode masih tampak seperti CSS, tetapi diformat dengan baik / terstruktur. Ada beberapa preprosesor populer yang patut diperiksa - Sass, LESS, dan Stylus. Berikut ini contoh sederhana yang ditulis dalam LESS:

akan menghasilkan

Atau, misalnya jika Anda memiliki styling untuk tombol dan ingin menghasilkan hanya tombol yang sama tetapi dengan warna lain untuk teks, Anda bisa melakukan ini:

CSS yang efisien

Biasanya, sebagian besar pengembang tidak berpikir tentang CSS yang efisien. Efisiensi dari CSS mencerminkan pada rendering halaman dan jika gaya Anda tidak efisien aplikasi Anda akan diberikan secara perlahan oleh browser. Fakta yang menarik adalah bahwa browser mengurai pemilih CSS dari kanan ke kiri. Yang berarti kode berikut:

... tidak efisien sama sekali. Itu karena mesin akan mendapatkan semua tag <a> dan harus mengevaluasi setiap elemen induk untuk akhirnya mengumpulkan gaya yang dibutuhkan. Anda juga harus tahu bahwa dalam hal efisiensi, para pemilih adalah jenis peringkat dalam urutan berikut: ID, kelas, tag, dan universal. Ini berarti bahwa elemen dengan set id akan dirender lebih cepat daripada elemen hanya dengan pemilih tag. Tentu saja, tidak ada gunanya menambahkan id pada semua elemen di pohon DOM, tetapi Anda harus memeriksa kode Anda dan memperbaikinya jika memungkinkan. Misalnya, jika Anda memiliki sesuatu seperti ini:

Anda harus menghapus bagian ul, karena Anda hanya memiliki satu elemen #navigation pada halaman. Atau di pemilih berikut:

Jelas bahwa elemen .content adalah anak dari tag body. Semua elemen sebenarnya adalah anak-anak dari elemen ini.

Berikut adalah dua tautan bermanfaat untuk topik ini: developers.google.com dan css-tricks.com

Ukuran file

Seperti yang kami sebutkan di atas, sebaiknya memiliki kode sesedikit mungkin, karena peramban tidak merender laman sebelum mengunduh CSS. Berikut ini beberapa tips untuk mengurangi ukuran file.

Gabungkan gaya yang serupa:

... berubah menjadi:

Gunakan singkatan. Dari pada:

Tuliskan dalam mode ini:

Perkecil kode CSS Anda. Anda dapat melakukan ini dengan menggunakan alat yang umumnya menghapus semua spasi dan baris baru. Misalnya CSSOptimiser atau Minifycss. Merupakan praktik umum untuk menggunakan instrumen tersebut di sisi server aplikasi, yaitu sesuatu yang ditulis dalam bahasa back-end. Biasanya komponen ini memperkecil kode Anda dan menyajikannya kepada pengguna.

Letakkan File CSS Anda di Tag <head>

Ini adalah praktik yang baik untuk menyertakan file .css Anda di tag head, dengan cara itu browser akan mengunduhnya terlebih dahulu.


JavaScript

Kurangi Jumlah Permintaan HTTP

Sama seperti dengan CSS Anda - ada baiknya untuk mengurangi jumlah permintaan yang dikirim ke server. Dalam banyak kasus, pemuatan file JavaScript tidak akan menghentikan perenderan halaman, tetapi itu akan membuat beberapa bagian halaman menjadi tidak berfungsi.

Minimalkan Kode Anda

Ada banyak pustaka yang melakukan pembenahan JavaScript. Ini adalah sesuatu yang akan mengurangi ukuran file, tetapi perlu diingat bahwa dalam lingkungan pengembangan itu baik untuk menjaga kode Anda tetap bersih. Sebagian besar alat ini mengubah nama variabel Anda dan mengonversi semuanya menjadi string satu baris, yang membuat proses debug hampir tidak mungkin.

CommonJS, AMD, RequireJS - Cobalah

JavaScript aslinya tidak memiliki mekanisme untuk mengelola modul. Jadi, semua hal itu diciptakan untuk memecahkan masalah ini. Mereka menyediakan API yang dapat Anda gunakan untuk menentukan dan menggunakan modul. Sebagai contoh, di sini adalah contoh yang diambil dari http://requirejs.org/:

Di dalam main.js, Anda dapat menggunakan require() untuk memuat skrip lain yang Anda perlukan:

Gunakan Namespaces

Jika kita berbicara tentang organisasi kode maka kita tidak bisa melewatkan bagian tentang ruang nama. Secara bawaan, tidak ada fitur dalam JavaScript, tetapi Anda masih dapat mencapai hal yang sama dengan kode kecil. Misalnya, jika Anda ingin membangun kerangka kerja MVC Anda sendiri, Anda mungkin akan memiliki kelas-kelas berikut:

Jika Anda meninggalkan hal-hal sebagaimana adanya dalam kode di atas, maka mereka menjadi publik dan ada peluang lebih besar menghasilkan konflik dengan pustaka lain dalam proyek Anda. Jadi, mengelompokkan mereka dalam objek independen (namespace) membuat framework terlindungi:

Ikuti Pola Desain

Tidak perlu menemukan kembali roda. Javascript menjadi sangat populer dan ada banyak praktik baik di luar sana. Pola desain adalah solusi yang dapat digunakan kembali untuk masalah umum dalam pemrograman. Mengikuti beberapa dari mereka akan membantu Anda membangun aplikasi yang baik. Namun, jika saya mencoba untuk menutupi semuanya di sini, saya harus menulis buku, jadi di sini hanya beberapa di antaranya:

Pola Konstruktor

Gunakan pola ini untuk membuat instance dari jenis objek tertentu. Inilah contohnya:

Atau Anda dapat mencoba ini:

Pola Modul

Pola modul memberi kita kemampuan untuk membuat metode pribadi dan umum. Misalnya, dalam kode di bawah ini, variabel _index dan metode privateMethod bersifat pribadi. increment dan getIndex bersifat publik.

Pola Pengamat

Di mana pun Anda melihat berlangganan atau mengirim acara, Anda mungkin akan melihat pola ini. Ada pengamat yang tertarik pada sesuatu yang berhubungan dengan objek tertentu. Begitu aksi itu terjadi, objek tersebut akan memberi tahu pengamat. Contoh di bawah ini menunjukkan bagaimana kita dapat menambahkan pengamat ke objek Users:

Pola Chaining Fungsi

Pola ini adalah cara yang bagus untuk mengatur antarmuka publik dari modul Anda. Ini menghemat waktu dan meningkatkan keterbacaan:

Saya sangat merekomendasikan memeriksa buku ini oleh Addy Osmani. Ini adalah salah satu sumber daya terbaik yang dapat Anda temukan tentang pola desain di JavaScript.


Assets-Pack

Sekarang kita mendekati akhir artikel ini, saya ingin berbagi beberapa pemikiran tentang CSS dan manajemen kode JavaScript di server. Ini adalah teknik yang sangat umum untuk menambahkan penggabungan, minifikasi, dan kompilasi ke dalam logika aplikasi. Seringkali ada semacam mekanisme cache, tetapi semua hal terjadi selama waktu proses. Jadi Anda mungkin memiliki beberapa logika kode, yang menangani permintaan untuk file .js atau .css dan menyajikan konten yang tepat. Di belakang proses ini adalah kompilasi, minifikasi atau apa pun yang Anda gunakan untuk mengepak aset Anda.

Dalam proyek-proyek terbaru saya, saya menggunakan alat yang disebut assets-pack. Ini sangat membantu dan saya akan menjelaskan secara detail apa sebenarnya yang dilakukannya, tetapi yang lebih menarik adalah bagaimana saya menggunakannya. Perpustakaan ini dimaksudkan untuk digunakan hanya dalam mode pengembangan, itu bukan sesuatu yang tetap di basis kode Anda dan itu bukan sesuatu yang harus Anda gunakan di server produksi Anda.

Idenya adalah menggunakan pengepak hanya ketika Anda bekerja pada aset (CSS, JS). Ini benar-benar melihat perubahan dalam direktori tertentu dan mengkompilasi / mengemas kode ke dalam satu file. Dengan menggunakan pendekatan ini Anda tidak perlu memikirkan minification atau kompilasi. Yang harus Anda lakukan hanyalah mengirim file statis yang dikompilasi ke pengguna. Ini meningkatkan kinerja aplikasi Anda, karena hanya melayani file statis dan tentu saja membuat semuanya lebih sederhana. Anda tidak perlu mengatur apa pun di server Anda atau menerapkan logika yang tidak perlu.

Di sini adalah bagaimana Anda dapat mengatur dan menggunakan assets-pack.

Instalasi

Alat ini adalah modul Nodejs, jadi Anda harus sudah menginstal Node. Jika tidak, cukup buka nodejs.org/download dan ambil paket untuk sistem operasi Anda. Setelah itu:

Pemakaian

Modul bekerja dengan konfigurasi JSON. Ketika digunakan melalui baris perintah, Anda harus menempatkan pengaturan Anda dalam file .json.

Melalui Command Line

Buat file assets.json dan jalankan perintah berikut di direktori yang sama:

Jika file konfigurasi Anda menggunakan nama lain atau di direktori lain, gunakan:

Dalam kode

Konfigurasi

Konfigurasi harus berupa file / objek JSON yang valid. Ini hanya sebuah array objek:

Objek Aset

Struktur dasar dari objek aset seperti ini:

Properti pack tidak wajib. Jika Anda melewatkannya, maka nilainya sama dengan watch. minify secara default adalah false.

Berikut beberapa contohnya:

Pengepakan CSS

Packing JavaScript

Pengepakan File .less

Pengemasan file .less sedikit berbeda. Properti pack bersifat wajib dan pada dasarnya adalah titik masuk Anda. Anda harus mengimpor semua file .less lainnya di sana. Properti exclude tidak tersedia di sini.

Jika Anda menemukan masalah, silakan periksa tes/packing-less.spec.js dari repositori di GitHub.

Packing Format File Lain

assets-pack bekerja dengan format file apa pun. Sebagai contoh, kita dapat menggabungkan template HTML ke dalam satu file dengan melakukan sesuatu seperti ini:

Satu-satunya hal yang harus Anda ketahui di sini adalah tidak ada batasan.


Kesimpulan

Sebagai pengembang web front-end, kami harus mencoba memberikan kinerja terbaik bagi pengguna kami. Kiat di atas tidak seharusnya mencakup semua aspek dari organisasi dan kinerja aset, tetapi mereka adalah orang-orang yang telah saya tangani secara pribadi selama pekerjaan sehari-hari saya. Silakan bagikan beberapa tips Anda di bawah ini, di komentar.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.