Cara Untuk Mengoptimalkan Halaman Blog Dengan Link rel preload

Cara mengoptimalkan Website dengan Real Preload secara simple kode ≪Link rel=”preload”> ini adalah berkenaan cara memberitahu browser untuk berisi lebih cepat halaman atau sumber energi berbasis script tanpa penundaan.

Cara Mengoptimalkan Halaman Dengan Link rel=”preload” Dengan kenakan ≪Link rel=”preload”> pada struktur template blog kami.

Kini kami memberitahu kepada browser bahwa sumber energi halaman itu amat signifikan dan memerintahkan untuk langsung memuatnya dengan cepat.

Sumber energi yang dimuat lewat ≪Link rel=”preload”> akan disimpan secara otomatis pada browser agar telah ada ketika dibutuhkan pas peng-render-an halaman.

Dengan begitu halaman sanggup ditampilkan lebih cepat.

Apa tersebut Link rel Preload?Preload adalah baku website baru yang menawarkan kontrol lebih pada bagaimana sumber energi tertentu diambil untuk melakukannavigasi. Ini adalah versi terbaru berasal dari subresource prefetching yang telah ditinggalkan pada Januari 2016.

Arahan ini bisa didefinisikan di dalam elemen misalnya sebagai . Umumnya yang paling baik adalah jalankan pramuat sumber energi paling signifikan layaknya gambar, Css, Javascript, dan arsip fontp reload berbeda berasal dari prefetch gara-gara fokusnya pada navigasi dan menjemput sumber energi dengan prioritas tinggi.

Prefetch berfokus pada mengambil sumber kekuatan untuk navigasi berikutnya yang merupakan prioritas rendah. Berarti juga untuk dicatat bahwa preload tidak memblokir acara onload pada ventilasi baru.

bisa saja akan ada tak terhitung orang yang bertanya, “Bukankah Halaman AMP udah cepat, apakan masih memerlukan rel=”preload” ini?”ya memnag betul, bahwa halaman AMP tersebut telah sangat cepat “Jika” halaman AMP diakses berasal dari hasil pencarian mobile dengan dukungan Google cache. Tapi, bukankah tidak seluruh pengunjung akan berkunjung berasal dari halaman pencarian mobile mereka juga akan mampu berasal dari hasil pencarian desktop (Komputer).

Para pengunjung yang berkunjung segera ke website pasti saja tidak akan dilayani oleh Google cache. Hal inilah yang sebabkan halaman AMP masih kudu untuk dioptimalkan juga, salah satunya dengan kenakan kode ≪Link rel=”preload”>ini. Dan untuk  kode ≪Link rel=”preload”> ini tidak cuman untuk halaman dengan struktur AMP saja, namun berlaku juga untuk halaman NON AMP juga.

Cara Mengoptimalkan Halaman Blog Dengan Link rel preloadcara Mengoptimalkan halaman dengan kode Link Rel Preloadsilahkan kamu simak contoh dibawah ini. Letakkan ≪Link rel=”preload”> ini pada bagian ≪Head≫ sehabis meta viewport. Layaknya contoh berikut untuk halaman Amp.≪!Doctype html>
≪Html amp=”amp” lang=”en”>
≪Head≫
≪Meta charset=”utf-8″/>
≪Meta name=”viewport” content=”width=device-width,minimum-scale=1″/>
≪Meta name=”description” content=”this is the AMP Boilerplate.”/≫
≪Link rel=”preload” as=”script” href=”https://cdn.ampproject.org/v0.js”/>
≪Link rel=”preconnect dns-prefetch” href=”https://fonts.gstatic.com/” crossorigin=””/>
≪Script async src=”https://cdn.ampproject.org/v0.js”></script>
≪!– Import other AMP Extensions here –≫
≪Type amp-custom>
/* Add your styles here */
≪/Model≫
≪Link href=”https://fonts.googleapis.com/css?family=inconsolata” rel=”stylesheet”/>
≪Tipe amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -Amp-Start{From{Visibility:Hidden}To{Visibility:Visible.Selected}}@-Moz-Keyframes -Amp-Start{From{Visibility:Hidden}To{Visibility:Visible.Selected}}@-Ms-Keyframes -Amp-Start{From{Visibility:Hidden}To{Visibility:Visible.Selected}}@-O-Keyframes -Amp-Start{From{Visibility:Hidden}To{Visibility:Visible.Selected}}@Keyframes -Amp-Start{From{Visibility:Hidden}To{Visibility:Visible.Selected}}≪/Model≫≪Noscript≫≪Type amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</type></noscript>
≪Link rel=”canonical” href=”.”/>
≪Title≫My AMP Page≪/Title≫
≪/Head≫
≪Body≫
≪H1≫Hello World≪/H1≫
≪/Body≫
≪/Html≫
JS primer AMP v0.js kudu dimuat lebih awal dengan kode dibawah ini
≪Link rel=”preload” as=”script” href=”https://cdn.ampproject.org/v0.js”/>
Jika Kamu memakai Google Font pada web site kamu maka tambahkan ini
≪Link rel=”preconnect dns-prefetch” href=”https://fonts.gstatic.com/” crossorigin=””/>
Jika website Kamu memakai gambar layaknya thumbnail di atas postingan atau gambar hero di bawah header, atau gambar background blog, atau gambar logo blog maka tambahkan ini

≪Link rel=”preload” as=”image” href=”url Image”/≫

Jika blog NON AMP maka Kamu kenakan Jquery Library, maka tambahkan dengan ≪Link rel=”preload”> layaknya JS primer AMP di atas layaknya berikut sebagai contoh.

≪Link rel=”preload” as=”script” href=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”/>
Keperluan tiap tiap blog memang terkadang berbeda-beda, menjadi silahkan sesuaikan dengan keperluan blog Kamu untuk tiap tiap JS yang digunakan.

Please rate this

About Galih semar

Leave a Reply

Your email address will not be published. Required fields are marked *