Cara Mempercepat Blogger Dengan dns-prefetch metatag
Bagaimana Cara mempercepat loading blogger AMP maupun NON AMP.
Langkah awal mempercepat loading AMP Blogger maupun Blogger dengan template biasa (mengandung javascript).
Link dns-prefetch metatag merupakan metatags untuk mempercepat loading external source. Dengan kata lain defer loading external sources.
Kali ini saya akan share bagaimana cara mempercepat lagi loading AMP Blogger yang biasanya mengandung banyak <amp-iframe>.
Ga pake lama, cekidot tutorialnya:
1. Buka dashboard Blogger.
2. Klik tab Layout --> klik Edit HTML.
Kemudian, taruh kode dibawah ini dibawah <head> atau diatas </head>.
Bila anda juga menggunakan fonts dari google cdn maka juga tambahkan:
Dan bila anda juga menggunakan Fontawesome.css dari https://netdna.bootstrapcdn.com/font-awesome/[VERSION]/css/font-awesome.css.
Maka juga tambahakan kode dibawah ini:
Bila digabungkan akan seperti ini:
Untuk HTML5 Markup seperti ini:
Bedanya HTML biasa dengan HTML5 cuma href yang di dahulukan.
Selesai. Semoga tulisan saya ini membantu kalian. :) . Jangan lupa share yah...
Incoming Terms: Mempercepat loading blog dengan dns-prefetch | prefetching external script dan css | Mempercepat loading AMP Blogger | Mempercepat loading blog tahap awal | <link rel="dns-prefetch" | Bagaimana cara mempercepat loading blog dengan link metatag | Bagaimana cara mempercepat loading blogger AMP maupun NON AMP.
Langkah awal mempercepat loading AMP Blogger maupun Blogger dengan template biasa (mengandung javascript).
Link dns-prefetch metatag merupakan metatags untuk mempercepat loading external source. Dengan kata lain defer loading external sources.
Kali ini saya akan share bagaimana cara mempercepat lagi loading AMP Blogger yang biasanya mengandung banyak <amp-iframe>.
Ga pake lama, cekidot tutorialnya:
1. Buka dashboard Blogger.
2. Klik tab Layout --> klik Edit HTML.
Kemudian, taruh kode dibawah ini dibawah <head> atau diatas </head>.
<link rel="dns-prefetch" href="https://cdn.ampproject.org"/>
Bila anda juga menggunakan fonts dari google cdn maka juga tambahkan:
<link rel="dns-prefetch" href="https://fonts.googleapis.com"/>
Dan bila anda juga menggunakan Fontawesome.css dari https://netdna.bootstrapcdn.com/font-awesome/[VERSION]/css/font-awesome.css.
Maka juga tambahakan kode dibawah ini:
<link rel="dns-prefetch" href="https://netdna.boostrapcdn.com"/>
Bila digabungkan akan seperti ini:
<link rel="dns-prefetch" href="https://cdn.ampproject.org"/> <link rel="dns-prefetch" href="https://fonts.googleapis.com"/> <link rel="dns-prefetch" href="https://netdna.boostrapcdn.com"/>
Untuk HTML5 Markup seperti ini:
<link href="https://cdn.ampproject.org" rel="dns-prefetch"/>
<link href="https://fonts.googleapis.com" rel="dns-prefetch"/>
<link href="https://netdna.boostrapcdn.com" rel="dns-prefetch"/>
Bedanya HTML biasa dengan HTML5 cuma href yang di dahulukan.
Untuk kalian yang menggunakan template biasa
kalian juga bisa menerapkan teknik diatas cuman ganti saja href source nya dengan source external anda. Malah lebih joss bila kalian juga menerapkan defer load javascript. Baca disini: Bagaimana cara defer javascript.Selesai. Semoga tulisan saya ini membantu kalian. :) . Jangan lupa share yah...
Incoming Terms: Mempercepat loading blog dengan dns-prefetch | prefetching external script dan css | Mempercepat loading AMP Blogger | Mempercepat loading blog tahap awal | <link rel="dns-prefetch" | Bagaimana cara mempercepat loading blog dengan link metatag | Bagaimana cara mempercepat loading blogger AMP maupun NON AMP.
mantap kang
ReplyDeleteane coba dulu ya