Cara Optimalkan Situs Anda Dengan GZIP Compression

 1755 view     28 Desember 2016     Admin    Website 
  #Compress     #Gzip     #Seo     #Tutorial     #Website    

Share:


Cara Optimalkan Situs Anda Dengan GZIP Compression

Kompresi adalah sederhana, cara efektif untuk menghemat bandwidth dan mempercepat situs Anda. Aku ragu-ragu ketika merekomendasikan kompresi gzip ketika mempercepat javascript Anda karena masalah di browser lama.

Tapi itu abad ke-21. Sebagian besar lalu lintas saya berasal dari browser modern, dan terus terang, sebagian besar pengguna saya cukup tech-savvy. Saya tidak ingin memperlambat orang lain turun karena seseorang menenggak bersama pada IE 4.0 pada Windows 95. Google dan Yahoo menggunakan kompresi gzip. Browser modern diperlukan untuk menikmati konten web modern dan kecepatan web modern - sehingga gzip encoding itu. Berikut adalah cara untuk memasangnya.

Tunggu, tunggu, tunggu: Mengapa kita melakukan ini?

Sebelum kita mulai saya harus menjelaskan apa isi encoding. Ketika Anda meminta sebuah file seperti http://www.yahoo.com/index.html, browser Anda berbicara ke web server. Percakapan berlangsung sedikit seperti ini:

HTTP_request.png

  1. Browser: Hei, GET saya /index.html
  2. Server: Ok, biarkan aku melihat apakah index.html berbohong sekitar ...
  3. Server: Menemukannya! Berikut kode respon Anda (200 OK) dan saya mengirimkan file.
  4. Browser: 100KB? Aduh ... menunggu, menunggu ... ok, itu dimuat.
  5. Tentu saja, header yang sebenarnya dan protokol yang jauh lebih formal (memantau mereka dengan Live HTTP Headers jika kamu memang cenderung).

Tapi itu bekerja, dan Anda punya file Anda.

Jadi apa masalahnya?

Nah, sistem bekerja, tapi bukan itu efisien. 100KB banyak teks, dan terus terang, HTML berlebihan. Setiap <html>, <table> dan <div> tag memiliki tag penutup yang hampir sama. Kata-kata yang diulang di seluruh dokumen. Cara apapun yang Anda mengiris itu, HTML (dan sepupunya gemuk nya, XML) tidak ramping.

Dan apa rencananya bila file terlalu besar? Kancingkan!

Jika kita bisa mengirim file .zip ke browser (index.html.zip) bukan index.html tua polos, kita akan menghemat bandwidth dan waktu download. Browser bisa men-download file zip, ekstrak, dan kemudian menunjukkan kepada pengguna, yang dalam suasana hati yang baik karena halaman dimuat dengan cepat. Browser-server percakapan mungkin terlihat seperti ini:

HTTP_request_compressed.png

  1. Browser: Hei, bisa saya GET index.html? Aku akan mengambil versi kompresi jika Anda punya itu.
  2. Server: Mari saya menemukan file ... yep, itu di sini. Dan Anda akan mengambil versi kompresi? Mengagumkan.
  3. Server: Ok, saya telah menemukan index.html (200 OK), saya zipping dan mengirimnya melalui.
  4. Browser: Great! Ini hanya 10KB. Saya akan unzip dan menunjukkan pengguna.
  5. Rumusnya sederhana: file yang lebih kecil = lebih cepat Download = happy pengguna.

Jangan percaya padaku? Bagian HTML dari halaman yahoo rumah pergi dari 101kb ke 15kb setelah kompresi:

yahoo_compression.PNG

(Tidak begitu) rincian berbulu

Bagian tersulit dari pertukaran ini adalah browser dan server mengetahui itu ok untuk mengirim file zip di atas. Perjanjian ini memiliki dua bagian

  • Browser mengirimkan header memberitahu server itu hanya menerima suatu kompresi konten (gzip dan mengempis dua skema kompresi): Terima-Encoding: gzip, mengempis
  • server akan mengirimkan respon jika konten sebenarnya dikompresi: Content-Encoding: gzip

Jika server tidak mengirim respon header konten-encoding, itu berarti file tidak dikompresi (default pada banyak server). "Terima-encoding" header hanya permintaan oleh browser, tidak permintaan. Jika server tidak ingin mengirim kembali konten terkompresi, browser harus membuat hubungannya dengan versi biasa berat.

Menyiapkan server

"Kabar baik" adalah bahwa kita tidak dapat mengendalikan browser. Itu baik mengirimkan Terima-encoding: header gzip, mengempis atau tidak.

Tugas kita adalah untuk mengkonfigurasi server sehingga kembali konten zip jika browser dapat mengatasinya, menghemat bandwidth untuk semua orang (dan memberikan kita petunjuk senang).

Untuk IIS, mengaktifkan kompresi dalam pengaturan.

Di Apache, memungkinkan kompresi output yang cukup mudah. Tambahkan berikut ke file .htaccess:

# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
# Or, compress certain file types by extension:
<files *.html>
SetOutputFilter DEFLATE
</files>

Apache sebenarnya memiliki dua pilihan kompresi:

  • mod_deflate lebih mudah untuk mengatur dan standar.
  • mod_gzip tampaknya lebih kuat: Anda dapat pre-kompres konten.

Mengempis cepat dan bekerja, jadi saya menggunakan itu; menggunakan mod_gzip jika itu mengapung perahu Anda. Dalam kedua kasus, Apache memeriksa apakah browser mengirimkan "Terima-encoding" header dan mengembalikan versi kompresi atau reguler file. Namun, beberapa browser lama mungkin mengalami kesulitan (lebih lanjut di bawah) dan ada arahan khusus Anda dapat menambahkan untuk memperbaiki ini.

Jika Anda tidak dapat mengubah file .htaccess, Anda dapat menggunakan PHP untuk kembali konten terkompresi. Berikan HTML Anda mengajukan ekstensi php dan menambahkan kode ini ke atas:

Dalam PHP:

<?php if (substr_count ($ _ SERVER [ 'HTTP_ACCEPT_ENCODING'], 'gzip')) ob_start ( "ob_gzhandler"); lain ob_start (); ?>

Kami memeriksa "Terima-encoding" header dan kembali versi gzip dari file (jika tidak versi biasa). Ini hampir seperti membangun webserver sendiri (apa yang menyenangkan!). Tapi benar-benar, cobalah untuk menggunakan Apache untuk kompres output jika Anda dapat membantu. Anda tidak ingin monyet dengan file Anda.

Verifikasi Kompresi Anda

Setelah Anda dikonfigurasi server Anda, periksa untuk memastikan Anda benar-benar melayani sampai konten terkompresi.

  • Online: Gunakan tes gzip online untuk memeriksa apakah halaman Anda dikompresi.
  • Dalam browser Anda: di Chrome, membuka Developer Tools> Jaringan Tab (Firefox / IE akan serupa). Refresh halaman Anda, dan klik garis jaringan untuk halaman itu sendiri (yaitu, www.google.com). Header "Content-encoding: gzip" berarti isi dikirim dikompresi.

chrome gzip header

Click the “Use large rows” icon to get more details, including the compressed transfer size and the true content size.

content size

Bersiaplah untuk mengagumi hasil. Homepage instacalc menyusut dari 36K ke 10k, pengurangan 75% dalam ukuran.

Coba Beberapa Contoh

Saya sudah menyiapkan beberapa halaman dan contoh download:

  • index.html - Tidak ada kompresi eksplisit (di server ini, saya menggunakan kompresi secara default).
  • index.htm - Secara eksplisit dikompresi dengan Apache .htaccess menggunakan * .htm sebagai aturan
  • index.php - Secara eksplisit dikompresi menggunakan header PHP

Jangan ragu untuk men-download file, menempatkan mereka pada server Anda dan tweak pengaturan.

Peringatan

httpd.apache.org/docs/2.0/mod/mod_deflate.html#recommended

Menyenangkan seperti itu mungkin muncul, HTTP Compression tidak semua menyenangkan dan permainan. Inilah yang harus diwaspadai:

  • Browser lama: Ya, beberapa browser mungkin masih memiliki masalah dengan konten terkompresi (mereka mengatakan mereka bisa menerimanya, tapi benar-benar mereka tidak bisa). Jika situs Anda benar-benar harus bekerja dengan Netscape 1.0 pada Windows 95, Anda mungkin tidak ingin menggunakan Kompresi HTTP. Apache mod_deflate memiliki beberapa aturan untuk menghindari kompresi untuk browser lama.
  • Sudah-terkompresi konten: Kebanyakan gambar, musik dan video yang sudah dikompresi. Jangan buang waktu mengompresi mereka lagi. Bahkan, Anda mungkin hanya perlu menekan "3 besar" (HTML, CSS dan Javascript).
  • CPU-beban: Mengkompres konten on-the-fly menggunakan waktu CPU dan menghemat bandwidth. Biasanya ini merupakan tradeoff yang besar mengingat kecepatan kompresi. Ada cara untuk pra-kompres konten statis dan mengirim lebih dari versi terkompresi. Ini membutuhkan lebih konfigurasi; bahkan jika itu tidak mungkin, mengompresi keluaran mungkin masih menang bersih. Menggunakan siklus CPU untuk pengalaman pengguna yang lebih cepat adalah layak, mengingat rentang perhatian yang pendek di web.

Mengaktifkan kompresi adalah salah satu cara tercepat untuk meningkatkan kinerja situs Anda. Pergilah, mengaturnya, dan membiarkan pengguna Anda menikmati manfaat.

Sumber : http://betterexplained.com


Share:


Comments