oleh WILLIE JACKSON · 128 KOMENTAR
Aku akan mengakuinya: I 'm addicted to kecepatan.
Tidak, tidak psychostimulant; Aku sedang berbicara tentang kecepatan website.
Saya tidak sendirian, baik. Google baru-baru ini mengumumkan bahwa mereka menganggap website kecepatan ketika menentukan peringkat mesin pencari.
Oh, apakah saya menyebutkan bahwa situs lambat dapat benar-benar membunuh pendapatan Anda? Check out apa yang ahli di websiteoptimization.com harus katakan tentang topik:
Google menemukan bahwa bergerak dari loading in 0.4 detik untuk loading di 0,9 detik halaman 30-hasil halaman 10-hasil penurunan lalu lintas dan iklan pendapatan sebesar 20% (Linden 2006). Ketika halaman muka Google Maps berkurang dari 100 KB untuk 70-80 KB, lalu lintas naik 10% di minggu pertama, dan tambahan 25% dalam tiga minggu berikut (Farber 2006).
Tes di Amazon mengungkapkan hasil yang sama: setiap 100 ms peningkatan beban waktu dari Amazon.com menurun penjualan sebesar 1%. (Kohavi dan Longbotham 2007).
(sumber)
Hal ini cukup jelas. Semua orang membenci lambat situs web. Pertanyaannya adalah, bagaimana Anda dapat membuat website WordPress Anda lebih cepat? Terus membaca dan aku akan menunjukkan kepada Anda bagaimana Anda dapat mengambil langkah-langkah proaktif menuju mempercepat situs Anda.
Apa yang menentukan kecepatan halaman Website?
Yahoo! YSlow dan Google halaman kecepatan Mozilla Firefox plugin mengevaluasi situs Anda terhadap aturan-aturan yang diterima secara luas performa situs web. Masalahnya adalah, mereka tidak memberitahu Anda apa yang harus dilakukan dengan informasi yang mereka berikan.
Jadi, aku akan memecah kinerja atas rekomendasi dan tunjukkan Anda dapat menerapkannya ke website Anda.
Mari kita lakukan.
Meminimalkan jumlah permintaan HTTP
Mengoptimalkan dan benar menampilkan gambar
Mengecilkan HTML, CSS, dan Javascript
Menggunakan Content Delivery Network
Komponen gzip dan kompres
Memilih atas @ impor
Menempatkan stylesheet di bagian atas
Meletakkan script di bawah
Memanfaatkan browser caching
Menggunakan CSS sprite
1. Meminimalkan jumlah permintaan HTTP
Terjemahan: Batas jumlah file yang dibutuhkan untuk menampilkan situs web Anda
Ketika seseorang mengunjungi situs Anda, file yang sesuai harus dikirim ke browser orang itu. Ini termasuk file CSS, Javascript perpustakaan referensi dan gambar.
Seperti yang diharapkan, setiap file yang Anda gunakan untuk meningkatkan desain Anda akan mengurangi performa. Similary, Plugin WordPress terkenal untuk menyuntikkan kode CSS asing di kepala situs Anda tanpa memberikan Anda pilihan untuk secara manual menambah gaya diperlukan stylesheet Anda.
Takeaway kunci ini: menghilangkan segala sesuatu yang tidak perlu. Jika Anda menggunakan plugin karena Anda seperti, lihatlah bagaimana dampak kode Anda. Waktu buka halaman tambahan mungkin tidak sepadan.
2. Mengoptimalkan dan benar menampilkan gambar
Terjemahan: Membuat gambar sekecil mungkin dan tidak memerlukan browser untuk mengubah ukuran mereka
Tergantung pada format, banyak gambar berisi satu ton asing metadata yang dapat secara drastis meningkatkan ukuran file. Banyak desainer gagal untuk kompres gambar mereka sebelum meng-upload ke web, dan keseluruhan dampak ini dapat dramatis dengan gambar-intensif desain.
Lain dosa kardinal berpengalaman Webmaster adalah untuk meng-upload dan melayani gambar yang jauh lebih besar daripada apa yang diperlukan untuk desain. WordPress adalah enabler malang ini, banyak pemilik situs web pemula meng-upload gambar besar langsung dari kamera digital mereka dan memanfaatkan WordPress gambar Resize fungsi untuk menampilkan sebuah versi yang lebih kecil.
Dengan aplikasi gratis seperti Picnik dan gambar Optimizer kita miliki, ada hanya tidak ada alasan untuk tidak dan mengoptimalkan ukuran! Pengunjung (dan server Anda) akan terima kasih.
3. Mengecilkan HTML, CSS, dan Javascript
Terjemahan: Menghapus semua ruang putih dari kode bila mungkin sebelum melayani pengunjung
Spasi, tab dan tertib struktur yang digunakan dalam kode adalah untuk membuatnya lebih terbaca-manusia. Server dan browser tidak peduli apa kode seperti selama itu sah dan mengeksekusi tanpa kesalahan. Jika Anda ingin file untuk men-download lebih cepat, Anda dapat menghapus spasi ini sebelum melayani kode Anda.
Karena itu akan praktis untuk menghapus spasi dari file yang terus-menerus diedit (tidak seperti Javascript perpustakaan seperti jQuery, yang hampir selalu disajikan minified), kita akan ingin memanfaatkan plugin seperti WP-mengecilkan (baik) atau W3 Total Cache (terbaik) untuk menangani hal ini saat runtime tanpa mempengaruhi file kita perlu mengedit.
Spasi besar untuk web design tapi dalam kode kita? Tidak begitu banyak.
4. Gunakan Content Delivery Network (CDN)
Terjemahan: Menggunakan CDN untuk meringankan beban pada server Anda dan turbocharge performa
CDN adalah performa tinggi jaringan server di seluruh dunia yang mereplikasi aset statis situs dan melayani mereka dengan pengunjung dari POP terdekat.
Apa?
Aku tahu, aku tahu. Kabar baiknya adalah bahwa kita tidak perlu memahami mekanika di belakang jaringan pengiriman isi dalam rangka untuk memahami kekuatan mereka: Anda memiliki tim server mendistribusikan aset Anda statis untuk pengunjung di seluruh dunia. Saya telah menulis posting di membuat WordPress lebih cepat dengan mengintegrasikan CDN jika Anda tertarik untuk membaca lebih lanjut tentang topik.
CDNs adalah salah satu cara yang paling efektif untuk benar-benar turbocharge kecepatan situs kami. Kita tidak bisa mengabaikan daerah lain di optimasi dalam proses, sehingga ini harus diperlakukan sebagai permata mahkota di atas situs indah dioptimalkan.
5. Gzip dan kompres komponen
Terjemahan: Memampatkan file di tingkat server sebelum mengirimnya ke browser
Jika Anda diperintahkan untuk melemparkan sepotong kertas di seberang ruangan sejauh bisa pergi, akan Anda ringan benturan itu atau memeras dengan semua mungkin Anda? Itu benar, Anda akan mendapatkan Hulk Anda Smash.
Prinsip sampel berlaku di sini: kami ingin memungkinkan kita webserver untuk kompres file kita sebelum mengirim mereka ke pengunjung. Kita bisa drop beberapa baris kode dalam file .htaccess kami untuk mencapai hal ini:
#Begin gzip and deflate
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/css application/x-javascript text/plain text/xml image/x-icon
</IfModule>
Kode ini mungkin tampak agak menakutkan, tapi sebenarnya cukup sederhana. Kami hanya memeriksa untuk melihat apakah ada modul mod_deflate Apache dan jika demikian, pemilihan untuk melayani HTML, CSS, Javascript, teks, dan favicon file menggunakan kompresi gzip.
Perhatikan bahwa ini membutuhkan server web Apache dan mod_deflate modul. Untuk mengaktifkan kompresi gzip dengan NGINX, pastikan bahwa baris berikut ada di dalam dari direktif sesuai:
server {
gzip on;
gzip_types text/html text/css application/x-javascript text/plain text/xml image/x-icon;
}save
6. Pilih atas @ impor
Terjemahan: Waspadalah mengisap IE!
Ketika termasuk stylesheet Anda, selalu link ke file alih-alih menggunakan referensi @ impor. IE menangani mereka berbeda dengan memuat mereka seolah-olah referensi di bagian bawah dokumen. [sarkasme] Nice work, Microsoft! [/ sarkasme]
7. Masukkan stylesheet di bagian atas
Terjemahan: Semua antarmuka yang berhubungan dengan stylesheet referensi harus dimasukkan dalamdokumen Anda
Kita pernah, pernah, pernah ingin menampilkan konten unstyled pengunjung-tidak bahkan untuk sepersekian detik. File yang bertanggung jawab untuk penampilan situs kami harus dimuat pertama kali sehingga mereka dapat diterapkan untuk HTML sebagai beban. Masuk akal, kan?
Tidak ada yang lebih.
8. Meletakkan script di bawah
Terjemahan: Semua fungsi yang berhubungan dengan file dapat di-load setelah konten kami dimuat
Ketika kita berpikir melalui cara menyampaikan konten kami untuk pengunjung secepat mungkin dan langkah-langkah berikutnya yang akan membawa pengguna, kami akan menggunakan prioritas berikut:
Mendapatkan konten untuk pengunjung secepat mungkin
Tidak mengizinkan konten unstyled muncul dalam browser (memasukkan CSS)
Memuat file yang dibutuhkan untuk interaksi (tab widget tertentu eksternal API panggilan, dll) terakhir
Pemikiran di balik ini sederhana: pengguna tidak akan berinteraksi dengan isi sebelum mereka dapat melihatnya!
9. Menggunakan browser caching
Perkotaan terjemahan: Di mana cache pada?
Terjemahan standar: Tidak memerlukan browser untuk menurunkan salinan lain dari berkas statis setiap kali
Dengan browser caching, kita secara eksplisit memerintahkan browser untuk menggantung ke file tertentu untuk jangka waktu yang ditentukan. Ketika berkas yang dibutuhkan lagi, browser ini untuk menarik dari cache lokal alih-alih meminta dari server lagi.
Menjalankan sebuah website tanpa caching di tempat membuat banyak arti sebagai berkendara ke toko untuk segelas air setiap kali kau haus. Tidak hanya adalah tidak praktis dan cupet, dibutuhkan lebih banyak pekerjaan!
ExpiresByType direktif digunakan untuk memberitahu browser file ke cache dan berapa lama untuk menggantung ke mereka. Contoh di bawah akan memberitahu browser pengunjung kami untuk menggantung ke HTML, CSS, Javascript, dan gambar dan favicon selama satu jam (3600 detik):
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/html M3600
ExpiresByType text/css M3600
ExpiresByType application/x-javascript M3600
ExpiresByType image/bmp M3600
ExpiresByType image/gif M3600
ExpiresByType image/x-icon M3600
ExpiresByType image/jpeg M3600
</IfModule>Sekali lagi, kode di atas adalah untuk file .htaccess di Apache server. Atur Dulu pengaturan yang sesuai di NGINX akan terlihat seperti ini:
location ~* \.(jpg|png|gif|jpeg|css|js)$ {
expires 1h;
}10. Menggunakan CSS sprite
Terjemahan: Melayani satu gambar yang sangat optimal untuk desain Anda untuk meminimalkan dampak kinerja
CSS sprite adalah gambar yang terdiri dari gambar-gambar lainnya yang digunakan oleh desain Anda sebagai sesuatu dari peta mengandung koordinat semua gambar. Beberapa CSS pintar digunakan untuk menunjukkan bagian yang tepat dari sprite ketika desain Anda di-load.
Ada artikel yang fantastis tentang topik yang tersedia di seluruh web yang menyelam ke dalam mekanika CSS sprite dan yang indah sumber daya untuk menciptakan mereka. SpriteMe adalah sebuah utilitas yang menghasilkan sprite dan kode yang diperlukan untuk membuatnya bekerja. Jika Anda memeriksa kode untuk nav menu di Pearsonified.com, Anda akan melihat contoh yang bagus tentang bagaimana menerapkan sebuah CSS sprite.
Wah! Masih membaca?
Jika demikian, besar! Kau baik di jalan ke situs web jauh lebih cepat. Jika Anda menerapkan bahkan beberapa teknik yang dijelaskan dalam posting ini, Anda akan melihat langsung dan dramatis perbaikan dalam kinerja situs Anda. Hal ini tidak penting bahwa kita tahu bagaimana segala sesuatu bekerja dari database panggilan untuk permintaan HTTP-saya pasti tidak-sangat penting bahwa kami tidak cukup akrab dengan konsep-konsep untuk bekerja ke arah mereka di situs kami.
Bekerja lebih cerdas, bukan lebih keras
Anda bisa menghabiskan beberapa bulan belajar seluk-beluk arsitektur server web, bagaimana browser yang berbeda menerapkan caching, dan bagaimana untuk mengikat semua together…or bisa hanya menginstal dan mengkonfigurasi plugin W3 Total Cache oleh Frederick Townes (CTO dari Mashable).
Aku dapat memberikan rekomendasi tidak lebih tinggi untuk plugin yang berkaitan dengan kinerja daripada yang satu ini. Fitur bisa dengan mudah mengisi posting lain, tapi aku akan memberimu bagian penting: W3TC membantu Anda benar-benar alamat 80% dari rekomendasi yang diuraikan dalam posting ini. Ada pilihan lain padat untuk caching plugins, tetapi W3TC berdiri kepala dan bahu di atas sisanya.
Sumber-sumber yang berguna
Dalam pencarian Anda untuk kecepatan website, Anda mungkin menemukan sumber daya ini membantu:
Pingdom — menguji seberapa cepat situs Anda adalah sebelum dan setelah membuat perubahan
WordPress Caching-perbandingan mendalam caching Plugin WordPress
Working backwards CTO Frederick Townes memberikan keynote di WordCamp Denmark
Screaming Fast WPMU — Dan Collis-Puro menunjukkan bagaimana Harvard secara dramatis meningkatkan kinerja situs web mereka
