, Archive for 2016

Render javascript yang Memblockir

by Bambang Hermawanto 03.08 0 komentar


Apa yang dimaksud render yang memblokir?
  • Render artinya loading, jadi sesuatu yang memblokir render maksudnya bahwa javascript yang menghalangi halaman dari loading cepat. 
Catatan: Artikel ini adalah tentang hal yang membuat blokir javascript, tidak menjadikan memblokir css (yang merupakan hal yang sama sekali berbeda). cara mengeliminasi css pemblokir render.

Javascript yang memblokir loading/render

Google merekomendasikan 1 untuk menghapus atau menunda javascript yang mengganggu dalam loading konten paruh atas halaman web Anda. Google merekomendasikan 1 untuk dihapus atau menunda javascript yang mengganggu konten paruh atas pada halaman web anda.                                                                                
above and below the fold

Praktik ini telah lama digunakan oleh orang-orang yang menjadi pagespeed, tetapi baru bagi sebagian besar webmaster dan desainer yang sedikit dapat membingungkan, dan bahkan  mungkin tampak mustahil untuk dilakukan. Hal ini tidak hanya mungkin tapi juga diperlukan untuk menjadi warga negara web yang baik dan bahkan jika Anda tidak peduli tentang pengguna melalui koneksi yang lambat,  berarti anda peduli tentang peringkat  di Google. Peringkat Anda di Google akan beresiko jika tidak mengoptimalkan web Anda. Secara khusus, jika Google melihat bahwa halaman web anda tidak memuat dengan baik diperangkat tertentu (ponsel, ipad,  dll) mereka tidak akan menyertakan anda dalam hasil karena Google tidak ingin mengirim pengguna untuk halaman yang lambat atau halaman yang menyebabkan pengguna terlalu lama menunggu konten dimuat.   

Bagaimana untuk mengenali javascript yang  memblokir render

Anda perlu tahu apa halaman anda sedang loading. Ada beberapa cara untuk mengatasi hal ini. Saran saya anda harus lihat apa halaman anda sedang memuat dengan menggunakan alat Pagespeed tool  untuk mereview isu-isu yang ada pada halaman anda secara spesifik file-file yang berlaku dalam perenderan, dapat menggunakan alat
Google pagespeed insights tool. Alat ini akan menceritakan dwngan tepat tetntang file-file yang memblokir halaman Anda.

Cara menghapus javascript yang memblokir render

Pelakunya paling umum adalah javasrip, dan contoh yang benar-benar hebat untuk ini adalah jQuery yang merupakan file javascript yang digunakan pada sebagian besar halaman web. Hal ini sangat mungkin anda menggunakanya ( mengetahui alat). File javascript ini agak besar, sebenarnya mungkin itu sangat baik menjadi file terbesar pada halaman web anda yang sedang loading untuk membuat halaman anda. jQuery adalah file javasceipt populer,yang sering digunakan untuk melakukan hal-hal yang sangat kecij, seperti fade in atau gambar yang keluar misalnya. Tidak biasanya ada alasan untuk  memuat jQuery sebelum anda memuat halaman web anda namun sebagian besar dari halaman  melakukannya. Jika anda menggunakan jQuery untuk merender di paruh bawah maka tidak ada alasan untuk memuatnya sebelum di perlukan.Jika anda  memuat sebelumnya, maka anda tidak mengikuti pedoman Page speed ini dan anda membuat pengguna menunggu.
Untuk memperbaiki ini anda harua mengubah mana panggilan untuk yang jQuery lakukan. Hal ini dilakukan  dalam html halaman web anda. Cara yang sering website saat memanggil jQuery adalah pada dokumen jead seperti yang ditunjukan dibawah ini. 
.
<head>
<meta name=description content="description here."/>
<title>title here</title>
<style>
styles here
</style>
<script src="jquery.js">
</script>
</head>
Atas flip berarti apa yang pengguna melihat pada layar. Layar dekstop atau apapun, layar ponsel, ipad,komputer dekstop atau apapun yang pengguna lihat halaman web anda. 

Panggilan untuk jQuery (file agak besar) dibuat dan harus di-download oleh browser sebelum hal lain ditampilkan pada halaman. Ini buruk. Ini benar-benar benar-benar buruk jika hal yang Anda gunakan jQuery bahkan tidak diperlukan untuk konten paruh atas seperti yang ditunjukkan pada gambar di atas.

Sebuah parsial sering digunakan untuk solusi parsial 

Sering panggilan untuk jQuery akan dihapus dari dokumen head dan pindah ke tempat lain di bagian bawah halaman, karena tidak diperlukan sampai saat itu. Sayangnya hal ini tidak cukup.
<!-- the things you don't need jquery for (most of your page) is here -->
<script src="jquery.js">
</script>
<!-- the thing you need jQuery for is here -->

Solusi Nyata 

Untuk menghapus javascript dari jalur render akan ditunda sampai setelah beban halaman. 

Untuk mengikuti arahan ini anda perlu tahu baik, apa halaman anda memuat dan mengapa memuatnya

Apa pun yang memanggil (call page web anda ,biaya pengguna anda lebih banyak waktu menunggu mereka. Jika Anda tidak tahu apa yang meminta halaman web anda perbuat, Anda harus mulai mengetahui. JQuery adalah contoh yang baik karena sangat umum dan seperti file besar (sekitar 100kb). Skenario umum semua adalah bahwa halaman web kecil yang hanya 10kb memanggil file besar seperti jQuery (yang 10 kali lebih besar dari halaman web itu sendiri) untuk melakukan beberapa tugas biasa seperti fade dalam beberapa kata di halaman. Anda mungkin berpikir "hey kelihatan keren!" ketika Anda melihatnya, tetapi apakah itu cukup tenang untuk membuat pengguna anda menunggu 10 kali lebih banyak waktu untuk melihat halaman anda? efek yang sama persis bisa terjadi dengan css atau javascript yang lebih kecil. Menggunakan jQuery sebagai contoh, tapi bukan berarti itu jelek. Hal yang sama bisa dikatakan bahkan javascript  biasa seperti Google analystic, atau javascript pihak ketiga yang menunjukan widget sosial atau bahkan tombol-tombol facebook, Twitter, yang banyak disukai orang.       

 Mengetahui apa yang halaman Anda gunakan? dan keputusan apa yang layak membuat pengunjung anda menunggu.

0 komentar:

Untuk Melanjutkan Membaca Silahkan Lengkapi Form Ini

Cara Menunda Loading Jvascript

by Bambang Hermawanto 08.41 0 komentar

Bagaimana Cara menunda loading javascript?

Benar-benar menunda javascript berarti pemuatan atau parsing javascript itu hanya dimulai setelah isi halaman telah dimuat (Berarti itu tidak akan mempengaruhi PageSpeed ​​atau jalur render kritis).

  1. Menggunakan "onload" event kita memanggil sebuah external javascript.
  2. External javascript tidak akan loading sebelum konten sudah dimuat.
  3. Kemudian External javascript akan berjalan dan mengisi halaman.
webpage and javascript file

Penjelasan

Menunda javascript adalah salah satu masalah di web yang dapat membuat Anda sakit kepala yang mencoba menemukan solusinya.   
Banyak orang mengatakan "hanya menggunakan defer" atau "hanya menggunakan async" atau yang lain mengatakan "hanya menempatkan javascript di bawah halaman" namun tidak satupun dari mereka memecahkan masalah sebenarnya yang memungkinkan  halaman web sepenuhnya memuat dan kemudian (dan kemudian hanya) memuat javascript eksternal. Mereka juga akan membuat masa lalu bagi anda  dengan " defer  loading javascript". Peringatan yang anda dapatkan dari Google speedpage. Solusi ini akan.

Script untuk memanggil file javascript eksternal.  

Kode ini ditempatkan di html sebelum kode </body> untuk menyoroti file javascript eksternal. 
   
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

Apa yang bekerja disini? 

Kode ini mengatakan tunggu dokumen selesai memuat kemudian  memuat file javascript "defer.js".

Intruksi sepesifiknya:

1. Copy kode diatas.
2. Paste code ke HTML Anda sebelum  </body> tag (dekat file HTML bagian bawah).
3. Ganti "defer.js" Dengan nama file javascript eksternal milik Anda.
4. Pastikan path ke file Anda dengan benar.
Contoh:
jika Anda hanya menempatkan "defer.js", maka file "defer.js" harus dalam folder yang sama dengan file HTML Anda.

Apa yang dapat Anda gunakan kode ini (dan apa yang tidak bisa) 

Kode ini tidak akan memuat file javascript eksternal secara spesifik hingga dikonten lengkap termuat. Oleh sebab itu, tidak harus menempatkan setiap javascript disana, yang diperlukan untuk memuat halaman dengan benar. Anda harus memisahkan javascript menjadi dua kelompok, satu kelompok js yang perlu memuat dan js yang melakukan hal-hal setelah beban halaman (seperti mencari peristiwa klik). Javascript yang bisa menunggu sampai setelah beban halaman harus masuk  ke dalam satu file eksternal call yang di atas. 
Sebagai contoh: Pada halaman ini file yang digunakan untuk menunda google analystic viglink, dan google manambah lencana tambahan di footer. Tidak ada alasan untuk memuat file-file ini untuk membuka halaman awal karena tidak satupun dari mereka yang di perlukan untuk memuat konten paruh atas. Anda mungkin memiliki jenis yang sama dari apa yang ada pada halaman web anda. Halaman anda itu bagaimana, dan Apakah anda membuat pengguna menunggu untuk memuat halaman web anda sebelum menunjukkan konten?    
. 

Mengapa metode lain tidak bisa bekerja?
Metode membuat inline, menempatkan secript dihalaman bawah, menggunakan "defer" atau menggunakan "async" semua tidak mencapai tujuan dengan membiarkan beban halaman pertama kemudian memuat JS dan mereka pasti tidak bekerja secara universal dari lintas browser.    

Ada apa dengan itu semua?

Itu penting karena Google menilai kecepatan halaman sebagai faktor peringkat dan  karena pengguna ingin halaman web loading cepat. Hal ini penting juga untuk seo mobile Anda. Google mengukur halaman sebuah web dari speedfrom pada saat itu disebut, ketika webpage awalnya dimuat. Berarti kita memprioritaskan untuk sebuah acara tentang kecepatan halaman web ketika diklik. Bahwa penilaian Google pada awal buka halaman anda (dan jangan lupa pengguna menunggu saat membuka awal webpage untuk memuat). Google secara aktif mempromosikan dan merekomendasikan juga memprioritaskan konten paruh atas sehingga mendapatkan sumber (js, css, gambar, dll) dari jalur render kritis yang diusahakan betul. Jika itu membuat bahagia, dan itu membuat google bahagia, mungkin harus melakukanya.   panduan optimasi seluler.          

Point Dari Kunci
Prioritas besar harus ditempatkan pada pemberian konten ke pengguna sesegera mungkin. Kami belum melakukan itu dengan cara kita memperlakukan javascript kami. Seorang pengguna tidak perlu menunggu untuk melihat konten mereka karena beberapa script yang cenderung melakukan sesuatu untuk di bawah konten berlipat-lipat. Tidak peduli seberapa dingin footer Anda, benar-benar ada alasan bagi pengguna yang mungkin tidak pernah meggulir ke bawah untuk footer Anda agar memuat javascript yang membuat footer Anda keren.


Anda bisa menggunakan javascript usage tool untuk mengetes sejauh mana javascript anda bekerja di halaman web.

0 komentar:

Untuk Melanjutkan Membaca Silahkan Lengkapi Form Ini

Menggunakan web.config 404 Untuk Pesan Error http kustom pada IIS 7.5

by Bambang Hermawanto 09.35 0 komentar
File web.confiq memungkinkan Anda untuk membuat halaman error http kustom untuk situs web Anda. Kesalahan kustom dapat diatur arau 
diganti secara luas  direktori by direktori pafa situs Sementara beberapa bagian web.confiq mengharuskan direktori diatur sebagai aplikasi, ini bukan salah satu dari mereka. Sebuah web.cinfiq yang sederhana dengan bagian httpErrors dapat ditempatkan dalam direktori apapun, dan direktori TIDAK perlu ditetapkan sebagai aplikasi. 

Apa Kesalahan HTTP?
Error HTTP dikembalikan kepada klien ketika sesuatu berjalan salah pada server. Kesalahan kode status dikembalikan jika file  yang diminta tidak ditemukan (404), halaman web (500), dan karena masalah sementara seperti koneksi database gagal (500). Kesalahan yang paling umum adalah 404(file tidak ditemukan) dan 500 (kesalaha aplikasi) dan 500 (aplikasi). 

404 dan 500 kesalahan biasanya digunakan untuk memberikan pesan ramah kepada pemhguna Anda. 

404 dan 500 kesalahan juga bisa mengarahkan pengguna ke default  (atau) halaman, dan kadang-kadang digunakan untuk memberitahu administrator situs web dari masalah pada situs web. Jika Anda ingin mengkonfigurasi  kesalahan kustom untuk situs Anda, silahkan ikuti petunjuk pada halaman ini. 
400 Kesalahan ( permintaan buruk) 
401 Kesalahan (tidak sah)
403 Kesalahan (dilarang)
404 Kesalahan (tidak ditemukan)
500 Kesalahan (server error internal)   

Bagaimana itu bekerja?
Contih kustom http error. Komen-komen berada dalam <!-- --> dan tidak dibutuhkan.
required.
  • Capture and return specific error types
    <httpErrors>
       <remove statusCode="401" subStatusCode="-1" />
       <remove statusCode="403" subStatusCode="-1" />      
       <remove statusCode="404" subStatusCode="-1" />                
       <remove statusCode="500" subStatusCode="-1" />
          <!-- full url when responsemode is Redirect -->
       <error statusCode="401" path="http://foo.com/default.htm" responseMode="Redirect" />
          <!-- local relative path when responsemode is ExecuteURL -->
       <error statusCode="403" path="/errors/403.htm" responseMode="ExecuteURL" />
       <error statusCode="404" path="/somedir/oops404.htm" responseMode="ExecuteURL" />                
       <error statusCode="500" path="/somedir/500.asp" responseMode="ExecuteURL" />
</httpErrors>

Using Custom Errors
  • Use a text editor to create a file named web.config
  • Save the web.config file with the appropriate content
  • Place the web.config file in the directory that you wish to modify

Detailed web.config content
  • If there isn't an existing web.config in the directory, your new web.config should look something like this
    <?xml version="1.0"?>
<configuration>
   <system.webServer>
      <httpErrors>
        <remove statusCode="401" subStatusCode="-1" />
        <remove statusCode="403" subStatusCode="-1" />      
        <remove statusCode="404" subStatusCode="-1" />                
        <remove statusCode="500" subStatusCode="-1" />
          <!-- full url when responsemode is Redirect -->
        <error statusCode="401" path="http://foo.com/default.htm" responseMode="Redirect" />
          <!-- local relative path when responsemode is ExecuteURL -->
        <error statusCode="403" path="/errors/403.htm" responseMode="ExecuteURL" />
        <error statusCode="404" path="/somedir/oops404.htm" responseMode="ExecuteURL" />                
        <error statusCode="500" path="/somedir/500.asp" responseMode="ExecuteURL" />
      </httpErrors>
      <modules runAllManagedModulesForAllRequests="true"/>
   </system.webServer>
</configuration>
  • Jika ada sebuah web.confiq tanpa suatu seksi webSeIf there is an existing web config, without a <system.webServer> section... Your new web.config should look like this
    <?xml version="1.0"?>
<configuration>
   <system.web>
     .. existing text ..
     .. existing text ..
   </system.web>
   <system.webServer>
      <httpErrors>
        <remove statusCode="401" subStatusCode="-1" />
        <remove statusCode="403" subStatusCode="-1" />      
        <remove statusCode="404" subStatusCode="-1" />                
        <remove statusCode="500" subStatusCode="-1" />
          <!-- full url when responsemode is Redirect -->
        <error statusCode="401" path="http://foo.com/default.htm" responseMode="Redirect" />
          <!-- local relative path when responsemode is ExecuteURL -->
        <error statusCode="403" path="/errors/403.htm" responseMode="ExecuteURL" />
        <error statusCode="404" path="/somedir/oops404.htm" responseMode="ExecuteURL" />                
        <error statusCode="500" path="/somedir/500.asp" responseMode="ExecuteURL" />
      </httpErrors>
      <modules runAllManagedModulesForAllRequests="true"/>
   </system.webServer>
</configuration>
  • Jika ada web.confiq Anda  yang sudah mempunyai sebuah seksi <system web>, tinggal tambahkan ini: 
    <?xml version="1.0"?>
<configuration>
   <system.web>
     .. existing text ..
     .. existing text ..
   </system.web>
   <system.webServer>
      <httpErrors>
        <remove statusCode="401" subStatusCode="-1" />
        <remove statusCode="403" subStatusCode="-1" />      
        <remove statusCode="404" subStatusCode="-1" />                
        <remove statusCode="500" subStatusCode="-1" />
          <!-- full url when responsemode is Redirect -->
        <error statusCode="401" path="http://foo.com/default.htm" responseMode="Redirect" />
          <!-- local relative path when responsemode is ExecuteURL -->
        <error statusCode="403" path="/errors/403.htm" responseMode="ExecuteURL" />
        <error statusCode="404" path="/somedir/oops404.htm" responseMode="ExecuteURL" />                
        <error statusCode="500" path="/somedir/500.asp" responseMode="ExecuteURL" />
      </httpErrors>
      <modules runAllManagedModulesForAllRequests="true"/>
   </system.webServer>
</configuration>


0 komentar:

Untuk Melanjutkan Membaca Silahkan Lengkapi Form Ini

Cara Optimalkan CSS Delivery

by Bambang Hermawanto 18.48 1 komentar

Apa Maksud CSS delivery?

  • Cara di mana CSS digunakan untuk membuat sebuah halaman web
  • Menggunakan file external css, internal css itu memblokir atau sebuah kombinasi dari keduanya. 
CSS bisa digunakan beberapa cara untuk halaman web dan masih bekerja. Karena ada banyak cara untuk menggunakannya terdapat banyak setup CSS yang berbeda. Tidak peduli bagaimana mengatur pada halaman web. CSS Anda harus membantu halaman web Anda membuat lebih cepat bukan memperlambat mereka. 

Satu contoh dari sebuah "optimized CSS delivery"

css files and html
Menyetel Css yang ideal akan tampak seperti berikut: 
  • Tidak lebih dari satu external CSS stylesheet dengan ukuran sehat (kurang dari 75k atau setara)
  • Inline CSS kecil kedalam HTML menggunakan tag style untuk halaman paruh atas.
  • Jangan menggunakan @import call  CSS
  • Jangan ada CSS dalam HTML hal-hal seperti div atau h1 ada dalam elemen css.
Alasan dari setup CSS ini akan menjadi ideal dengan meminimize render(loading) css yang pemblokir  cara mengeliminasi css pemblokir render css. dan halaman akan loading sangat cepat. Jika Anda familiar dengan perbedaan style dari css delivery, kemudian anda dapat menggunakan alat 
css delivery tool untuk mendapatkan sebuah penjelasan bagaimana halaman web atau blogspit menggunakan css.Jiika anda kurang famuliar, jangan panik,ikuti saja postingan blog ini If you are not familiar, don't panic, dan dibawah sebagian penjelasan untuk meringankan kepanikan...

File-file External CSS 

Adalah jalan utama bagi file-file css merupakan jalan yang digunakan oleh halaman web dan sangat mungkin  cara css sedang digunakan. Di bagian head html  ada suatu yang sedang muat terlihat,  seperti ini...  
<link rel="stylesheet" type="text/css" href="http://yoursite.com/main.css" media="screen" title="style (screen)" />
panggilan file CSS Anda disebut eksternal karena petunjuk CSS dalam sebuah file 55arate sep6tree dari HTML Anda. Memiliki file CSS eksternal adalah cara de facto untuk menangani CSS dan memiliki keuntungan dari CSS Anda yang sedang di-cache (ingat) oleh web browser. Di mana masalah yang datang adalah jika Anda memiliki beberapa file-file ini. Sayangnya, hal ini sering terjadi di Wordpress dan jenis-jenis tema. 

Jika Anda mempunyai lebih dari satu file css harus di gabungkan menjadi satu file.

css files
Bila Anda memiliki beberapa file CSS eksternal browser harus men-download masing-masing sebelum dapat menampilkan halaman Anda. Hal ini menyebabkan banyak roundtrips untuk mendapatkan setiap file CSS yang menghasilkan halaman web Anda menjadi lambat untuk memuat. Hal ini dapat dengan mudah diubah dengan menggabungkan semua file CSS ke dalam satu file. 
  • mengajukan. Untuk melihat berapa banyak eksternal CSS file halaman web Anda menggunakan kunjungi di sini
  • untuk mendapatkan petunjuk tentang cara untuk menggabungkan file CSS eksternal kunjungi di sini 

Inline CSS

css files

Inline css adalah  petunjuk css yang disertakan dalam dokumen HTML sendiri. Keuntungan dengan metode ini adalah bahwa tidak ada tambahan file (eksternal) yang harus mengambil sebelum website ini ditampilkan. Keuntungan ini hanya satu kenyataan bagi petunjuk css kecil. Jika file css anda besar itu bukanlah metode yang baik untuk anda. Style inline yang dicapai dengan menempatkan petunjuk dalam  tag style seperti yang ditujukan di bawah ini:  
<style>
CSS goes here
</style>
Inlined CSS kecil benar-benar cara yang dapat mempercepat loading halaman website Anda.

JanganMenggunakan @import dalam file call CSS anda..

@ import of css files

Metode @import yaitu dimana file-file css eksternal di panggil menggunakan command @import, lebih baik membuat link langsung sebagaimana yang sudah di bicarakan diatas. Metode ini menyebabkan file css atau file called lebih lambat untuk memuat satu waktu dalam penggunaan metode ini. Dalam kode tampak seperti ini:

@import url("style.css")
Call-call ini benar membuat sakit dalam kecepatan halaman web dan banyak desainer masih menggunakan cara ini untuk.mengeceknya
  • Lihat halaman web anda menggunakan @import call css apa tidak.di sini
  • Untuk mempelajari tentang metode @import di sini

Jangan Inline elemen-elemen atribut dalam HTML.

in element css

Hal ini sangat umum untuk menempatkan gaya dalam elemen HTML, pada kenyataannya, saya cenderung untuk melakukan hal ini sepanjang waktu. Google PageSpeed ​​pedoman "Optimalkan pengiriman CSS" mengatakan bahwa kita tidak harus melakukan ini lagi. Dikatakan bahwa ini akan menyebabkan browser untuk merespon lebih lambat dan bahwa itu tidak akan menjadi bijaksana untuk memiliki gaya seperti dalam kode kami karena untuk melakukannya adalah melawan Kebijakan Content. Keamanan W3 yang merupakan protokol keamanan yang akan memblokir setiap tingkat elemen gaya secara default. Gaya ini terlihat seperti ini ...

Kebijakan Pengaman Konten  

 <p style="float:left;"> or <div style="color:#fff;">
Saya memiliki banyak kode saya, dan saya harus melakukan banyak pekerjaan untuk menyingkirkan mereka semua. Untuk melihat apakah halaman web Anda memiliki jenis CSS pergi si sini                                                                                       Para Desainer web

Cara menggunakan css pada halaman web sangat ditentukan oleh desainer, bukan pemilik situs web. Jadi seorang desainer membuat indah, baik command pada kode css dan yang telah menempatkanya dalam beberapa file yang berbeda untuk penjelasan. Mereka berpikir, dengan prestasinya, "saya telah melakukan pekerjaan yang indah dan menakjubkan". Ini adalah apa yang mereka  ajarkan.  Sayangnya praktek ini dan lainya berakhir membunuh performa halaman web. Jika css dalam beberapa file, ada beberapa permintaan dibuat sebelum halaman dapat ditampilkan pada browser, memperlambat pageload dan sangat memberatka beban halaman mobile. Semua css harus hanya dalam satu file untuk kinerja terbaik web. Sebagai realisasi untuk mendapatkan ini diluar sana, Anda akan melihat bahwa web desainer akan mulai membuat kode yang membantu pengguna mereka  dapat bekerja secepat mungkin,  namun untuk saat ini..Anda mungkin memiliki css yang menyakitkan dari website Anda. mobile page loads. 

Penutup

Seperti yang Anda lihat ada banyak cara menggunakan css pada halaman web, tapi  intinya adalah  bahawa kita perlu untuk membersihlan kode dan menggunakan pengiriman css yang direkomendasikan untuk memastikan halaman kami memuat secepatn yang mereka bisa.  Rekomendasi tersebut:         Menggabungkan eksternal stylesheet inline css kecil css dalam style tag No @import called untuk css yang mana  appropriateNo css dalam soal HTML seperti  div atau h1s ( dalam  elemen css).  

Rekomendasi:
  • Gabungkan css external stylesheet 
  • Inline css kecil pada tag style.
  • Jangan ada @import panggilan untuk css mana yang tepat
  • Tidak ada css dalam HTML hal-hal seperti div   atau h1 dalam CSS  HTML

1 komentar:

Untuk Melanjutkan Membaca Silahkan Lengkapi Form Ini

Cara Mengeliminasi CSS Pemblokir Render

by Bambang Hermawanto 03.25 0 komentar

Apa maksud render blocking css?

  • Render Memblokir CSS: penundaan halaman web dari yang terlihat dalam manner.
  • Setiap ketepatan waktu salah satu file css Anda menunda halaman Anda dari rendering.css besar Anda, semakin lama halaman yang diperlukan untuk load.
  • file css yang Anda miliki, semakin lama halaman diperlukan untuk memuat.       


Mengapa render blokir cas itu buruk?  


Render css yang memblokir membuat website menjadi lambat.

Tidak peduli bagaimana cara menghasilkan uang dari website ?, Maka lebih cepat berarti lebih banyak uang.

•Adsense didukung situs yang membuat lebih banyak uang, 
•jika iklan yang terlihat   lebih cepat dan lebih lama.
•commerce membuat lebih banyak uang dengan kurang mencart akan ditinggalkan dan memberikan pengalaman pengguna yang lebih baik dan kurang frustasi

Cara menghilangkan Css membuat blokir?
  1. Benar panggilan file css Anda Lessen jumlah file css di path
  2. gunakan keseluruhan css kurangi kritis                                                             Artikel ini akan benar-benar secara mendalam ke masing-masing pilihan ini dan termasuk metode untuk melakukan hal ini sendiri, tips berguna untuk menginstruksikan desainer atau webmaster untuk melakukannya untuk Anda, dan menggambarkan masalah yang cukup di mana Anda memahami setiap solusi.                                               Kami akan mulai dengan bagian yang termudah dari solusi ... Benar memanggil file css Anda seperti yang direkomendasikan oleh Google.  

1. Bagaimana memanggil CSS dengan benar 

CSS bisa dipanggil dengan berbagai cara dari halaman web Anda, dan beberapa cara yang keluar datar salah dapat dilakukan di dunia modern kita, cepat dan mobile. Berikut adalah dua hal yang harus dicari dalam cara memanggil css Anda.


  • Hindari penggunaan @import untuk call file css
  • label CSS benar-benar memnuhi syarat.
Menggunakan @import dan benar berlabel css yang akan membuat masalah pemblokiran, dan mereka masing-masing dengan mudah dipecahkan, mari kita lihat mereka lebih dekat lagi.

Hindari menggunakan @import untuk call css



Masalah: Metode pada call css ini buruk karena itu menmbah waktu dalam memuat file-file css sebelum halaman termuat dengan baik.
Solusinya: Cari @ import calls dan ganti.

Deteksi: Gunakan pagespeed tool. 
Di kolom sebelah kiri salah satu item adalah "Hindari @ CSS impor". Jika Anda memiliki tanda centang hijau, tidak ada @imports ditemukan. Jika ditemukan, akan ada merah "x".

Rincian: impor CSS terlihat seperti ini dan biasanya akan terjadi dekat bagian atas file. 
@import url("style.css")
Daripada call file css menggunakan @import, metode yang lebih baik hanya menjaga css dengan tambahan dalam satu file (copy dan paste css dan diimpor ke dalam file css asli). Jika Anda tidak dapat melakukan itu untuk beberapa alasan, termasuk file-file css dari file html gunakan kode berikut ...

href="style.css">
Yakinkan untuk benar menempatkan  "style.css" di lokasinya dan nama filenya

Label CSS benar Bersyarat 

Masalah: Ketika csshen css dengan benar melabelnya(valid), browser default untuk memuat semua css sebelum render halaman web.
Solusi: File-file CSS call yang benar sehingga browser mengetahui bahwa tidak semua css bersyarat untuk mulai me-render. 
Deteksi: Uji html dan lihat bagaimana css yang berlabel itu ( penjelasan dibawah) 
Rincian:  Sebuah file css bertipe called cirinya seperti dibawah ini: 
<link href="style.css" rel="stylesheet">
Pada kode di atas, itu hanya mengatakan "di sini adalah link" dan "link tersebut untuk css saya".

Setiap css dipanggil dengan cara di atas akan selalu dimuat oleh browser sebelum render apa-apa pada halaman Web Anda.

Sekarang mari kita lihat contoh file css yang tidak harus dimuat sebelum menampilkan halaman, yaitu petunjuk css untuk print ...
<link href="print.css" rel="stylesheet" media="print">
Kode di atas mengatakan "di sini adalah link", "link adalah untuk css saya" dan juga mengatakan "css hanya untuk pencetakan".

Sejak css yang dicap sebagai media = "print", browser modern tahu bahwa file css tidak diperlukan untuk membuat halaman. Akibatnya, browser akan menempatkan prioritas yang lebih rendah ke file css. Ini masih akan men-download itu, tetapi akan melakukannya dengan cara yang tidak memblokir rendering. 

Mari kita lihat situasi kondisional lain, di sini kita memiliki file css yang digunakan saat halaman adalah lebar tertentu:

<link href="other.css" rel="stylesheet" media="(min-width: 40em)">
Browser modern dapat memahami bahwa css ini digunakan dalam beberapa situasi dan tidak digunakan pada orang lain, sehingga browser dapat memilih untuk tidak memuat file css ini sebelum render jika tidak diperlukan.browsers .

2. Menggunakan sedikit file CSS di jalur kritis

Jalur render kritis adalah cara lain untuk mengatakan "hal-hal browser harus dilakukan sebelum menampilkan halaman web Anda".

Jika Anda telah diberi label css Anda seperti yang kita bahas di atas, Anda sudah mulai menghapus file css dari jalur kritis. Ada namun lebih banyak yang bisa kita lakukan.

Hanya untuk memperjelas, kita berbicara tentang file css di sini seperti dalam "main.css" dan "page.css", dll kami secara khusus berbicara tentang file sebenarnya dalam css, daripada kode css ditemukan di dalam file mereka.

Setiap file fisik Anda dapat menghapus akan membuka halaman Anda lebih cepat.

Pada dasarnya ada dua cara untuk menggunakan file css berkurang. 
  • Menggabungkan CSS
  • Inline CSS

Menggabungkan file css 

Masalah: 
Setiap file css halaman Anda menggunakan waktu tambahan untuk memuat halaman web Anda dengan meminta file tambahan untuk dipanggil.

Solusi: Menggabungkan file CSS ke dalam satu file (atau dua tergantung pada seberapa besar css Anda sebenarnya).

Rincian: 
Sebuah halaman web biasanya memiliki satu file CSS besar dan beberapa "mendukung" file CSS. Hal ini terjadi karena berbagai alasan contoh mungkin situs WordPress yang memiliki css desain web Anda dalam satu file CSS yang besar, tapi widget dan plugin yang di tambahkan mungkin memiliki file css kecil yang terkait dengan mereka yang dimuat secara terpisah dari css utama.

Hal ini juga terjadi di website statis karena banyak web designer berpikir bahwa itu adalah baik untuk memiliki file css terpisah untuk bekerja dengan kejelasan dan kemudahan kerja. Sayangnya ini telah menyebabkan masalah kinerja web besar 




Kabar baiknya adalah bahwa meskipun karena sangat umum untuk memiliki beberapa file css terpisah, mungkin untuk memiliki keunggulan kecepatan yang besar atas pesaing Anda dengan memperhatikan masalah ini. Perbedaan antara pemuatan atau dua file css bukan beberapa file css sering dapat mencukur detik atau lebih dari waktu buka halaman Anda.

Bahkan lebih penting daripada menyimpan kwdua, adalah kenyataan bahwa dengan mengurangi kompleksitas css Anda memungkinkan untuk hal-hal lain dalam memuat lebih cepat. Jika Anda membuat uang dari Adsense, iklan Anda akan muncul lebih cepat (karena mereka tidak harus bersaing dengan file css yang dimuat). Jika Anda menginginkan pengalaman terbaik dan tercepat untuk pengguna di toko e-commerce Anda, sekali lagi, kurangi file css akan memungkinkan lebih cepat, pengalaman rak untuk pengguna Anda.

Dengan kata lain, ketika Anda memikirkan membuat PageSpeed ​​Anda lebih cepat, setiap kompleksitas dihapus memungkinkan untuk tidak hanya "x" jumlah waktu yang disimpan, juga memungkinkan unsur-unsur lain dari halaman Anda untuk melakukan dengan sangat baik.

Bagaimana cara menggabungkan css

Lihat menggabungkan external css.

Dengan mengcopy satu file css dan pastekan ke file css lainya. Ketika Anda melakukan itu, anda harus menghapus file call css. 



Pada gambar di atas kita mengambil isi dari file "other.css"  dan file "third.css"  dan menempatkan mereka dalam file "main.css". Dengan melakukan ini, kami pergi dari halaman web yang diperlukan tiga file css untuk memuat ke halaman Web yang hanya membutuhkan satu file css untuk memuat. 

Inline file CSS 

Masalah: 
Masing-masing file css di halaman menggunakn waktu tambahan untuk memuat halaman web , menyertakan sebuah file tambahan untuk call.
.
Solusi: Hapus satu file css dengan menempatkany di html itu sendiri.

Rincian:
Menggunakan tag gaya html, petunjuk css dapat berada dalam file html bukan file css eksternal.

Bagaimana untuk inline CSS

 inline css, Untuk inline CSS, Anda harus menyalin css dari satu file css dan benar paste ke dalam file html Anda (ini hanya bisa dilakukan dengan file css kecil atau file html Anda akan menjadi terlalu besar). Setelah Anda melakukannya, Anda harus menghapus panggilan untuk file CSS.


Pada gambar di atas kita mengambil isi dari file"small.css"  dan menempatkan mereka di dalam file HTML. Dengan melakukan ini, kami akan pergi dari halaman web yang memerlukan dua file css untuk memuat ke halaman Web yang hanya membutuhkan satu file css untuk memuat.

Inline css ditempatkan di kepala dokumen html dengan menggunakan tag style 
<style>
.... your css instructions here .....
</style>

3. Menggunakan lebih sedikit css keseluruhan 

Hal ini sederhana untuk mengatakan "menggunakan lebih sedikit css" tetapi sangat sulit untuk dilakukan.

Ada beberapa alasan mengapa ada begitu banyak css yang tidak terpakai paling dimuat pada situs web.

Tema WordPress yang disesuaikan memiliki css tambahan besar yang tidak requiredFrameworks seperti yayasan atau bootstrap yang digunakan, tapi css tidak disesuaikan dengan Website umum yang dihasilkan, jumlah css tidak khawatir di masa lalu, sehingga desainer membuat pekerjaan mereka lebih mudah dengan menggunakan lebih dari css yang dibutuhkan

Apapun alasannya css Anda adalah besar, Anda masih perlu mencari cara untuk membuatnya lebih kecil dan lebih cerdas. 

Kenyataan

Jika Anda menulis css atau mengendalikan salah satu dari itu, Anda dapat meluangkan untuk menyertakan css yang diperlukan.

Hal ini lebih mungkin namun Anda telah membeli tema atau desain dari orang lain, dan dalam hal ini satu-satunya solusi nyata untuk berbicara dengan desainer yang menciptakan css dan meminta versi lebih ramping.

Jika Anda mempertimbangkan desain baru atau tema, Anda dapat menghemat waktu dan uang dengan mngoptimalkan css delivery. sebagai persyaratan proyek

0 komentar:

Untuk Melanjutkan Membaca Silahkan Lengkapi Form Ini

Menghindari CSS @import

by Bambang Hermawanto 03.07 0 komentar


Apa CSS @impor itu?

Ini adalah metode mengimpor satu file css dari dalam file css lain. Sepertinya ini ...

@import url ("style.css")

Mengapa tidak menggunakannya?

Metode @import mengambil file CSS yamg menciptakan beberapa masalah yang mempengaruhi kecepatan halaman Anda. Masalah terbesarnya adalah bahwa hal itu menyebabkan file untuk memuat berurutan (satu harus menunggu untuk yang lain) bukan secara paralel (pada waktu yang sama). Ini termasuk limbah dan perjalananya berputar-putar dan membuat beban halaman web Anda lebih lambat.

Bagaimana menghindari css @ impor?

Lihat di file HTML dan CSS Anda dan cari panggilan @ impor. Anda juga dapat menggunakan alat pengiriman CSS secara online yang akan mendeteksi mereka.
Sekali lagi, mereka terlihat seperti ini dan biasanya akan menjadi dekat bagian atas file.

@import url ("style.css")

Daripada memanggil file css dengan menggunakan metode impor lebih baik untuk  tambahan menjaga css saja, tambahan hanya dalam satu file (copy dan paste css diimpor ke dalam file css asli). Jika Anda tidak dapat melakukan itu untuk beberapa alasan, termasuk file-file css dari file html menggunakan kode berikut ...

<Link rel="style.css" href = "style.css" type =text/css">

Pastikan untuk mengganti "style.css" dengan lokasi dan nama file CSS Anda.

Periksa semua file CSS Anda

Tip: Gunakan alat CSS untuk mengetahui apakah Anda memiliki @imports pada halaman Anda

Banyak situs memiliki beberapa file CSS (Anda harus mencoba untuk menggabungkan file-file CSS). Jika Anda memiliki lebih dari satu file CSS, memeriksa setiap file untuk impor.

Jika file CSS panggilan melalui metode @ impor, sangat buruk untuk kecepatan halaman. Hal ini menambah langkah-langkah tambahan untuk browser dalam memuat halaman web Anda, menyebabkan browser untuk men-download, mengurai, dan kemudian pergi keluar dan mendapatkan file CSS berikutnya sebelum mulai menampilkan halaman Anda.
Hal ini dapat dihindari dengan menggunakan metode link di atas.

Cara terbaik adalah jika tidak ada @imports digunakan sama sekali.

Lihat: cara optimalkan css 

0 komentar:

Untuk Melanjutkan Membaca Silahkan Lengkapi Form Ini

Inline CSS Kecil

by Bambang Hermawanto 01.47 0 komentar

Apa itu inline CSS?

  • Inline CSS mengacu pada CSS ditemukan dalam sebuah file HTML 
  • Hal ini ditemukan di kepala(head) dokumen antara tag style 
  • inline CSS berarti menempatkan CSS Anda ke dalam file HTML Anda, bukan file CSS eksternal CSS.

Mengapa Harus Inline CSS?

Inline akan mengurangi  jumlah file browser yang harus didownload sebelum  menampilkan halaman web. Jika anda  menggunakan file css eksternal, browser pertama harus memuat file. html, kemudian mendownload file css anda. Download pertama lebih cepat dari yang ke dua. Ketika dilakukan  dengan benar hal itu merupakan bagian penting pada solusi pengiriman css yang dioptimalkan.  


Cara inline css.

Anda hanya copy konten file css eksternal anda dan paste kan diantara style tag di dalam head pada halaman HTML. 
Tampak seperti:  

 <style>
</style>
Hal terpenting yang perlu diingat adalah untuk meletakan info ini seksi html anda. Anda harus juga menggunakan proper HTML style tag. Copy dan paste konten dari css eksternal anda di file style tag.
<style>
body{margin:0;padding:0;background:#FFFFFF;font-family:Arial, Helvetica, sans-serif;font-size:15px;color:#555;}
h1, h2, h3{margin:0;padding:0;font-weight:normal;color:#555;}
h1{font-size:3.5em;}
h2{font-size:2.4em;}
h3{font-size:1.6em;}
p, ul, ol{margin-top:0;line-height:180%;}
a{text-decoration:underline;color:#FF2929;}
</style>
Menempatkan css anda ke bagian kepala HTML akan menyimpan web browser round trip ke server  karena anda tidak lagi meminta file eksternal terpisah untuk browser muat, melihat css anda. Hal ini memungkinkan kurang membuat pemblokiran css  dan pageload kurang cepat.Dan CSS pro ke bagian kepala HTML Anda akan menyimpan web browser round trip ke server, karena Anda tidak lagi meminta file eksternal terpisah dengan browser untuk memuat dan melihat CSS Anda.

Hal ini memungkinkan kurang membuat pemblokiran CSS dan pageloads lebih cepat.  

Pros and cons

Sementara ini tidak menyimpan round trip ke servser (baik) itu juga berarti bahwa file css anda tidak akan cache(buruk)  Bila anda menggunakan file css eksternal seluruh file dicache (ingat) oleh browser sehingga tidak harus mengambil langkah yang sama berulang saat pengguna masuk ke halaman lain di situs web anda. Ketika anda inline css, ini tidak terjadi dan css dibaca serta ditindak lanjuti lagi letika pengunjung masuk ke halaman lain di situs web anda. Ini tidak masalah jika css anda kecil dan sederhana. Jika css anda besar dan kompleks  karena mereka cenderung ke situ, maka anda mungkin ingin mempertimbangkan bahwa caching css anda adalah satu pilihan yang lebih baik. 
Banyak orang inline css dari homepage atau arahan halaman mereka yang uharus memuat super cepat, efektif dan kemudian menggunakan css eksternal untuk sisa situsnya.
Google menyarankan 1 inlining memblokir css..
"Untuk performa terbaik,anda mungkin ingimempertimbangkan inlining css kritis ke dalam dokumen HTML. Ini menghilangkan roundtrip tambahan di jalur kritis dan jika dilakukan dengan benar maka dapat digunakan untuk memberi performa baik"  Satu jemputan panjan "panjang jalur kritis dimana hanya HTML adalah pemblokiran sumber daya".
Gunakanlah alat pengiriman css yang akan menjelaskan bagaimana css yang sigunakan oleh haman tertentu. 

0 komentar:

Untuk Melanjutkan Membaca Silahkan Lengkapi Form Ini

Langganan: Postingan (Atom)