<style>/*<link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=5295567013879800785&zx=a2beeeb2-6ae6-4c52-b9a3-99a64f47635f' media='none' onload='if(media!='all')media='all'' rel='stylesheet'/><noscript><link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=5295567013879800785&zx=a2beeeb2-6ae6-4c52-b9a3-99a64f47635f' rel='stylesheet'/></noscript>
<meta name='google-adsense-platform-account' content='ca-host-pub-1556223355139109'/>
<meta name='google-adsense-platform-domain' content='blogspot.com'/>

<!-- data-ad-client=ca-pub-5137243604025761 -->

</head><body>*/</style>

Fitur Lazy load Image otomatis pada browser

Diterbitkan Oleh — San Muliadi Tampilan

Fitur Lazy load Image otomatis pada browser

Gambar merupakan salah faktor yang bisa membebani kecepatan pemuatan blog. Apalagi jika dalam blog tersebut terdapat banyak gambar dengan resolusi yang terbilang besar dan tidak dikompres terlebih dahulu.

Browser Native Lazy-Load Image

Salah satu solusi dalam yang paling umum digunakan untuk mengatasi permasalahan ini yaitu dengan menambahkan script lazy load untuk gambar. Cara kerja script ini cukup sederhana, yaitu setiap tag img yang terdapat dalam postingan akan dieksekusi dengan cara memuat sebuah file gambar berukuran kecil terlebih dahulu dan setelah halaman termuat barulah gambar asli dimuat dan menggantikan gambar berukuran kecil tadi.

Salah satu downside dengan menggunakan metode ini adalah karena menggunakan javascript maka bisa dipastikan gambar tidak akan termuat jika pengakses mematikan javascript di browser mereka. Tapi ini bukanlah masalah serius, toh sangat sedikit pengguna yang mematikan javascript di browser mereka.

Sekarang ada berita baik mengenai permasalahan pemuatan gambar ini. Beberapa browser seperti Chrome sudah memiliki fitur lazy load gambar dan iframe otomatis. Para pengembang memasukkan fitur ini ke dalam api browser mereka. Artinya kita tidak lagi harus menggunakan javascript eksternal.

Namun untuk fitur baru didukung beberapa browser saja dan Mozilla firefox belum termasuk diantaranya. Tapi pasti developer browser mozilla akan menambahkan fitur lazy load ini dalam api mereka.

Cara penggunaan

Untuk cara pengimplementasiannya cukup sederhana yaitu dengan menambahkan atribut loading="lazy" pada semua tag gambar yang kalian gunakan. Contoh:

<img alt="Fitur Lazy load Image otomatis pada browser" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2PjXJqH306XtNLiyloW47zqjvcrR53td9lorwsFRHiSMtT7RCVgjC3v72-Ggc1VmV8bLTuQHbpC49zjwd8x64BRJJ4DZZjeqtnx7Cpq5G8ZCu1DOnBtx_Vaqa624700ybeboErmL3f_fy/s1600/lazy-load-min.png" title="Fitur Lazy load Image otomatis pada browser" />

Untuk browser yang sudah mendukung fitu lazy load sejauh ini adalah Chrome 76 - 82, edge 79, opera 64, android browser 76, Chrome android 79. Untuk selengkapnya bisa dilihat di https://caniuse.com/#search=loading.

edit

Posting Komentar

<style>/*
<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/745881458-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY7wZDmpOYy3QEu3Kbce8ZkSfp0E0g:1734886076087';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d5295567013879800785','//www.goinsan.com/2020/02/fitur-lazy-load-image-otomatis.html','5295567013879800785');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '5295567013879800785', 'title': 'Goinsan', 'url': 'https://www.goinsan.com/2020/02/fitur-lazy-load-image-otomatis.html', 'canonicalUrl': 'https://www.goinsan.com/2020/02/fitur-lazy-load-image-otomatis.html', 'homepageUrl': 'https://www.goinsan.com/', 'searchUrl': 'https://www.goinsan.com/search', 'canonicalHomepageUrl': 'https://www.goinsan.com/', 'blogspotFaviconUrl': 'https://www.goinsan.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': true, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': 'UA-88092512-1', 'encoding': 'UTF-8', 'locale': 'id', 'localeUnderscoreDelimited': 'id', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Goinsan - Atom\x22 href\x3d\x22https://www.goinsan.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22Goinsan - RSS\x22 href\x3d\x22https://www.goinsan.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Goinsan - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/5295567013879800785/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Goinsan - Atom\x22 href\x3d\x22https://www.goinsan.com/feeds/2235735923444516996/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseClientId': 'ca-pub-5137243604025761', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': false, 'adsenseAutoAds': false, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/361ce9cf7a112c52', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Dapatkan link', 'key': 'link', 'shareMessage': 'Dapatkan link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Bagikan ke Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'X', 'key': 'twitter', 'shareMessage': 'Bagikan ke X', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Bagikan ke Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27id\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': true, 'jumpLinkMessage': 'Selengkapnya', 'pageType': 'item', 'postId': '2235735923444516996', 'postImageThumbnailUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtZFZ1peU24y9kuXjNGSn_pEdVhWhOh7kHbYMtGEUd3l5ymC6BsWeDzOQtorlJxbUVJBYyhKLxQKSU7akDHxZrMuUh204AZ60bhCr94jB1YffY_raASkQYtqQ3zNoQ_fKs_nFGgy48UnQA/s72-c/lazy-load-min+%25281%2529.png', 'postImageUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtZFZ1peU24y9kuXjNGSn_pEdVhWhOh7kHbYMtGEUd3l5ymC6BsWeDzOQtorlJxbUVJBYyhKLxQKSU7akDHxZrMuUh204AZ60bhCr94jB1YffY_raASkQYtqQ3zNoQ_fKs_nFGgy48UnQA/s1600/lazy-load-min+%25281%2529.png', 'pageName': 'Fitur Lazy load Image otomatis pada browser', 'pageTitle': 'Goinsan: Fitur Lazy load Image otomatis pada browser', 'metaDescription': 'Salah satu solusi dalam yang paling umum digunakan untuk mengatasi loading blog yang lambat yaitu dengan menambahkan script lazy load untuk gambar'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Tautan disalin ke papan klip!', 'ok': 'Oke', 'postLink': 'Tautan Pos'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Khusus', 'isResponsive': true, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'Fitur Lazy load Image otomatis pada browser', 'description': 'Salah satu solusi dalam yang paling umum digunakan untuk mengatasi loading blog yang lambat yaitu dengan menambahkan script lazy load untuk gambar', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtZFZ1peU24y9kuXjNGSn_pEdVhWhOh7kHbYMtGEUd3l5ymC6BsWeDzOQtorlJxbUVJBYyhKLxQKSU7akDHxZrMuUh204AZ60bhCr94jB1YffY_raASkQYtqQ3zNoQ_fKs_nFGgy48UnQA/s1600/lazy-load-min+%25281%2529.png', 'url': 'https://www.goinsan.com/2020/02/fitur-lazy-load-image-otomatis.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 2235735923444516996}}, {'name': 'widgets', 'data': [{'title': 'Goinsan (Header)', 'type': 'Header', 'sectionId': 'header-wrapper', 'id': 'Header1'}, {'title': '', 'type': 'HTML', 'sectionId': 'iklan-atas', 'id': 'HTML5'}, {'title': 'Pilihan Editor \u2605', 'type': 'FeaturedPost', 'sectionId': 'featured-post', 'id': 'FeaturedPost1', 'postId': '6254119753975318050'}, {'title': 'Tips ~', 'type': 'HTML', 'sectionId': 'postByLabel-1', 'id': 'HTML14'}, {'title': 'Life Style', 'type': 'HTML', 'sectionId': 'moreFeed', 'id': 'HTML18'}, {'title': 'Gadget', 'type': 'HTML', 'sectionId': 'moreFeed', 'id': 'HTML19'}, {'title': 'Postingan Blog', 'type': 'Blog', 'sectionId': 'main', 'id': 'Blog1', 'posts': [{'id': '2235735923444516996', 'title': 'Fitur Lazy load Image otomatis pada browser', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtZFZ1peU24y9kuXjNGSn_pEdVhWhOh7kHbYMtGEUd3l5ymC6BsWeDzOQtorlJxbUVJBYyhKLxQKSU7akDHxZrMuUh204AZ60bhCr94jB1YffY_raASkQYtqQ3zNoQ_fKs_nFGgy48UnQA/s1600/lazy-load-min+%25281%2529.png', 'showInlineAds': false}], 'headerByline': {'regionName': 'header1', 'items': [{'name': 'author', 'label': 'Diterbitkan Oleh \u2014'}]}, 'footerBylines': [{'regionName': 'footer1', 'items': [{'name': 'comments', 'label': 'Comments'}]}], 'allBylineItems': [{'name': 'author', 'label': 'Diterbitkan Oleh \u2014'}, {'name': 'comments', 'label': 'Comments'}]}, {'title': 'Iklan di atas postingan', 'type': 'HTML', 'sectionId': 'iklan-di-area-postingan', 'id': 'HTML1'}, {'title': 'Iklan di tengah postingan 1', 'type': 'HTML', 'sectionId': 'iklan-di-area-postingan', 'id': 'HTML2'}, {'title': 'Iklan di tengah postingan 2', 'type': 'HTML', 'sectionId': 'iklan-di-area-postingan', 'id': 'HTML3'}, {'title': 'Iklan di bawah postingan', 'type': 'HTML', 'sectionId': 'iklan-di-area-postingan', 'id': 'HTML4'}, {'title': 'Kami Tersedia Di Platform', 'type': 'HTML', 'sectionId': 'sidebar', 'id': 'HTML11'}, {'title': '', 'type': 'HTML', 'sectionId': 'sidebar', 'id': 'HTML7'}, {'title': 'Artikel Bisnis Terbaru', 'type': 'HTML', 'sectionId': 'sidebar', 'id': 'HTML10'}, {'title': 'Artikel Crypto Terbaru', 'type': 'HTML', 'sectionId': 'sidebar', 'id': 'HTML12'}]}]);
_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'header-wrapper', document.getElementById('Header1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML5', 'iklan-atas', document.getElementById('HTML5'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_FeaturedPostView', new _WidgetInfo('FeaturedPost1', 'featured-post', document.getElementById('FeaturedPost1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML14', 'postByLabel-1', document.getElementById('HTML14'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML18', 'moreFeed', document.getElementById('HTML18'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML19', 'moreFeed', document.getElementById('HTML19'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML1', 'iklan-di-area-postingan', document.getElementById('HTML1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML2', 'iklan-di-area-postingan', document.getElementById('HTML2'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML3', 'iklan-di-area-postingan', document.getElementById('HTML3'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML4', 'iklan-di-area-postingan', document.getElementById('HTML4'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML11', 'sidebar', document.getElementById('HTML11'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML7', 'sidebar', document.getElementById('HTML7'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML10', 'sidebar', document.getElementById('HTML10'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML12', 'sidebar', document.getElementById('HTML12'), {}, 'displayModeFull'));
</script>
</body>
*/</style>