Panduan Ultimate Untuk Pengoptimuman Web (Tips & Amalan Terbaik)

Pengoptimuman web adalah bahagian penting dalam pembangunan dan penyelenggaraan web tetapi juga sesuatu yang sering diabaikan oleh webmaster. Cukup fikirkan wang yang boleh anda simpan, dan bagaimana ia boleh membantu meningkatkan pembaca dan trafik anda apabila ia dilakukan dengan betul.

Sekiranya anda belum melakukan pengoptimuman ke tapak web anda (atau blog) setakat ini atau hanya ingin tahu bagaimana ia boleh membantu mempercepatkan laman web anda, sila lihat senarai tip pengoptimuman yang telah kami buat bersama.

Kami telah membahagikan perkara ke dalam 3 bahagian berasingan untuk kebolehbacaan yang lebih baik - masing-masing pengoptimuman sampingan pelayan, pengoptimuman aset (yang termasuk komponen web seperti CSS, Javascript, imej, dan lain-lain) dan platform, di mana kami akan memberi tumpuan Pengoptimuman WordPress. Pada bahagian terakhir, kami membuang beberapa pautan yang kami anggap berguna. Senarai penuh selepas melompat.

Pengoptimuman: Bahagian pelayan

1. Pilih Host Web yang layak

   Akaun hosting web anda tidak mempunyai hubungan langsung dengan pengoptimuman yang akan anda lakukan tetapi kami menganggap memilih akaun hosting web yang betul begitu penting kami memutuskan untuk membawanya ke perhatian anda terlebih dahulu. Hosting akaun adalah asas laman web / blog anda di mana ia keselamatan, akses (cPanel, FTP, SSH), kestabilan pelayan, harga dan pelanggan menyokong semua memainkan peranan penting. Anda perlu pastikan anda berada dalam tangan yang baik.

   Bacaan yang disyorkan: Bagaimana Pilih Web Host oleh wikiHow adalah artikel hebat yang memberikan anda langkah-langkah dan tips yang perlu anda ketahui sebelum membeli apa-apa akaun hosting web.

2. Aset Hos

   Apabila kita menyebut aset, kami bermaksud komponen web seperti imej dan skrip statik yang tidak memerlukan pemprosesan sisi pelayan. Ini termasuk apa-apa grafik web, imej, Javascript, Cascading Style Sheets (CSS), dan lain-lain. Hosting aset secara berasingan bukan satu kemestian, tetapi kami telah melihat hasil yang luar biasa dari segi kestabilan server dengan pelaksanaan ini ketika blog sedang mengalami spike lalu lintas.

   Bacaan yang disyorkan: Memaksimumkan Muat Turun Selari di Carpool Lane.

3. Mampatan dengan GZip

   Ringkasnya, kandungan bergerak dari sisi pelayan ke sisi klien (vice versa) apabila permintaan HTTP dibuat. Memampatkan kandungan untuk menghantar sangat mengurangkan masa yang diperlukan untuk memproses setiap permintaan.

   GZip adalah salah satu cara terbaik untuk melakukan ini dan pelbagai mengikut jenis pelayan yang anda gunakan. Contohnya, Apache 1.3 menggunakan mod_zip, Apache 2.x menggunakan mod_deflate dan inilah cara anda melakukannya Nginx. Berikut adalah beberapa artikel yang sangat bagus untuk membiasakan diri dengan pemampatan sampingan pelayan:

   • Mempercepat laman web dengan membolehkan pemampatan fail Apache
   • Paparkan Output Web Menggunakan mod_gzip dan Apache
   • Cara Mengoptimumkan Tapak Anda Dengan Pemampatan GZIP
   • Pemampatan sisi pelayan untuk ASP

4. Kurangkan Pengalihan

   Webmaster melakukan redirect URL (sama ada ia Javascript atau pengubah META) sepanjang masa. Kadang-kadang tujuannya adalah untuk mengarahkan pengguna dari laman lama ke yang baru, atau hanya membimbing pengguna ke laman yang betul. Setiap peralihan membuat permintaan HTTP tambahan dan RTT (waktu bulat). Lebih banyak pengalihan yang anda miliki, pengguna yang lebih perlahan akan sampai ke halaman tujuan.

   Bacaan yang disyorkan: Elakkan Pengalihan oleh Google Code memberikan anda gambaran yang baik tentang perkara itu. Artikel ini juga menyarankan beberapa cara praktikal untuk meminimumkan pengalihan untuk meningkatkan kelajuan penyediaan.

5. Kurangkan DNS Lookups

   Menurut Yahoo! Blog Rangkaian Pembangun, dibutuhkan sekitar 20-120 milisaat untuk DNS (Domain Name System) untuk menyelesaikan alamat IP untuk nama host atau nama domain yang diberikan dan penyemak imbas tidak dapat melakukan apa pun hingga proses selesai dengan benar.

   Pengarang Steve Souders mencadangkan bahawa memisahkan komponen ini merentas sekurang-kurangnya dua tetapi tidak lebih daripada empat nama host yang mengurangkan carian DNS dan membenarkan muat turun lanjutan darjah tinggi. Baca lebih lanjut pada artikel itu.

Pengoptimuman: Aset (CSS, Javascript, Imej)

1. Gabung Multiple Javascripts menjadi Satu

   Rakyat di rakaz.nl berkongsi bagaimana anda boleh menggabungkan pelbagai 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 

   Ke satu fail dengan menukar URL ke:

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

   dengan memanipulasi .htaccess dan menggunakan PHP. Tekan di sini untuk membaca lebih lanjut.

2. Mampat Javascript & CSS

   Minify adalah aplikasi PHP5 yang boleh menggabungkan pelbagai fail CSS dan Javascript, memampatkan kandungan mereka (iaitu penyingkiran ruang kosong / komen yang tidak perlu), dan menyampaikan hasilnya dengan pengekodan HTTP (gzip / deflate) dan pengepala yang membolehkan caching pihak klien yang optimum.

   

   Memampatkannya secara dalam talian!Terdapat juga beberapa perkhidmatan web yang membolehkan anda secara manual memampatkan Javascripts dan fail CSS anda secara dalam talian. Berikut adalah sedikit yang kita tahu:

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

3. Menyesuaikan Tamat Tempoh / Caching

   Kredit: httpwatch

   Dengan menggunakan header Expiry yang disesuaikan, komponen web anda seperti imej, fail statik, CSS, Javascript melangkau permintaan HTTP yang tidak perlu apabila pengguna yang sama memuatkan semula halaman untuk kali kedua. Ia mengurangkan lebar jalur yang diperlukan dan definetely membantu dalam melayani halaman dengan lebih cepat.

   Bacaan yang disyorkan:

   • Yahoo! Blog Rangkaian Pembangun - Tambah Header Tamat Tempoh
   • Bagaimana Untuk Menambah Pengepalan Tamat Baik kepada Imej di Apache 1.3
   • Caching HTTP
   • Tutorial Caching untuk Penulis Web dan Webmaster

4. Aset Berat Off-Aset

   Dengan pemuatan luar, kami bermaksud memisahkan Javascripts, imej, CSS dan fail statik dari pelayan utama di mana laman web dihoskan dan meletakkannya pada pelayan lain atau bergantung pada perkhidmatan web yang lain. Kami telah melihat peningkatan yang ketara di sini Hongkiat oleh aset pemunggah ke perkhidmatan web lain yang tersedia, meninggalkan pelayan untuk melakukan pemprosesan PHP. Berikut adalah beberapa cadangan perkhidmatan dalam talian untuk dimuatkan:

   • Imej: Flickr, Smugmug, Tuan rumah berbayar *
   • Javascripts: Google Ajax Library, Google App Engine, Hentian Dibayar *
   • Borang Webs: WuFoo, FormStack
   • RSS: Google Feedburner
   • Ukur dan Undian: SurveyMonkey, PollDaddy

   * Tuan rumah berbayar - Perkhidmatan berbayar sentiasa mempunyai kebolehpercayaan dan kestabilan yang lebih baik. Jika laman web anda sentiasa meminta aset, anda perlu memastikan ia berada dalam keadaan baik. Kami mengesyorkan Amazon S3 dan Cloud Front.

5. Mengendalikan Imej Web

   Imej adalah bahagian penting laman web anda. Walau bagaimanapun jika mereka tidak mengoptimumkan dengan betul, mereka boleh menjadi beban dan akhirnya menggunakan lebar jalur yang tidak dapat diduga pada setiap hari. Berikut adalah beberapa amalan terbaik untuk mengoptimumkan imej anda:

   • Mengoptimumkan Imej PNGOrang-orang di Majalah Smashing menerangkan beberapa teknik pintar yang boleh membantu anda mengoptimumkan imej PNG anda.
   • Mengoptimumkan untuk Web - Perkara yang anda perlu ketahui (format) Ketahui lebih lanjut mengenai Jpeg, GIF, PNG dan cara anda harus menyimpan imej anda untuk web.
   • Jangan Skala ImejSentiasa amalkan memasukkan lebar dan ketinggian untuk setiap imej. Juga jangan menurunkan imej hanya kerana anda memerlukan versi yang lebih kecil di web. Sebagai contoh: Jangan memaksa skala 200 × 200 px kepada 50 × 50 px untuk laman web anda dengan mengubahnya lebar dan ketinggian. Dapatkan 50x50 px sebaliknya.

   Mengoptimumkan dengan Perkhidmatan dan Alat Web. Berita baiknya ialah, anda tidak perlu menjadi pakar Photoshop untuk mengoptimumkan imej anda. Terdapat banyak perkhidmatan dan alat web untuk membantu anda membuat kerja.

   • Smush.itMungkin salah satu alat dalam talian yang paling berkesan untuk mengoptimumkan imej. Terdapat juga plugin WordPress untuknya!
   • JPEG & PNG StripperAlat Windows untuk melucutkan / membersihkan / mengeluarkan metadata yang tidak perlu (sampah) dari fail JPG / JPEG / JFIF & PNG.
   • Pengoptimum Imej Dalam TalianMemudahkan anda mengoptimumkan gif anda, gif animasi, jpg, dan pngs, supaya mereka memuat secepat yang mungkin di laman web anda, oleh Drive Dinamik
   • SuperGIFMudah-mudahan membuat semua imej dan animasi GIF anda lebih kecil.
   • Ini lebih lagi.

6. Mengendalikan CSS

   Laman web moden menggunakan CSS sebagai asas gaya, serta rupa dan rasa. Bukan sahaja CSS memberikan kelenturan yang besar kepada perubahan, ia juga kurang dari segi kod yang diperlukan. Walau bagaimanapun, jika mereka dikodkan dengan teruk, ia boleh menjadi benteng. Berikut adalah beberapa senarai semak, atau sebaliknya panduan kepada anda memastikan CSS anda dioptimumkan dengan betul:

   • Menjaga Kanak-kanak Elemen Anda dalam Talian dengan Anak-anakBagaimana untuk menjaga markup anda bersih dengan CSS Selectors.
   • Pastikan CSS pendekApabila mereka memberi gaya yang sama, kod itu lebih baik lebih pendek. Inilah a Panduan ringkas Shorthand anda mungkin perlu.
   • Gunakan CSS SpriteTeknik Sprite CSS mengurangkan permintaan HTTP setiap kali halaman dimuatkan dengan menggabungkan beberapa (atau semua) imej bersama-sama pada fail imej tunggal dan mengawal output dengan CSS kedudukan latar belakang atribut. Berikut adalah beberapa panduan dan teknik yang berguna untuk mencipta CSS Sprites:
     • Penjana Sprite CSS dalam talian
     • Generator Sprites Terbaik Dalam Talian dan Luar Talian
   • Menggunakan setiap perisytiharan sekali sahajaApabila ingin mengoptimumkan fail CSS anda, salah satu langkah paling berkesan yang anda boleh gunakan adalah menggunakan setiap pengisytiharan sekali sahaja.
   • Kurangkan jumlah fail CSSSebabnya mudah, lebih banyak fail CSS anda mempunyai lebih banyak permintaan HTTP yang perlu dibuat apabila halaman web diminta. Sebagai contoh, bukannya mempunyai beberapa fail CSS seperti yang berikut:

     Anda boleh menggabungkannya ke dalam satu CSS tunggal:

   Bacaan yang disyorkan:

   • Alat Berguna Untuk Semak, Bersih & Optimumkan Fail CSS AndaBeberapa alat berguna yang boleh anda gunakan untuk mengoptimumkan kod CSS anda, walaupun anda tidak mempunyai pengetahuan tentang pengekodan CSS.
   • 7 Prinsip Kod CSS Bersih Dan DioptimumkanPengoptimuman bukan sekadar meminimumkan saiz fail - ia juga tentang menjadi teratur, bebas berantakan, dan cekap.
   • Amalan Terbaik untuk mengoptimumkan CSSPertimbangkan artikel ini lebih seperti latihan akademik daripada tips pengoptimuman kehidupan sebenar.

Pengoptimuman untuk WordPress

Dari semasa ke semasa, kami memantau, menanda aras dan menganalisis prestasi blog WordPress kami. Sekiranya laman web berjalan lambat, kita perlu tahu mengapa. Berikut adalah beberapa perubahan dasar yang telah kami lakukan dan kami menganggap akan meningkatkan kelajuan blog WordPress anda.

1. Cache Blog Worpress Anda

   WP-Cache adalah sistem caching halaman Wordpress yang sangat berkesan untuk menjadikan laman web anda lebih cepat dan responsif. Kami juga mengesyorkan WP Super Cache yang meningkatkan dari plugin yang disebut tadi dan juga melakukan kerja yang hebat.

2. Nyahaktifkan dan Padam Plugin yang tidak digunakan

   Apabila anda melihat blog anda sedang memuat lambat yang nyata, lihat jika anda mempunyai banyak plugin yang dipasang. Mereka mungkin menjadi penyebabnya.

3. Keluarkan Tag PHP yang tidak diperlukan

   Jika anda melihat kod sumber tema anda, anda akan mendapati banyak tag seperti ini:

   Mereka boleh digantikan dengan kandungan teks yang tidak menyebabkan beban ke pelayan. Semak Michael Martin's 13 Tag untuk memadam dari Blo WordPress andag

Bacaan yang disyorkan:

• 3 Cara termudah untuk Mempercepat WordPressJohn Pozadzides berkongsi bagaimana blognya berjalan lancar menerusi spek lalu lintas Digg.
• 13 Tips & Trik Kelebihan WordPress untuk Prestasi MAX Berikut adalah beberapa perkara yang perlu dicuba jika anda mendapati bahawa tapak WordPress anda tidak berfungsi dan mungkin disebabkan oleh lalu lintas tinggi atau isu tersembunyi yang anda tidak tahu tentang.
• 40 Tips Pengoptimuman WordPressPetua pengoptimuman di dalam slaid. 40 petua dalam 40 minit.

Terakhir tetapi tidak ...

Berikut adalah beberapa perkhidmatan dan alat web yang berguna yang memberi anda perspektif yang lebih luas dan analisa yang lebih baik untuk membantu anda dalam pengoptimuman web.

• Yahoo! YSlow

  YSlow menganalisis laman web dan mencadangkan cara untuk meningkatkan prestasi mereka berdasarkan satu set peraturan untuk halaman web berprestasi tinggi. Ia memberikan anda idea yang baik apa yang perlu dilakukan agar tapak web dapat dimuat dengan lebih cepat.

  (Firebug diperlukan)

  

• PageSpeed

  Sama seperti Yahoo! YSlow, Google Kelajuan Halaman adalah add-on Firebug sumber terbuka untuk menilai persembahan laman web dan bagaimana untuk memperbaikinya. (Firebug diperlukan)

  

• Alat Pingdom

  Alat Pingdom Ambil beban lengkap dari tapak web anda termasuk semua objek (imej, CSS, JavaScript, RSS, Flash dan bingkai / iframes) dan menunjukkan statistik umum tentang halaman yang dimuatkan seperti jumlah objek, jumlah masa beban dan saiz termasuk semua objek.

  

Bacaan yang disyorkan:Berikut ialah beberapa petua dan alat yang perlu diperiksa.

• Pengoptimal Web Google
• 15 Alat untuk Membantu Anda Membangunkan Laman Web Lebih Pantas
• Tips 15+ untuk Mempercepat Laman Web Anda, dan Optimalkan Kod Anda!