Bagaimana cara mengoptimalkan file css?

Melihat alat webmaster saya, Google dengan ramah merekomendasikan agar saya dapat lebih meningkatkan kinerja beberapa situs saya dan untuk melihat rekomendasi yang diberikan oleh layanan PageSpeed .

Jadi saya lakukan.

Saran pengoptimalan mereka menunjukkan peningkatan negatif di atas apa yang sudah saya miliki:

Jadi secara keseluruhan, saya tidak melihat manfaat dari mengambil saran mereka. Namun bagian atas laporan mencantumkan yang berikut:

                                    Original    Optimized   Difference
Page Load Time                    4.094s    0.471s  -3.623s (88.5%)
Speed Index (lower is better)       1953    3518    +1565 (80.1%)

Jadi saya agak bingung.

Namun alat Webmaster menyarankan agar saya mengoptimalkan CSS pada halaman - terutama semua CSS terkait tema jQuery.

Saya sudah memuat CSS secara tidak sinkron:

    jQuery(function () {
        $("head").append("<link href='/Content/themes/custom-theme-lightness/jquery.ui.all.css' rel='stylesheet' type='text/css' />");
        $("head").append("<link href='/Content/StylesResults.css' rel='stylesheet' type='text/css' />");
    });

Jadi saya mencari beberapa saran.

Terima kasih.

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Setelah Anda mengkode beberapa waktu, Anda mulai untuk mengambil sesuatu untuk diberikan. Anda lupa seberapa pintar Anda sebenarnya. Berapa banyak ratusan shortcut keyboard yang telah kita hafalkan? Berapa banyak bahasa yang telah kita pelajari? Berapa banyak framework? Berapa banyak hack? Untuk mengatakan bahwa desain/pengembangan web adalah industri yang sangat sulit ia mudah dimengerti. Selanjutnya, tambahkan kenyataan bahwa banyak dari apa yang Anda kenal sekarang akan dianggap usang dalam beberapa tahun.

Hari ini, kita akan melihat sebuah potongan tips dan trik yang akan membantu para pemula mempercepat waktu pengembangan, dan mengkode lebih efisien. Anda akan melihat campuran tips penghemat waktu, serta trik mengkode tertentu untuk meningkatkan efisiensi aplikasi web.

Kompres Gambar Anda Lebih Jauh

Ketika menggunakan tool "Save for Web" di Photoshop, kita bisa kompres gambar untuk menurunkan ukuran file mereka masing-masing. Tapi, apakah Anda tahu bahwa kompresi dapat diambil lebih jauh lagi tanpa mengorbankan kualitasnya? Sebuah situs bernama Smush.It membuat prosesnya menjadi mudah.

Bagaimana Mungkin Ini Terjadi?

Tim di Smush.It menggunakan berbagai macam tool.

• ImageMagick untuk mengidentifikasi jenis gambar dan untuk mengkonversi GIF ke PNG.
• pngcrush untuk membuang potongan yang tidak dibutuhkan dari PNG. Saat ini kami sedang bereksperimen dengan tool PNG lainnya seperti pngout, optipng, pngrewrite yang akan memungkinkan untuk optimasi png yang lebih baik.
• jpegtran membuang semua meta data dari JPEG (yang saat ini dinonaktifkan) dan mencoba JPEG progresif.
• gifsicle mengoptimalkan animasi GIF dengan membuang piksel yang berulang dalam frame-frame berbeda.

* Daftar item di atas diambil dari Halaman FAQ SmushIt.

Jadi, sebelum menggelar sebuah situs web baru, jalankan url Anda melalui layanan mereka untuk mengurangi semua gambar Anda - sehingga mempercepat situs web Anda. Waspadalah - layanannya mungkin mengkonversi file GIF Anda ke PNG. Anda mungkin perlu memperbarui file HTML dan CSS yang sesuai. Sementara kita pada subjeknya, 99% dari waktu, menyimpan sebagai PNG adalah keputusan yang lebih baik. Kecuali Anda menggunakan animasi GIF yang norak, pertimbangkan format PNG menjadi penerapan terbaik.

Bijaksanalah. Menggunakan Cuplikan.

Banyak IDE menawarkan panel "cuplikan kode" yang akan memungkinkan Anda menyimpan kode untuk digunakan nantinya. Apakah Anda sering mengunjungi lipsum.com untuk mengambil teks generik? Mengapa tidak hanya menyimpannya sebagai cuplikan? Di Dreamweaver, tekan "Shift F9" untuk membuka tab cuplikan. Anda kemudian dapat men-drag cuplikan yang sesuai ke lokasi yang sesuai. Fitur ini menghemat BEGITU banyak waktu selama seminggu.

Memanfaatkan Console.log() untuk Debug

Anda telah men-download library jQuery, dan Anda secara perlahan mencoba memahami sintaksnya. Sepanjang jalan, Anda menabrak halangan dan menyadari bahwa Anda tidak tahu apa nilai yang sama dari $someVariable. Mudah, hanya lakukan...

console.log($someVariable);

console.log($someVariable);Sekarang, memuat Firefox - pastikan Anda memiliki FireBug terinstal - dan tekan F12. Anda akan disajikan dengan nilai yang benar.

Sekarang - kalikan ini dengan tak terbatas dan bawa ke kedalaman selamanya dan Anda masih tidak akan menyadari betapa bergunanya Firebug dan console.log(). :)

Download Web Developer Toolbar

Dibuat oleh Chris Pederick, plugin Firefox ini luar biasa bermanfaat yang menyajikan Anda dengan sejumlah besar pilihan. Banyak dari Anda yang menonton screencasts saya tahu bahwa saya penggemar menggunakan pilihan "Edit CSS" untuk menyesuaikan gaya saya secara real-time. Pilihan lainnya termasuk...

• Mudah menonaktifkan Javascript
• Mudah menonaktifkan CSS
• Link Validasi HTML/CSS Cepat
• Penggaris
• Menonaktifkan cookie
• Terlalu banyak fitur hebat untuk didaftar!

Web Developer Toolbar

Pertimbangkan untuk Menempatkan Tag Script di Bawah

Ini adalah prosedur yang kita semua tidak cukup melakukannya. Meskipun tidak selalu layak, anda dapat mempercepat situs berkali-kali dengan menempatkan tag script sebelum menutup tag <body>.

....
<script type="text/javascript" src="someScript.js"></script>
<script type="text/javascript" src="anotherScript.js"></script>
</body>

Mengapa Hal Ini Membantu?

Sebagian besar browser yang ada saat ini dapat men-download maksimal dua komponen secara paralel untuk setiap nama host. Namun, ketika men-download sebuah skrip, tidak ada download lainnya yang dapat terjadi. Download tersebut harus selesai sebelum bergerak maju.

Jadi, bila layak, masuk akal untuk memindahkan file ini ke bagian bawah dokumen Anda dalam rangka untuk memungkinkan komponen lainnya (gambar, css, dll) agar dimuat pertama kali.

Ketika Men-deploy, Kompres File CSS dan Javascript

Jika kinerja adalah penting untuk situs web Anda, saya sangat menyarankan Anda mempertimbangkan untuk memampatkan file CSS dan Javascript sebelum penyebaran. Jangan repot-repot melakukannya di awal pembangunan. Ini hanya akan menyebabkan lebih frustrasi daripada membantu. Namun, setelah semuanya siap, kompres mereka semua.

Layanan Kompresi Javascript

• Javascript Compressor
• JS Compressor

Layanan Kompresi CSS

• CSS Optimiser
• CSS Compressor
• Clean CSS

Dua alat lainnya yang berguna untuk mengemas kode JavaScript adalah YUI Compressor, dan JSMin.

Selain itu, Anda memiliki pilihan untuk memampatkan HTML Anda - meskipun saya tidak akan merekomendasikan ini. Pengurangan file ini diabaikan.

Pengumpulan "Tips Cepat" jQuery

Tidak terlalu lama yang lalu, Jon Hobbs-Smith dari tvidesign.co.uk memposting sebuah artikel yang fantastis yang merinci 25 tips jQuery. Pastikan untuk mem-bookmark halaman ini! Berikut ini adalah beberapa favorit saya.

Periksa apakah ada sebuah elemen.

if ($('#myDiv).length) {  
  // this code will only run if the div with an id of #myDiv exists. 
}

Menggunakan Konteks

Banyak orang tidak menyadari bahwa, ketika mengakses elemen dom, fungsi jQuery menerima parameter kedua - "konteks". Pertimbangkan yang berikut ini...

var myElement = $('#someElement');

Kode ini akan memerlukan jQuery untuk melintasi seluruh DOM. Kita bisa meningkatkan kecepatannya dengan menggunakan konteks sebagai parameter kedua.

var myElement = $('#someElement', $('.someContainer'));

Sekarang kita mengatakan jQuery untuk hanya mencari di dalam elemen .someContainer, dan mengabaikan segala sesuatu di luarnya.

Menggunakan Id Daripada Kelas

Ketika mengakses ID dengan jQuery, library tersebut menggunakan metode tradisional "getElementById". Namun, ketika mengakses kelas-kelas, jQuery harus menggunakan metodenya sendiri untuk melintasi dom (tidak ada metode "getElementByClass" yang asli). Akibatnya, dibutuhkan sedikit lebih lama!

Review Semua 25 Tips!

Gunakan $_GET bukan $_POST, Jika Memungkinkan

Jika Anda memiliki pilihan antara $_GET atau $_POST ketika membuat panggilan AJAX, pilih yang terlebih dahulu.

"Tim Yahoo! Mail menemukan bahwa ketika menggunakan XMLHttpRequest, POST diimplementasikan dalam browser sebagai proses dua langkah: mengirim header pertama kali, kemudian mengirimkan data. Jadi yang terbaik adalah menggunakan GET, yang hanya membutuhkan satu paket TCP untuk mengirimkan (kecuali jika Anda memiliki banyak cookies)." - Developer.Yahoo.com

Ingat, jangan membabi buta menggunakan $_GET. Pastikan pertama kali Anda tahu persis apa yang Anda lakukan. Misalnya, dalam situasi Anda harus mencampur querystring dan akses database. Tidak terlalu lama yang lalu, salah satu dari teman-teman Twitter saya mengirimi saya sebuah gambar dari sebuah situs yang berisi query MYSQL dalam url. JANGAN LAKUKAN INI! :)

Saat Penerapan, Gunakan Pustaka dan Framework

Apakah Anda menggunakan PHP, ASP.NET, Mootools, jQuery - atau kombinasi dari semua itu, pertimbangkan untuk menggunakan framework pada saat yang tepat.

Sebagai contoh:

• jika saya sedang menjalankan sebuah situs statis sederhana dan hanya membutuhkan sedikit Javascript untuk membuat efek rollover, mengimpor skrip jQuery akan menjadi tidak pantas.
• Jika fitur yang paling rumit dari situs statis saya adalah menarik sebuah file XML, saya tidak perlu menggunakan framework. Dalam kasus seperti itu, situs saya akan menderita dan saya mengeluarkan lebih banyak uang dalam pengeluaran bandwidth tambahan.

Namun, jika saya membangun sebuah situs yang rumit yang memerlukan CMS penuh dan akses data yang rumit, saya akan mencari salah satu framework bahasa pilihan saya.

Ingat - membuat framework yang bekerja untuk Anda, bukan sebaliknya. Jadilah cerdas ketika membuat keputusan ini.

YSlow

YSlow adalah layanan hebat yang memeriksa situs web Anda untuk memastikan bahwa itu seefisien mungkin. Tim Yahoo Dev, tidak terlalu lama yang lalu, menciptakan seperangkat pedoman, atau praktik-praktik terbaik, yang harus diikuti ketika mengembangkan - banyak yang dijelaskan dalam artikel ini, sebenarnya.

Ada screencast YSlow yang hebat yang menunjukkan banyak teknik menghemat waktu. Saya sangat merekomendasikan bahwa Anda melihatnya ketika Anda memiliki kesempatan.

Cara Pintas Keyboard. Pelajari Mereka!

Banyak desainer/pengembang berpengalaman akan setuju dengan saya, jika saya harus pergi ke toolbar menu setiap kali saya ingin membuat perubahan ke situs atau desain saya, saya akan tersesat. Saya sudah menggunakan cara pintas keyboard untuk begitu lama yang saya tidak tahu lokasi yang tepat lagi untuk perintah-perintah ini. Saya hanya tahu bahwa "Shift X" membuka panel yang benar.

Pada awalnya, ini dapat tampak seperti pengetahuan yang terbuang. Tapi, saya yakinkan Anda bahwa itu tidak. Saya sarankan bahwa Anda melakukan pencarian Google untuk "X keyboard shortcuts" - di mana X adalah sama dengan perangkat lunak Anda (misalnya Photoshop). Cetak grafik dan tempatkan di dekat komputer Anda. Selama beberapa minggu ke depan, praktek menyentuh mouse Anda sesedikit mungkin. Ini adalah salah satu hal yang memisahkan seorang pro dari penggemar.

Membuat Template "Situs Web Baru"

Mari kita hadapi itu; tidak setiap situs perlu beberapa aplikasi besar dan rumit. Kadang-kadang, kita hanya ingin menampilkan portofolio - mungkin sebagian besar waktu untuk beberapa! Dalam hal ini, mengapa tidak membuat "template" sederhana yang berisi semua yang Anda butuhkan untuk memulainya.

Dalam folder template saya, saya telah menyarangkan folder "JS" dan "CSS".

• Terlebih dahulu mengandung file "DD_belatedPNG.js" saya (menambah transparansi 24 bit ke PNG di IE6).
• Yang terakhir hanya berisi file "default.css" kosong, dan file reset kustom saya sendiri.

Selain itu, saya memiliki file "index.html(php)" yang berisi beberapa potongan kode yang saya gunakan pada sebagian besar proyek-proyek saya. Itu tidak terlalu mewah, tetapi menghemat waktu!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/default.css" />

<!--[if lt IE 7]>
<script type="text/javascript" src="js/DD_belatedPNG_0.0.7a-min.js"></script>
<![endif]-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<title>Untitled Document</title>

<script type="text/javascript">
  $(function() {
	
	});
</script>

</head>

<body>

<div id="container">

</div><!--end container-->

</body>
</html>

Seperti yang Anda lihat, saya mereferensi file CSS dan Javascript saya, link ke file jQuery dari Google, membuat fungsi jQuery document.ready(), dan membuka div "container" standar.

Itu agak sederhana, tetapi MENGHEMAT WAKTU. Jadi setiap kali Anda membuat situs baru, cukup copy folder "template" dan menggali lebih dalam.

Inline vs Eksternal

Pada umumnya, semua CSS dan Javascript harus dihapus dari halaman dan ditempatkan di file eksternal masing-masing.

Mengapa Kita Harus Melakukan Ini?

• Kode yang lebih bersih.
• Pemisahan presentasi dan konten sangat penting.
• Dengan menggunakan file eksternal, data akan di-cache untuk penggunaan masa depan. Ini mengurangi ukuran file HTML tanpa menyebabkan tambahan permintaan HTTP - karena caching.

Jika Anda hanya memiliki beberapa gaya dasar, pengecualian dapat dibuat. Pada mereka, dan hanya contoh tersebut, mungkin akan bermanfaat untuk memasukkan mereka dalam halaman HTML.

Tentukan jika Skrip PHP Dipanggil dengan Javascript

AJAX saat ini adalah semua kemarahan - sebagian besar karena itu akhirnya menjadi relatif mudah-digunakan, terima kasih ke pustaka Javascript. Dalam beberapa kasus, Anda harus memiliki sebuah cara untuk menentukan apakah skrip itu dipanggil Javascript. Ada beberapa hari untuk menyelesaikan tugas ini.

Salah satu cara untuk menambahkan pasangan key-value yang unik dengan Javascript saat mengirim POST. Anda kemudian bisa menggunakan PHP untuk menentukan apakah kunci tertentu tersebut ada. Jika tidak, kita tahu bahwa Javascript diaktifkan.

Cara yang lebih baik akan menggunakan fitur PHP built-in yang disebut "HTTP_X_REQUESTED_WITH". Untuk menggambarkan...

if isset($_SERVER['HTTP_X_REQUESTED_WITH']) {
  // write some code and rest assured that the Javascript is enabled.
} else {
  // Do something different to compensate for users that have JS turned off.
}

Link ke CDN Google

Tidak beberapa lama yang lalu, Google mulai meng-hosting skrip populer seperti jQuery. Jika Anda menggunakan sebuah pustaka, ini sangat dianjurkan bahwa Anda link ke CDN Google daripada menggunakan skrip Anda sendiri.

AJAX Libraries API

Bagaimana Bisa?

1. Caching: Ada kemungkinan bahwa pengguna Anda tidak perlu men-download skrip semuanya! Ketika browser melihat permintaan untuk file yang sudah diunduh ke komputer pengguna, ia mengakuinya dan mengembalikan respon "304" (NOT MODIFIED). Sebagai contoh, mari kita bayangkan bahwa salah satu pengguna mengunjungi tiga puluh situs yang semuanya me-link ke CDN Google. Dalam contoh ini, pengguna hanya akan men-download jQuery sekali!
2. Meningkatkan Paralelisme: saya berbicara tentang hal ini dalam tip sebelumnya. Dengan menghapus permintaan tambahan ini, browser pengguna dapat men-download lebih banyak konten secara paralel.

Merangkul Ekstensi Firefox

Saya adalah penggemar besar dari Google Chrome. Terbuka dengan sangat cepat dan memproses Javascript lebih cepat dari browser lainnya - setidaknya untuk sekarang (saya pikir versi terbaru dari Firefox mungkin telah sampai kesana.).

Namun, Anda tidak akan melihat saya meninggalkan Firefox segera. Jumlah plugin yang membantu tersedia untuk browser adalah luar biasa. Berikut daftar favorit saya.

• Web Developer Toolbar
• S3 Organizer
• Clippings
• Firebug
• IE Tab
• FireFTP
• DownThemAll
• YSlow

Bila Bermanfaat, Gunakan IDE

Dalam cara yang sama bahwa itu keren untuk membenci Microsoft sekarang, tampaknya bahwa itu populer saat ini bagi orang-orang untuk menyerang siapa saja yang menggunakan IDE ketika mengembangkan. Ini hanya konyol.

Dalam banyak kasus, penggunaan IDE lanjutan adalah sangat penting - terutama ketika bekerja di bahasa OOP. Sekarang, jika Anda hanya membuat template HTML kecil, program-program seperti Notepad++ dan Coda akan bekerja baik sekali. Sebenarnya saya akan merekomendasikan penggunaan mereka dalam kasus ini. Jangan menambahkan ekstra penggembungan jika Anda tidak membutuhkannya. Namun, ketika mengembangkan aplikasi canggih, ambil keuntungan dari sebuah IDE.

Itu Saja!

Itu yang harus dilakukan untuk saat ini. Mudah-mudahan, beberapa dari ini (mungkin semua dari mereka!) akan membantu Anda menjadikan Anda desainer dan pengembang lebih baik. Yang mana beberapa favorit pintasan Anda? Tinggalkan komentar di bawah ini dan biarkan kami tahu!