Kamis, 06 Desember 2018

Cara Mempercepat Loading Website Anda Sampai 85% Memakai Amp


Cara Mempercepat Loading Website – Kita semua mempunyai pengalaman memuat situs sumber daya intensif di jaringan tambal sulam. Yang benar adalah, halaman butuh waktu selama untuk memuat! Ini telah menjadi dilema besar bagi para developer web terutama jikalau negara target situs web tersebut mempunyai kecepatan internet keseluruhan yang lambat. Olehnya berikut ulasan dari tim teknoiot cara mempercepat loading website yang membantu Anda mencapai kecepatan maksimal.






Ini Tips Cara Mempercepat Loading Website Anda sampai 85% Menggunakan AMP





Para insinyur di Google menghasilkan solusi unik yang disebut Accelerated Mobile Pages (AMP). Menggunakan AMP, halaman dimuat hanya dalam sekejap. Pada artikel ini, kita akan melihat cara mengaktifkan AMP untuk situs Anda, tetapi pertama-tama, mari kita lihat bagaimana AMP bekerja.





 Kita semua mempunyai pengalaman memuat situs sumber daya intensif di jaringan tambal sulam Cara Mempercepat Loading Website Anda sampai 85% Menggunakan AMP
images credits: teknoiot




Cara Kerja AMP:





Cara mempercepat loading website dengan menyimak poin-poin berikut yangmenggambarkan prosedur di balik kerja halaman AMP.





  • Block native JS of the page   – Javascript yakni biang kerok utama untuk tetap memakai DOM situs web. AMP memodifikasi ini dengan skrip asinkron khusus yang tidak memperlambat proses rendering.
  • Extension mechanisms can’t block page rendering   – ekstensi ibarat lightboxes, Instagram embed, tweet, dll. Memerlukan seruan HTTP tambahan. AMP mempunyai tag skrip khusus untuk ekstensi ini seperti amp-iframesehingga DOM menyadari bahwa ada iframe di halaman dan menciptakan kotak iframe bahkan sebelum iframe dimuat.
  • Pre-defined size for external resources  – Banyak perhitungan ulang style terjadi ketika halaman diberikan ketika CSS berubah secara dinamis ketika memuat. Untuk menghindarinya, ukuran sumber daya eksternal ibarat iklan, gambar, video ditentukan secara eksplisit sebelum diunduh.
  • Sandboxing third-party external j4vascript   – AMP memperlihatkan saluran ke JS pihak ketiga hanya dalam iframe sandbox sehingga mereka tidak mengganggu DOM utama.
  • Inline CSS  – Memiliki file CSS eksternal meningkatkan seruan HTTP yang memperlambat proses rendering. AMP hanya memungkinkan inline CSS untuk meminimalkan jumlah seruan HTTP dari jalur rendering kritis, sehingga meningkatkan kecepatan.
  • Font Optimisations  – Secara umum, font dimuat sehabis sebagian besar file CSS dan JS dimuat. AMP menyebabkan seruan font sebagai seruan HTTP pertama sebelum seruan lainnya segera sehabis halaman mulai memuat. Jadi font dimuat sebelum skrip lainnya.
  • Handling Animations  – Animasi dibatasi hanya untuk dua metode: transform dan opacity. Ini memastikan bahwa browser tidak memerlukan tata letak halaman, dan animasi ditangani oleh GPU itu sendiri sehingga meningkatkan kinerja.
  • The three Ps  – Preconnect, Prerender dan Prefetch dipakai dengan cara yang cerdas oleh AMP untuk menghemat bandwidth dan siklus CPU dengan hanya mengunduh sumber daya di atas flip. Dengan memakai ini, halaman diberikan sebelum pengguna mengunjungi halaman. Jadi, ketika pengguna mengunjungi halaman, itu eksklusif memuat!
  • Progressive loading of resources – AMP hanya memuat sumber daya yang diharapkan untuk menghilangkan banyak kendala yang tidak perlu. AMP juga mengambil sumber daya yang dimuat malas ketika jaringan dan CPU menganggur. Ini menciptakan konten tersedia bagi pengguna dengan sangat cepat dan efisien.




Poin-poin di atas disajikan dengan indah oleh Malte Ubl di Google IO 2016 dalam video berikut.









Cukup dengan prinsip kerja. Sekarang mari kita lihat bagaimana memakai AMP untuk website Anda.





Postingan dibagi menjadi dua bagian: Bagian pertama akan memperlihatkan cara memakai AMP di situs WordPress dan di bab kedua kita akan melihat bagaimana menulis situs web ramah AMP dari awal.





Langkah 1: AMP untuk website WordPress





Menggunakan AMP di WordPress semudah pie. Berikut langkah-langkahnya:





  1. Instal plugin AMP  oleh Automattic.
  2. (Opsional)  Instal glue for Yoast SEO & AMP jika Anda memakai plugin Yoast SEO. Ini juga mempunyai fitur lain ibarat menyesuaikan pilihan warna default untuk halaman AMP.




Itu dia! Anda telah menyiapkan AMP di situs web Anda. Untuk menyidik apakah itu berfungsi, navigasikan ke sembarang postingan di situs Anda dan tambahkan /ampdi selesai URL.





Untuk misalnya, Jika posting Anda mempunyai URL seperti https://example.com/blog/article lalu ganti dengan https://example.com/blog/article/amp
Seperti itulah tampilan versi halaman AMP.





Untuk validasi lihat langkah 3 dari bab 2 di bawah ini.





CATATAN : Halaman AMP tidak akan berfungsi untuk domain root situs WordPress Anda. Ini hanya akan berfungsi untuk halaman posting alasannya AMP dirancang untuk blog atau situs web gosip yang mengandung banyak konten dan tidak dimaksudkan untuk dipakai untuk halaman promosi yang menampilkan produk, situs web perusahaan, atau situs web portofolio pribadi.





 Kita semua mempunyai pengalaman memuat situs sumber daya intensif di jaringan tambal sulam Cara Mempercepat Loading Website Anda sampai 85% Menggunakan AMP




Langkah 2: Membangun website ramah AMP dari awal





Kami akan mengikuti sepanjang panduan resmi Google . Untuk lebih jelasnya, Anda sanggup mengunjungi tautan yang diberikan. Anda harus terbiasa dengan HTML. Pengetahuan ihwal CSS dan Javascript juga membantu.





  • Langkah 1 : Buat file HTML dan tambahkan isyarat berikut ke dalamnya. Ini membentuk dasar untuk situs web AMP kami.




<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Basic AMP Boilerplate</title>
<link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>
<style 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}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<body>
<h1>This ia a heading</h1>
<p>This is a paragraph</p>
</body>
</html>




Langkah 2 : Untuk menambahkan gambar ke situs Anda, gunakan tag berikut: 




<amp-img src="image.jpg" alt=" Kita semua mempunyai pengalaman memuat situs sumber daya intensif di jaringan tambal sulam Cara Mempercepat Loading Website Anda sampai 85% Menggunakan AMP" height="500" width="800"></amp-img>




  • Anda mungkin telah memperhatikan bahwa <img>tag konvensional telah diganti dengan tag <amp-img>. Banyak tag konvensional diganti dengan tag amp kustom, dan banyak yang tidak diizinkan dalam AMP. Alasan untuk ini yakni preloading dan memprioritaskan sumber daya Untuk daftar tag yang diganti atau tidak boleh kunjungi di sini .
  • Langkah 3 : Validasikan isyarat Anda – Sekarang, sehabis file HTML dibuat, kita perlu melihat apakah ada kesalahan dalam isyarat tersebut. Salin seluruh isyarat dan kunjungi https://validator.ampproject.org . Hapus konten area teks dan tempel isyarat Anda di sana. Kemudian klik Validasi, dan itu akan segera menampilkan detail untuk setiap kesalahan. Atau, jikalau Anda sudah menerbitkan halaman Anda, Anda sanggup eksklusif memasukkan URL di bidang yang diberikan.




 Kita semua mempunyai pengalaman memuat situs sumber daya intensif di jaringan tambal sulam Cara Mempercepat Loading Website Anda sampai 85% Menggunakan AMP




  • Langkah 4 : Penemuan halaman AMP – Ini yakni salah satu langkah paling penting yang memungkinkan Google bot untuk menemukan halaman AMP dan menunjukkannya di hasil pencarian.
    • Jika Anda mempunyai satu versi AMP dan satu versi non-AMP dari halaman yang sama, Anda harus menautkan keduanya. Dalam versi non-AMP halaman tambahkan baris isyarat berikut: <link rel="amphtml" href="https://www.example.com/ampversion.html">Ganti URL example.com untuk menambahkan alamat versi non-AMP halaman Anda. Sekarang, dalam versi AMP halaman Anda tambahkan baris berikut dari kode: <link rel="canonical" href="https://www.example.com/fullversion.html">Demikian pula, ganti URL example.com untuk menambahkan alamat versi non-AMP halaman Anda.
    • Jika Anda hanya menciptakan satu versi halaman dan itu yakni versi AMP, tambahkan baris isyarat berikut:<link rel="canonical" href="https://www.example.com/url/to/amp/document.html">
    Sekarang lakukan langkah validasi sebelumnya lagi untuk menyidik kesalahan. Halaman AMP kini siap untuk diterbitkan dan harus sanggup ditemukan oleh Google.




Untuk pembiasaan lebih lanjut, kunjungi panduan resmi AMP .





 Kita semua mempunyai pengalaman memuat situs sumber daya intensif di jaringan tambal sulam Cara Mempercepat Loading Website Anda sampai 85% Menggunakan AMP




Kesimpulan




Setiap detik website memuat waktu penting. Keterlibatan pengguna meningkat secara signifikan jikalau waktu pemuatan di bawah 3 detik. Pada pengujian awal, Google telah melaporkan peningkatan kinerja dari 15% sampai 85% ( sumber ). 





Itu bahkan mengarah pada peningkatan visibilitas seluler alasannya Google menampilkan hasil AMP dalam daftar pencarian organik dan membuatnya terlihat menarik berbeda dengan daftar non-AMP. Ini mempunyai beberapa batasan, tetapi kelebihannya secara luas mengalahkan mereka. Mengoptimalkan cara mempercepat loading website dalam hal ini pemuatan halaman dengan AMP tentunya harus ada dalam daftar periksa setiap penerbit konten.










style="display:block"
data-ad-client="ca-pub-7299050187086935"
data-ad-slot="9246286780"
data-ad-format="auto"
data-full-width-responsive="true">


Sumber https://www.teknoiot.com


EmoticonEmoticon