Praktik Terbaik Untuk Mempercepat Situs Web Atau Blog

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 membuat laman tampakcepat lebih cepat. Ini karena menempatkan stylesheet di 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 perkembangan! 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 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 . . LINK - O EMPTY -- a media-independent 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 bab bawah. Jika, contohnya, skrip memakai document.writeuntuk memasukkan bagian dari konten halaman, itu tidak mampu memindahkan lebih banyak di halaman. Mungkin juga ada duduk perkara pelingkupan. Dalam banyak perkara, ada cara untuk mengatasi dilema ini. Masalah yang disebabkan oleh skrip yaitu bahwa mereka membatasi unduhan paralel. Spesifikasi HTTP / 1.1 memberikan bahwa tidak lebih dari dua bagian secara paralel per hostname. Jika Anda menayangkan gambar Anda dari beberapa nama host, Anda bisa menerima lebih dari dua unduhan yang terjadi secara paralel. Meskipun script sedang diunduh, browser tidak akan mengawali unduhan lainnya, bahkan pada hostname yang berlainan. ➾Menghapus Ekspresi CSS Ekspresi CSS yaitu cara yang ampuh (dan berbahaya) untuk mengontrol properti CSS secara dinamis. Mereka disokong di Internet Explorer dimulai dengan model 5, namun tidak lagi dikerjakan dengan IE8. Sebagai contoh, warna latar belakang mampu dipakai untuk mengganti setiap jam menggunakan verbal CSS: background-color: expression ((new Date ()). getHours ()% 2? "# B8D4FF": "# F08A00"); Expression sistem ini menerima gejala JavaScript. Properti CSS dikelola ke hasil evaluasi JavaScript. EkspresiMetode dibatalkan oleh browser lain, Sangat berkhasiat untuk mengendalikan properti di Internet Explorer dibutuhkan untuk menciptakan konten yang konsisten di seluruh browseR. ➾Minimalkan JavaScript dan CSS Minification adalah huruf yang tidak butuhdari aba-aba untuk meminimalisir ukurannya. Tingkatkan waktu pemuatan. Ketika arahan diperkecil semua komentar, dan aksara spasi putih yang tidak diharapkan (spasi, baris gres, dan tab). Dalam kasus JavaScript, ini mengembangkan kinerja waktu respons alasannya adalah ukuran file yang diunduh berkurang. Alat yang terkenal untuk mengecilkan isyarat JavaScript adalah JSMin Obfuscation yakni alternatif yang mampu dipraktekkan ke instruksi sumber. Ini lebih kompleks dari minification dan dengan begitu lebih mungkin menciptakan bug sebagai hasil dari langkah kebingungan itu sendiri. Dalam sebuah website dari AS, minifikasi mencapai jumlah ukuran 21% dibandingkan 25% untuk kebingungan. Meskipun obfuscation mempunyai ukuran yang lebih tinggi, menutupi JavaScript kurang berisiko. Selain itu, skrip dan gaya eksternal, inline dan blok dapat dan juga harus dikecilkan. Jika Anda gzip skrip dan gaya Anda, menguranginya tetap akan meminimalisir ukuran sampai 5% atau lebih. Karena penggunaan dan ukuran JavaScript dan CSS meningkat, maka akan dihasilkan dengan arahan 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 kalau Anda mengulang hingga 500 atau 5000 bagian DOM di halaman ketika Anda ingin menambahkan program pengendali, contohnya. Tambahkan besar bagian DOM dapat menjadi fakta yang ada yang mampu ditingkatkan dengan markup halaman tanpa harus menghapus konten. Apakah Anda memakai nested tables untuk pertunjukkan tata letak? Apakah Anda kehilangan lebih banyak untuk melaksanakan problem tata letak? Mungkin ada cara yang lebih baik dan lebih semantik untuk melaksanakan markup Anda. Bantuan besar dengan tata letak CSS CSS YUI : grids.css mampu membantu Anda dengan tata letak menyeluruh, fonts.css dan reset.css mampu membantu Anda menghapus format browser default. Ini yaitu potensi untuk mengawali dan berpikir wacana markup Anda, contohnya memakai hanya mengumpulkan yang masuk nalar, dan bukan karena itu baris gres. ➾Minimalkan Jumlah iframe Iframes memungkinkan dokumen HTML untuk dimasukkan dalam dokumen induk. Penting untuk memahami cara kerja iframes supaya mampu dipakai secara efektif. ➾Tidak ada 404 Permintaan HTTP mahal Berlin menciptakan Permintaan HTTP dan mencari respons yang tidak berguna (ialah 404 Tidak Ditemukan) sama sekali tidak diperlukan dan akan menciptakan pengalaman pengguna tanpa manfaat apa pun. Beberapa situs memiliki 404 yang berguna "Apakah maksud Anda X?", Yang sungguh bagus untuk pengalaman pengguna, namun juga mencampakkan sumber daya server (seperti basis data, dll.). Yang sangat jelek yakni kompilasi ke satelit dan eksternal yakni 404.  Perbaiki Url 404 Maupun Error  . Pertama, unduhan ini akan membelokkan unduhan paralel. Selanjutnya browser mampu membantu menguraikan 404 respons tubuh seperti itu isyarat 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 mirip JPEG 2000, JPEG XR, dan WebP lazimnya memberikan kompresi yang lebih baik ketimbang PNG atau JPEG, sehingga download lebih singkat dan konsumsi kuota lebih kecil sehingga menjadikannya lebih singkat dalam proses usul.
Sumber https://viablogers.blogspot.com