Setelah bersama ini akan kami jabarkan secara ringkas bagaimana mempercepat web atau blog dengan metode atau tutorial berikut, jadi simaklah dengan baik dan praktikkan.

Praktik Terbaik untuk Mempercepat Situs Web atau Blog

➾Minimalkan Permintaan HTTP

80 Persen waktu respon pengguna akhir dihabiskan di front-end. Sebagian besar waktu ini digunakan dalam mengunduh semua komponen di halaman: gambar, stylesheet, skrip, Flash, dll. Mengurangi jumlah komponen pada jumlah permintaan HTTP yang diperlukan untuk merender halaman. Ini adalah untuk halaman yang lebih cepat.

Salah satu cara untuk mengurangi jumlah komponen di halaman.

Adalah menyederhanakan desain halaman. Apakah ada cara untuk membangun halaman dengan konten yang lebih kaya sementara juga mencapai waktu respons yang cepat? Berikut adalah beberapa teknik untuk mengurangi jumlah HTTP, sementara masih mendukung desain halaman kaya.

File gabungan adalah cara untuk mengurangi jumlah permintaan HTTP.

Dengan menggunakan skrip tunggal, dan juga untuk semua CSS ke dalam satu stylesheet tunggal. Menggabungkan file lebih menantang daripada skrip dan stylesheet dari satu halaman ke halaman lain, sementara membuat bagian dari proses pelepasan ini meningkatkan respons waktu.

➾Sprite CSS adalah metode yang dilakukan untuk mengurangi jumlah Permintaan gambar. Gabungkan gambar latar belakang Anda menjadi satu gambar dan gunakan CSSbackground-imagedanbackground-positionproperti untuk menampilkan segmen gambar yang diinginkan.

➾Peta gambar gambar menjadi satu gambar. Ukuran keseluruhan hampir sama, tetapi jumlah yang terbatas Permintaan HTTP mempercepat halaman. Peta gambar hanya jika jika gambar bersebelahan di halaman, seperti bilah navigasi. Menentukan koordinat peta foto bisa membosankan dan rawan kesalahan. Menggunakan gambar untuk navigasi juga tidak dapat diakses, jadi tidak disarankan.

➾Gambar sebaris menggunakan data: mengatur URL untuk menanamkan data gambar di halaman yang sebenarnya. Ini dapat meningkatkan ukuran dokumen HTML Anda. Menggabungkan gambar sebaris ke stylesheet (tembolok) Anda adalah cara untuk mengurangi Permintaan HTTP dan pengubahan dimensi halaman Anda. Gambar sebaris belum didukung di semua browser utama.

Mengurangi jumlah Permintaan HTTP di halaman Anda adalah tempat untuk memulai. Ini adalah hal paling penting untuk meningkatkan kinerja bagi pengunjung pertama kali. Seperti yang topik dalam posting blog Tenni Theurer Browser Cache Usage - Terkena! , 40-60% pengunjung harian ke situs Anda datang dengan cache kosong. Membuat halaman Anda dengan cepat untuk para pengunjung pertama kali adalah kunci untuk pengalaman pengguna yang lebih baik.

➾Tambahkan Kedaluwarsa atau Header Kontrol Cache

Ada dua aspek dari peraturan ini:

Desain halaman web semakin kaya dan kaya, yang berarti lebih banyak skrip, stylesheet, gambar, dan Flash di halaman. Jika Anda ingin membuat beberapa Permintaan HTTP, tetapi dengan menggunakan header Expires Anda akan membuat file tersebut dalam cache. Ini kebutuhan HTTP yang tidak perlu pada tampilan halaman berikutnya. Kedaluwarsa header yang paling mudah digunakan dengan gambar, tetapi mereka harus menggunakan semua komponen termasuk skrip, stylesheet, dan komponen Flash

Untuk komponen statis: terapkanisasi "jangan pernah kedaluwarsa" dengan mengatur Expiresheader jauh di masa mendatang. Untuk komponen dinamis: gunakan Cache-Controltajuk yang sesuai untuk membantu peramban dengan Permintaan pencari informasi atau pengunjung.

Perlu diingat, jika Anda menggunakan header Expires masa depan Anda harus mengubah nama file komponen setiap kali komponen berubah. Kami sering membuat langkah ini sebagai bagian dari proses pembuatan: berbagai versi disematkan dalam nama file komponen, misalnya, expers_5.0.7.js.

Masa depan Kedaluwarsa header memengaruhi tampilan halaman hanya setelah pengguna sudah mengunjungi situs kamu. Ini tidak efektif pada jumlah permintaan HTTP pengguna untuk situs kamu untuk pertama kalinya dan browser cache kosong. Oleh karena itu, mengurangi hasil pada kecepatan Anda menabrak halaman Anda dengan cache prima. (A "cache prima" sudah berisi semua komponen di halaman.) jumlah halaman dengan cache prima adalah 75-85%. Dengan menggunakan header Expires jauh di masa mendatang.

➾Perbaiki Rendering Yang MemBlokir di Bagian Paruh Atas

Untuk mengoptimalkan dengan kinerja terbaik ada beberapa Render yang menghalangi dibagian paruh atas, ini berpengaruh untuk keoptimalan kecepatan diatas rata-rata. Pedoman Cara Praktik Terbaik Menghilangkan Render Paruh Atas Yang Memblokir .

➾Komponen Gzip

Waktu yang diperlukan untuk mengirim permintaan HTTP dan respons di seluruh jaringan dapat secara signifikan dengan hasil yang dibuat oleh para insinyur front-end. Memang benar bahwa kecepatan bandwidth pengguna akhir, penyedia layanan Internet, kedekatan dengan titik tukar, dll berada di luar kendali tim pengembangan. Ada variabel lain yang mempengaruhi respons waktu. Kompresi respons waktu respons dengan mengurangi ukuran respon HTTP.

➾Letakkan Stylesheet di bagian Atas

Folder stylesheet ke dokumen <head> membuat laman tampakcepat lebih cepat. Ini karena menempatkan stylesheet di <head> memungkinkan laman dirender secara progresif.

Bowser menampilkan konten apa pun yang ada sesegera mungkin. Ini sangat penting untuk halaman dengan banyak konten dan untuk pengguna dengan koneksi internet lebih lambat. Pentingnya memberikan umpan balik visual kepada pengguna, seperti indikator kemajuan, telah diteliti dan didokumentasikan dengan baik. Dalam kasus kami, halaman HTML adalah indikator kemajuan! Ketika browser menarik halaman tajuk, bilah navigasi, logo di bagian atas, dll. Semuanya bekerja sebagai umpan balik visual bagi pengguna yang menunggu halaman. Ini meningkatkan kemampuan pengguna secara keseluruhan.

Spesifikasi HTML yang jelas menyatakan bahwa stylesheet harus disimpan dalam kepala atau head halaman: "Tidak seperti A, [LINK] mungkin hanya muncul di bagian <head> taua kepala, meskipun mungkin muncul beberapa kali." Tak satu pun dari alternatif, layar putih kosong atau konten flash yang tidak ditata, sepadan dengan risikonya. Solusi optimal adalah Spesifikasi HTML dan memuat stylesheet Anda dalam dokumen kepala atau <head>.


<!ELEMENT LINK - O EMPTY               -- a media-independent link -->
<!ATTLIST LINK

%attrs;                              -- %coreattrs, %i18n, %events --

charset     %Charset;      #IMPLIED  -- char encoding of linked resource --

href        %URI;          #IMPLIED  -- URI for linked resource --

hreflang    %LanguageCode; #IMPLIED  -- language code --

type        %ContentType;  #IMPLIED  -- advisory content type --

rel         %LinkTypes;    #IMPLIED  -- forward link types --

rev         %LinkTypes;    #IMPLIED  -- reverse link types --

media       %MediaDesc;    #IMPLIED  -- for rendering on these media --

>

Letakkan Naskah di Bawah

Dalam beberapa video, tidak mudah memasukkan skrip ke bagian bawah. Jika, misalnya, skrip menggunakan document.writeuntuk memasukkan bagian dari konten halaman, itu tidak dapat memindahkan lebih banyak di halaman. Mungkin juga ada masalah pelingkupan. Dalam banyak kasus, ada cara untuk mengatasi masalah ini.

Masalah yang disebabkan oleh skrip adalah bahwa mereka menghalangi unduhan paralel. Spesifikasi HTTP / 1.1 menunjukkan bahwa tidak lebih dari dua komponen secara paralel per hostname. Jika Anda menayangkan gambar Anda dari beberapa nama host, Anda bisa mendapatkan lebih dari dua unduhan yang terjadi secara paralel. Meskipun script sedang diunduh, browser tidak akan memulai unduhan lainnya, bahkan pada hostname yang berbeda.

➾Menghapus Ekspresi CSS

Ekspresi CSS adalah cara yang ampuh (dan berbahaya) untuk mengatur properti CSS secara dinamis. Mereka didukung di Internet Explorer dimulai dengan versi 5, tetapi tidak lagi dijalankan dengan IE8. Sebagai contoh, warna latar belakang dapat digunakan untuk mengubah setiap jam menggunakan ekspresi CSS:

background-color: expression ((new Date ()). getHours ()% 2? "# B8D4FF": "# F08A00");

Expression metode ini menerima gejala JavaScript. Properti CSS diatur ke hasil evaluasi JavaScript. EkspresiMetode dibatalkan oleh browser lain, Sangat berguna untuk mengatur properti di Internet Explorer diperlukan untuk menciptakan konten yang konsisten di seluruh browseR.

➾Minimalkan JavaScript dan CSS

Minification adalah karakter yang tidak perlu dari kode untuk mengurangi ukurannya. Tingkatkan waktu pemuatan. Ketika kode diperkecil semua komentar, dan karakter spasi putih yang tidak diperlukan (spasi, baris baru, dan tab). Dalam kasus JavaScript, ini meningkatkan kinerja waktu respons karena ukuran file yang diunduh berkurang. Alat yang populer untuk mengecilkan kode JavaScript adalah JSMin

Obfuscation adalah alternatif yang dapat diterapkan ke kode sumber. Ini lebih kompleks dari minification dan dengan begitu lebih mungkin menghasilkan bug sebagai hasil dari langkah kebingungan itu sendiri. Dalam suatu situs web dari AS, minifikasi mencapai jumlah ukuran 21% dibandingkan 25% untuk kebingungan. Meskipun obfuscation memiliki ukuran yang lebih tinggi, menutupi JavaScript kurang berisiko.

Selain itu, skrip dan gaya eksternal, inline <script> dan <style> blok dapat dan juga harus dikecilkan. Jika Anda gzip skrip dan gaya Anda, menguranginya tetap akan mengurangi ukuran hingga 5% atau lebih. Karena penggunaan dan ukuran JavaScript dan CSS meningkat, maka akan dihasilkan dengan kode Anda.

➾Kurangi Jumlah Elemen DOM

Halaman yang berisi lebih banyak byte untuk diunduh dan juga akses DOM yang lebih lambat dalam JavaScript. Ini membuat angka jika Anda mengulang hingga 500 atau 5000 elemen DOM di halaman saat Anda ingin menambahkan acara pengendali, misalnya.

Tambahkan besar elemen DOM dapat menjadi fakta yang ada yang dapat ditingkatkan dengan markup halaman tanpa harus menghapus konten. Apakah Anda menggunakan nested tables untuk pertunjukkan tata letak? Apakah Anda kehilangan lebih banyak <div> untuk menjalankan masalah tata letak? Mungkin ada cara yang lebih baik dan lebih semantik untuk melakukan markup Anda.

Bantuan besar dengan tata letak CSS CSS YUI : grids.css dapat membantu Anda dengan tata letak menyeluruh, fonts.css dan reset.css dapat membantu Anda menghapus format browser default. Ini adalah kesempatan untuk memulai dan berpikir tentang markup Anda, misalnya menggunakan <div> hanya mengumpulkan yang masuk akal, dan bukan karena itu baris baru.

➾Minimalkan Jumlah iframe

Iframes memungkinkan dokumen HTML untuk dimasukkan dalam dokumen induk. Penting untuk memahami cara kerja iframes agar dapat digunakan secara efektif.

➾Tidak ada 404

Permintaan HTTP mahal Berlin membuat Permintaan HTTP dan mencari respons yang tidak berguna (yaitu 404 Tidak Ditemukan) sama sekali tidak diperlukan dan akan membuat pengalaman pengguna tanpa manfaat apa pun.

Beberapa situs memiliki 404 yang bermanfaat "Apakah maksud Anda X?", Yang sangat bagus untuk pengalaman pengguna, tetapi juga membuang sumber daya server (seperti basis data, dll.). Yang sangat buruk adalah kompilasi ke satelit dan eksternal adalah 404. Perbaiki Url 404 Maupun Error . Pertama, unduhan ini akan membelokkan unduhan paralel. Selanjutnya browser dapat membantu menguraikan 404 respons tubuh seolah-olah itu kode JavaScript, dan menemukan sesuatu yang bisa di di dalamnya.

➾Optimalkan Gambar

Membuat gambar untuk halaman web Anda, masih ada beberapa hal yang dapat Anda coba sebelum Anda FTP gambar tersebut ke server web Anda. Membuat format gambar seperti JPEG 2000, JPEG XR, dan WebP biasanya memberikan kompresi yang lebih baik daripada PNG atau JPEG, sehingga download lebih cepat dan konsumsi kuota lebih kecil sehingga membuatnya lebih cepat dalam proses permintaan.

Praktik Terbaik untuk Mempercepat Situs Web atau Blog