Posts

Showing posts matching the search for defer javascript

Auto Defer Or Async Javascript in Wordpress

Image
async vs defer attributes Tags: The  async  and  defer  attributes for the  <script>  element have nice support now, so it’s time to learn exactly what they do! Legend <script> Let's begin by process what <script> with none attributes will. The HTML file are parsed till the script file is hit, at that time parsing can stop and a call for participation are created to fetch the file (if it's external). The script can then be dead before parsing is resumed. <script async> async downloads the file through out HTML parsing and can pause the HTML program to execute it once it'sfinished downloading.

Defer loading css js

Image
Cara defer loading javascript atau menunda pemanggilan javascript di blogger Berfungsi untuk : Mempercepat loading blog website / meningkatkan kecepatan loading website blog. Mengurangi ukuran halaman website. Meningkatkan score pagespeed google. Meningkatkan konten yang terlihat. Mempermudah edit template di mobile phone / hape. Menunda javascript berarti benar-benar memuat atau mem-parsing javascript itu hanya dimulai setelah konten halaman dimuat (Artinya tidak akan memengaruhi kecepatan halaman atau jalur render kritis). Menggunakan acara "onload", kami menyebutnya javascript eksternal Javascript eksternal tidak akan dimuat sebelum konten halaman dimuat Javascript eksternal kemudian akan berjalan dan mempengaruhi halaman Penjelasan Menunda javascript adalah salah satu masalah di web yang dapat membuat Anda ingin menarik rambut Anda mencoba mencari solusi . Banyak orang mengatakan "gunakan saja penundaan" atau "gunakan saja async" atau

Cara defer multiple external file js

Image
Teknik Defer loading multiple external javascript untuk mengurangi loading website secara dramatis. Nah kali ini saya akan share bagaimana cara mengurangi loading website meskipun mempunyai banyak eksternal javascript. Langkah: 1. Backup dulu template anda bila memakai CMS Blogger, Yang lainnya backup file asli yang akan di terapkan teknik defer ini. 2. Cut semua eksternal javascript (kecuali pemanggil jquery misal:  https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js bila theme atau template anda menggunakan framework yang menggantungkan jquery, misal blogger template EVO MAGZ buatan Mas Sugeng.). Lalu paste di notepad. Lalu buat kode berikut ini : <script type="text/javascript"> function downloadJSAtOnload() {  (function(scripts) {    var i = 0,     l = scripts.length;   for (; i<l; ++i ){    var element = document.createElement("script");    element.src = scripts[i];    document.body.appendChild(element);   }  })([ 'http://yo

Auto Defer Images in Blogger And Wordpress

Image
jQuery Functions To Async Or Defer Images On Wordpress CMS And Blogger Blogs. Understanding async attributes Definition and Usage The async attribute is a boolean attribute. When present, it specifies that the script will be executed asynchronously as soon as it is available. Note: The async attribute is only for external scripts (and should only be used if the src attribute is present). Understanding Defer Attribute Definition and Usage The defer attribute is a boolean attribute. When present, it specifies that the script is executed when the page has finished parsing. Note: The defer attribute is only for external scripts (should only be used if the src attribute is present). Note: There are sev

Cara Mempercepat Blogger Dengan dns-prefetch metatag

Image
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/[VERS

Responsive RSS Search Form With Bootstraps 4.0.0-beta

Image
Bootstraps 4, HTML, CSS, dan JS Framework yang paling populer di dunia. Latest Bootstraps 4 CDN Bila Anda hanya perlu menyertakan CSS dan JS Bootstrap yang dikompilasi, gunakan CDN Bootstrap, yang disediakan bebas oleh kawan-kawan Max CDN. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="htt

Cara defer loading multi css

Image
Definisi dan Penggunaan Atribut defer adalah atribut boolean. Saat ini, ia menentukan bahwa skrip dijalankan saat halaman selesai diurai. Catatan: Atribut defer hanya untuk skrip eksternal (seharusnya hanya digunakan jika atribut src ada). Catatan: Ada beberapa cara skrip eksternal dapat dijalankan: Jika async hadir: Script dijalankan secara asynchronous dengan sisa halaman (script akan dieksekusi saat halaman melanjutkan penguraian) Jika async tidak hadir dan menunda hadir: Script dijalankan saat halaman selesai diurai Jika tidak ada async atau defer yang ada: Script diambil dan dijalankan segera, sebelum browser melanjutkan penguraian halaman Nah berikut kode untuk defer loading multiple css : <script type="text/javascript"> var loadCSSFiles = function() { var links = ["//example.com/css/custom.css", "//fonts.googleapis.com/css?family=PT+Sans", "//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css&quo

Defer Loading File CSS untuk Mengurangi Waktu Pemuatan Halaman

Image
Waktu buka halaman adalah salah satu hal penting bagi pengunjung Anda, dan sama pentingnya bagi mesin telusur. Saat menyertakan beberapa file JavaScript dan CSS , browser harus menunggu sampai semua file tersebut telah diunduh untuk merender halaman. Bergantung pada kecepatan koneksi, diperlukan beberapa detik untuk memuat semua sumber dan pengunjung harus menganggur sampai saat itu. Teknik yang kita bahas di sini akan memungkinkan browser untuk menampilkan halaman HTML awalnya tanpa gaya apapun, sehingga pengunjung setidaknya bisa mulai membaca isinya. Begitu halaman di-load, style sheet akan dimuat dan diterapkan tanpa memblokir thread utama. Ini mirip dengan menunda pemuatan tombol media sosial . Anda mungkin berpikir mengapa seseorang harus mengekspos tampilan halaman yang jelek tanpa memuat gaya! Itu benar, meski itu akan membuat kesan buruk. Jadi, pendekatan terbaik bisa termasuk kode CSS kritis yang diperlukan untuk memberi gaya pada konten paruh atas di halaman HTML i

Post

Image
Posts Lists - Sitemaps Website Development Indonesia GBWhatsApp 6.25 Apk Download | Website Development Indonesia COMODO SSL Checker HTML Minifier Googleweblight Surfer Youtube Converter HTML Encrypter Auto Visitor Online (Work 100%) Update Code Auto Syntax Highlighter Prettyprint js | Website Development Indonesia default Parsing HTML untuk menemukan Links | Website Development Indonesia default Alternatif untuk file_get_contents yang disabled on server by allow_url_fopen=0 | Website Development Indonesia default Defer Loading File CSS untuk Mengurangi Waktu Pemuatan Halaman | Website Development Indonesia default Cara defer loading multi css | Website Development Indonesia default Cara membuat html sitemap wordpress tanpa plugin | Website Development Indonesia default Cara mengeksekusi kode PHP di Text Widget tanpa menggunakan Plugin | Website Development Indonesia default Customize Blog Archive Widget With Scrollbar | Website Development Indonesia default

Stylish Full Sitemap Blogger

Image
How to Create Full Sitemap Blogger Pink Table Style Read How to async defer CSS JS perfectly Here the HTML <div id='wrapper'> <div id="bp_toc"></div> <script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/sitemap-content.js" type="text/javascript"></script> <script src="https://www.web-development.cf/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script></div> Here The CSS @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700); body{   background:#ecf0f1;   font-family:'Open Sans';   color:#444;   line-height:normal; } #wrapper{   margin:30px auto;   max-width:600px; } a:link { color:#fc4f3f; text-decoration:none; outline:none; transition:all .25s; } a:visited:hover { color:#fc4f3f; text-decoration:none; } a:visited,a:link:hover { color:#444; text-decoration:n

Pure Javascript Geolocation

Image
Read How to async defer CSS JS perfectly <script> function locationSuccess(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; var altitude = position.coords.altitude; var accuracy = position.coords.accuracy; var altitudeAccuracy = position.coords.altitudeAccuracy; var heading = position.coords.height; var speed = position.coords.speed; var timestamp = position.timestamp; // bekerja dengan informasi ini sesuka Anda! } function locationError(error) { var code = error.code; var message = error.message; // baca kode dan pesan dan putuskan bagaimana Anda ingin menangani ini! } navigator.geolocation.getCurrentPosition(locationSuccess, locationError); </script>

Cara menambah syntax highlighter dengan prettyprint di blog tanpa mengurangi kecepatan loading website 100% Work Tested

Image
Bagaimana cara menambah syntax highlighter dengan prettyprint tanpa mengurangi waktu response loading blog. Nah kali ini saya akan membagikan script syntax highlighter untuk blog tanpa mengurangi kecepatan website sedikitpun. Bisa untuk blogger wordpress joomla drupal dan lainnya. Ga pake lama ini dia script nya: <script>function loadCSS(e,t,a){var n=window.document.createElement("link"),o=t||window.document.getElementsByTagName("script")[0];n.rel="stylesheet",n.href=e,n.media="only x",o.parentNode.insertBefore(n,o),setTimeout(function(){n.media=a||"all"})}function loadPrettyPrint(e){var t=document.createElement("script");t.src="https://cdn.statically.io/gh/google/code-prettify/master/loader/run_prettify.js";var a=document.getElementsByTagName("head")[0],n=!1;t.onload=t.onreadystatechange=function(){n||this.readyState&&"loaded"!=this.readyState&&"complete"!=t

Update Code Auto Syntax Highlighter Prettyprint js

Image
Jumpa lagi dengan topik JavaScript Dan jQuery. Sebelumnya saya sudah share Cara menambah syntax highlighter dengan prettyprint di blog tanpa mengurangi kecepatan loading website 100% Work Tested , namun kali ini saya improvisasi codenya jadi lebih ringan dan simpel. Note: Taruh kode dibawah ini diatas </body></html> //Defer Syntax Higlighter function downloadJSAtOnload() { (function(scripts) { var i = 0, l = scripts.length; for (; i<l; ++i ){ var element = document.createElement("script"); element.src = scripts[i]; document.body.appendChild(element); } })(['https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=css&skin=sunburst']); } if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload); else window.onload = downloadJSAtOnload; $("pre&q

Bootstrap 4 Auto Progress Bar

Image
Press F12 for console debug requirements: 1. jQuery 2. Bootstrap 4 css 3. https://rawcdn.githack.com/dimaslanjaka/Web-Manajemen/f3dfa14a3848a8282eb39b1e2f01e1d6e62d7c44/js/jquery.progressBarTimer.min.js Read How to async defer CSS JS perfectly attribute info: countdown = to start countdown data-callback = function name of callback data-warning = bar warning style data-success = bar success style data-base = bar progress style HTML code <div data-callback="fn" countdown="5"></div> <div data-callback="fi" countdown="10"></div> Javascript code var elm = $("[countdown]"); function fc() { console.log("callback Succedeed") } function ctd(elm) { //main function var tl = 0 < elm.attr("countdown") ? elm.attr("countdown") : 5, bs = elm.data("base") ? elm.data("base") : "bg-info",

Related Post Blogger Support WEBP

Image
Related Post Blogger Support WEBP Related Blogger Post Support WEBP - After the previous post we got a solution for Blogger thumbnails to support WEBP image format, now then we will make related posts also support WEBP. Because in related posts we also display thumbnail images as well, so this also causes problems when checked in Pagespeed Insights and Lighthouse, namely the problem of Serve images in next-gen formats and Defer offscreen images. One related post that I use is a related post made by mas Taufik from DTE because it is easy to modify. For that, we will slightly modify the related post so as not to cause problems in Pagespeed Insights and Lighthouse with the use of WEBP images and lazyload. Like thumbnails of Bloggers who support WEBP , we also use Statically Imgpx to change Blogger images in related posts to support WEBP and by using Lazysizes.js to change the URL of the image as well as to lazyload the image. For the demo, you can check the following dem