Panduan Utama Untuk Optimalisasi Web (Kiat & Praktik Terbaik)

Pengoptimalan web adalah bagian penting dari pengembangan dan pemeliharaan web tetapi juga sesuatu yang sering diabaikan oleh webmaster. Pikirkan saja uang yang dapat Anda hemat, dan bagaimana hal itu berpotensi membantu meningkatkan jumlah pembaca dan lalu lintas Anda ketika sudah selesai.

Jika Anda belum melakukan optimasi ke situs web (atau blog) Anda sejauh ini atau hanya ingin tahu bagaimana ini dapat membantu mempercepat situs Anda, silakan lihat daftar tips pengoptimalan yang telah kami kumpulkan.

Kami telah membagi beberapa hal menjadi 3 bagian terpisah untuk keterbacaan yang lebih baik - masing-masing optimasi sisi server, optimasi aset (yang mencakup komponen web seperti CSS, Javascript, gambar, dll) dan peron, di mana kita akan fokus Optimasi WordPress. Pada bagian terakhir, kami memberikan beberapa tautan yang kami anggap berguna. Daftar lengkap setelah lompat.

Optimasi: Sisi server

1. Pilih Web Host yang layak

   Akun hosting web Anda tidak memiliki hubungan langsung dengan optimasi yang akan Anda lakukan tetapi kami pikir memilih akun hosting web yang tepat sangat penting sehingga kami memutuskan untuk membawanya ke perhatian Anda terlebih dahulu. Akun hosting adalah dasar dari situs web / blog Anda di mana itu keamanan, aksesibilitas (cPanel, FTP, SSH), stabilitas server, harga dan dukungan pelanggan semua memainkan peran penting. Anda harus memastikan bahwa Anda berada di tangan yang baik.

   Bacaan yang disarankan: Cara Memilih Host Web oleh wikiHow adalah artikel bagus yang memberi Anda langkah dan kiat yang harus Anda ketahui sebelum membeli akun hosting web apa pun.

2. Aset Host Secara Terpisah

   Ketika kami menyebutkan aset, kami maksudkan komponen web seperti gambar dan skrip statis yang tidak memerlukan pemrosesan sisi server. Ini termasuk semua grafik web, gambar, Javascripts, Cascading Style Sheets (CSS), dll. Hosting aset secara terpisah bukanlah suatu keharusan, tetapi kami telah melihat hasil yang luar biasa dalam hal stabilitas server dengan implementasi ini ketika blog mengalami lonjakan traffic.

   Bacaan yang disarankan: Memaksimalkan Unduhan Paralel di Carpool Lane.

3. Kompresi dengan GZip

   Singkatnya, konten bergerak dari sisi server ke sisi klien (sebaliknya) setiap kali permintaan HTTP dibuat. Mengkompresi konten untuk pengiriman sangat mengurangi waktu yang dibutuhkan untuk memproses setiap permintaan.

   GZip adalah salah satu cara terbaik untuk melakukan ini dan itu bervariasi sesuai dengan jenis server yang Anda gunakan. Contohnya, Apache 1.3 menggunakan mod_zip, Apache 2.x menggunakan mod_deflate dan inilah cara melakukannya Nginx. Berikut adalah beberapa artikel yang sangat bagus untuk membuat Anda terbiasa dengan kompresi sisi server:

   • Percepat situs web dengan mengaktifkan kompresi file Apache
   • Kompres Output Web Menggunakan mod_gzip dan Apache
   • Cara Mengoptimalkan Situs Anda Dengan Kompresi GZIP
   • Kompresi sisi server untuk ASP

4. Minimalkan Redirect

   Webmaster melakukan pengalihan URL (apakah itu pengalihan Javascript atau META) sepanjang waktu. Terkadang tujuannya adalah untuk mengarahkan pengguna dari halaman lama ke yang baru, atau hanya membimbing pengguna ke halaman yang benar. Setiap pengalihan membuat permintaan HTTP tambahan dan RTT (round-trip-time). Semakin banyak pengalihan yang Anda miliki, pengguna yang lebih lambat akan sampai ke halaman tujuan.

   Bacaan yang disarankan: Hindari Pengalihan oleh Google Code memberi Anda gambaran yang baik tentang masalah ini. Artikel ini juga merekomendasikan beberapa cara praktis untuk meminimalkan pengalihan untuk meningkatkan kecepatan penyajian.

5. Kurangi Pencarian DNS

   Menurut Yahoo! Blog Jaringan Pengembang, dibutuhkan sekitar 20-120 milidetik untuk DNS (Domain Name System) untuk menyelesaikan alamat IP untuk nama host atau nama domain yang diberikan dan browser tidak dapat melakukan apa pun sampai proses selesai dengan benar.

   Penulis Steve Souders menyarankan agar memisahkan komponen-komponen ini di setidaknya dua tetapi tidak lebih dari empat nama host mengurangi pencarian DNS dan memungkinkan unduhan paralel tingkat tinggi. Baca lebih lajut pada artikel tersebut.

Optimalisasi: Aset (CSS, Javascripts, Gambar)

1. Gabungkan Banyak Javascripts menjadi Satu

   Teman-teman di rakaz.nl bagikan bagaimana Anda dapat menggabungkan beberapa Javascripts seperti:

    http://www.creatype.nl/javascript/prototype.js http://www.creatype.nl/javascript/builder.js http://www.creatype.nl/javascript/effects.js http: // www .creatype.nl / javascript / dragdrop.js http://www.creatype.nl/javascript/slider.js 

   Menjadi satu file dengan mengubah URL ke:

    http://www.creatype.nl/javascript/prototype.js,builder.js,effects.js,dragdrop.js,slider.js 

   dengan memanipulasi .htaccess dan menggunakan PHP. Klik disini untuk membaca lebih lanjut.

2. Kompres Javascript & CSS

   Mengecilkan adalah aplikasi PHP5 yang dapat menggabungkan beberapa file CSS dan Javascript, kompres isinya (mis. penghapusan spasi / komentar yang tidak perlu), dan menyajikan hasilnya dengan encoding HTTP (gzip / deflate) dan header yang memungkinkan caching sisi klien yang optimal.

   

   Kompres secara online!Ada juga beberapa layanan web yang memungkinkan Anda mengompres file Javascripts dan CSS secara manual. Berikut adalah beberapa yang kami ketahui:

   • kompresor (Javascript, CSS)
   • javascriptcompressor.com (Javascript)
   • jscompress.com (Javascript)
   • CleanCSS (CSS)
   • Pengoptimal CSS (CSS)

3. Kustomisasi Header Expiry / Caching

   Kredit: httpwatch

   Dengan menggunakan tajuk Kadaluwarsa yang disesuaikan, komponen web Anda seperti gambar, file statis, CSS, Javascript melewatkan permintaan HTTP yang tidak perlu saat pengguna yang sama memuat ulang halaman untuk kedua kalinya. Ini mengurangi bandwidth yang dibutuhkan dan pasti membantu dalam melayani halaman lebih cepat.

   Bacaan yang disarankan:

   • Yahoo! Blog Jaringan Pengembang - Tambahkan Header yang Kedaluwarsa
   • Cara Menambahkan Header yang Baik Kadaluwarsa ke Gambar di Apache 1.3
   • Caching HTTP
   • Tutorial Caching untuk Penulis Web dan Webmaster

4. Off-load Aset

   Dengan mematikan, kami bermaksud memisahkan Javascripts, gambar, CSS dan file statis dari server utama di mana situs web di-host dan menempatkannya di server lain atau bergantung pada layanan web lainnya. Kami telah melihat peningkatan yang signifikan di sini di Hongkiat dengan melepas aset ke layanan web lain yang tersedia, meninggalkan server untuk melakukan pemrosesan PHP. Berikut adalah beberapa saran layanan online untuk pembongkaran:

   • Gambar: Flickr, Smugmug, Host berbayar *
   • Javascripts: Perpustakaan Google Ajax, Google App Engine, Host berbayar *
   • Formulir Webs: WuFoo, FormStack
   • RSS: Google Feedburner
   • Survei dan Polling: SurveyMonkey, PollDaddy

   * Hosting berbayar - Layanan berbayar selalu memiliki keandalan dan stabilitas yang lebih baik. Jika situs web Anda terus-menerus meminta aset, Anda harus memastikan bahwa aset tersebut ada di tangan yang baik. Kami merekomendasikan Amazon S3 dan Cloud Front.

5. Menangani Gambar Web

   Gambar adalah bagian penting dari situs web Anda. Namun jika mereka tidak mengoptimalkan dengan benar, mereka dapat menjadi beban dan akhirnya menggunakan jumlah besar bandwidth yang tidak terduga setiap hari. Ini ada beberapa praktik terbaik untuk mengoptimalkan gambar Anda:

   • Optimalkan Gambar PNGOrang-orang di Smashing Magazine menjelaskan beberapa teknik pintar yang dapat membantu Anda mengoptimalkan gambar PNG Anda.
   • Mengoptimalkan untuk Web - Hal-hal yang perlu Anda ketahui (format) Pelajari lebih lanjut tentang Jpeg, GIF, PNG dan bagaimana Anda harus menyimpan gambar Anda untuk web.
   • Jangan Skala GambarSelalu berlatih memasukkan lebar dan tinggi untuk setiap gambar. Juga jangan mengurangi gambar hanya karena Anda memerlukan versi yang lebih kecil di web. Sebagai contoh: Jangan paksa skala gambar 200 × 200 px ke 50 × 50 px untuk situs web Anda dengan mengubah lebar dan tinggi. Dapatkan 50 × 50 px sebagai gantinya.

   Mengoptimalkan dengan Layanan dan Alat Web. Berita baiknya adalah, Anda tidak perlu menjadi ahli Photoshop untuk mengoptimalkan gambar Anda. Ada banyak layanan dan alat web untuk membantu Anda melakukan pekerjaan itu.

   • Smush.itMungkin salah satu alat online paling efisien untuk mengoptimalkan gambar. Bahkan ada plugin WordPress untuk itu!
   • JPEG & PNG StripperAlat Windows untuk menghapus / membersihkan / menghapus metadata (sampah) yang tidak perlu dari file JPG / JPEG / JFIF & PNG.
   • Pengoptimal Gambar OnlineMemungkinkan Anda dengan mudah mengoptimalkan gif, animasi gif, jpg, dan png, sehingga ia memuat secepat mungkin di situs Anda, dengan Dynamic Drive
   • SuperGIFDengan mudah membuat semua gambar dan animasi GIF Anda lebih kecil.
   • Ada lagi.

6. Menangani CSS

   Situs web modern menggunakan CSS sebagai dasar gaya, serta tampilan dan nuansa. Tidak hanya CSS memberikan fleksibilitas besar untuk perubahan, itu juga lebih rendah dalam hal kode yang dibutuhkan. Namun, jika kode mereka buruk, itu bisa menjadi bumerang. Berikut adalah beberapa daftar periksa, atau lebih tepatnya panduan untuk Anda memastikan CSS Anda dioptimalkan dengan benar:

   • Menjaga Anak-Anak Elemen Anda Sesuai dengan KeturunanCara menjaga markup Anda tetap bersih dengan pemilih CSS.
   • Buat CSS singkatKetika mereka memberikan gaya yang sama, kodenya lebih baik semakin pendek. Ini a Panduan singkatan CSS Anda mungkin perlu.
   • Gunakan CSS SpriteTeknik CSS Sprite mengurangi permintaan HTTP setiap kali sebuah halaman dimuat dengan menggabungkan beberapa (atau semua) gambar bersama-sama pada satu file gambar dan mengontrol hasilnya dengan CSS posisi latar belakang atribut. Berikut adalah beberapa panduan dan teknik yang berguna untuk membuat CSS Sprite:
     • Generator Sprite CSS Online
     • Pembuat Sprite CSS Online Dan Offline Terbaik
   • Menggunakan setiap deklarasi hanya sekaliSaat ingin mengoptimalkan file CSS Anda, salah satu langkah paling ampuh yang dapat Anda terapkan adalah dengan menggunakan setiap deklarasi sekali saja.
   • Kurangi jumlah file CSSAlasannya sederhana, semakin banyak file CSS yang Anda miliki, semakin banyak permintaan HTTP yang harus dibuat ketika halaman web diminta. Misalnya, alih-alih memiliki banyak file CSS seperti berikut ini:

     Anda dapat menggabungkan mereka ke dalam satu CSS:

   Bacaan yang disarankan:

   • Alat yang Berguna Untuk Memeriksa, Membersihkan & Mengoptimalkan File CSS AndaBeberapa alat bermanfaat yang dapat Anda gunakan untuk mengoptimalkan kode CSS Anda, bahkan jika Anda sama sekali tidak memiliki pengetahuan tentang pengkodean CSS.
   • 7 Prinsip Kode CSS Bersih dan DioptimalkanOptimalisasi tidak hanya meminimalkan ukuran file - ini juga tentang pengaturan, bebas kekacauan, dan efisien.
   • Praktik Terbaik untuk mengoptimalkan CSSPertimbangkan artikel ini lebih seperti latihan akademis daripada tips optimasi kehidupan nyata.

Pengoptimalan untuk WordPress

Dari waktu ke waktu, kami memantau, membandingkan, dan menganalisis kinerja blog WordPress kami. Jika situs berjalan lambat, kita perlu tahu alasannya. Berikut adalah beberapa perubahan dasar yang telah kami lakukan dan kami pikir akan secara signifikan meningkatkan kecepatan blog WordPress Anda.

1. Cache Blog Worpress Anda

   WP-Cache adalah sistem caching halaman WordPress yang sangat efisien untuk membuat situs Anda lebih cepat dan responsif. Kami juga merekomendasikan WP Super Cache yang meningkatkan dari plugin yang disebutkan sebelumnya dan juga melakukan pekerjaan dengan baik.

2. Nonaktifkan dan Hapus Plugin yang Tidak Digunakan

   Ketika Anda melihat blog Anda memuat sangat lambat, lihat apakah Anda memiliki banyak plugin yang diinstal. Mereka mungkin pelakunya.

3. Hapus Tag PHP yang tidak perlu

   Jika Anda memperhatikan kode sumber tema Anda, Anda akan menemukan banyak tag seperti ini:

   Mereka dapat cukup banyak diganti dengan konten teks yang tidak menyebabkan memuat ke server. Periksa Michael Martinini 13 Tag untuk dihapus dari WordPress Blo Andag

Bacaan yang Disarankan:

• 3 Cara Termudah untuk Mempercepat WordPressJohn Pozadzides membagikan bagaimana blognya berlayar dengan lancar melalui lonjakan lalu lintas Digg.
• 13 Tips & Trik Kecepatan WordPress Hebat untuk Kinerja MAX Berikut adalah beberapa hal untuk dicoba jika Anda mendapati bahwa situs WordPress Anda tidak berkinerja sebaik mungkin karena lalu lintas tinggi atau masalah tersembunyi yang tidak Anda ketahui.
• 40 Tips Optimasi WordPressKiat pengoptimalan dalam slide. 40 tips dalam 40 menit.

Terakhir tapi bukan yang akhir…

Berikut adalah beberapa layanan dan alat web yang berguna yang memberi Anda perspektif yang lebih luas dan analisis yang lebih baik untuk membantu Anda dalam optimasi web.

• Yahoo! YSlow

  YSlow menganalisis halaman web dan menyarankan cara untuk meningkatkan kinerjanya berdasarkan seperangkat aturan untuk halaman web berkinerja tinggi. Ini memberi Anda ide bagus apa yang perlu dilakukan agar situs web memuat lebih cepat.

  (Diperlukan Firebug)

  

• PageSpeed

  Mirip dengan Yahoo! YSlow, Google Kecepatan Halaman adalah add-on Firebug open-source untuk mengevaluasi kinerja situs web dan cara memperbaikinya. (Diperlukan Firebug)

  

• Alat Pingdom

  Alat Pingdom ambil muatan lengkap situs web Anda termasuk semua objek (gambar, CSS, JavaScripts, RSS, Flash dan bingkai / iframe) dan tunjukkan statistik umum tentang halaman yang dimuat seperti jumlah total objek, total waktu muat, dan ukuran termasuk benda.

  

Bacaan yang disarankan:Berikut ini lebih banyak tips dan alat yang patut untuk dicoba.

• Google Web Optimizer
• 15 Alat untuk Membantu Anda Mengembangkan Halaman Web Lebih Cepat
• 15+ Tips untuk Mempercepat Situs Web Anda, dan Optimalkan Kode Anda!