Cara Mempercepat Loading Template Median Ui

cek di sini). Salah satu duduk kasus yang ada di Median UI terdapat pada lazyload yang tidak berfungsi maksimal. Hal ini kokoh pada kecepatan loading template.

Untuk itu, berikut aku hadirkan penyelesaian untuk mengoptimalkan skor kecepatan template Median UI. Tapi sebelum mengikuti panduan ini, mohon cek kecepatan blog kalian dahulu lewat situs Measure (web.dev), GTmetrix, dan PageSpeed Insights (google.com). Setelah itu Screenshot score dan perayaan kesalahan yang muncul.

Cara Mempercepat Template Median UI
A. Memperbaiki Lazyload Gambar
Saya agak heran dengan pembuat template Median UI, lantaran ia menyisipkan script Lazyload atau Lazysize tetapi cuma difungsikan untuk menampung halaman gres dan menampung gambar postingan terkait (relatedpost). Ibarat mau mempercepat loading, tetapi cuma 50%, alias setengah hati. Oleh alasannya merupakan itu mari kita penyesuaian templatenya mudah-mudahan full speed hingga 100%.
Buka Dashboard Blogger
Klik Tema
Tekan icon Segitiga Terbalik
Pilih Edit HTML

Tekan Ctrl + F
Cari kata lazysizes
Letakkan arahan saifulLazyLoad di atas kode lazysizes
function saifulLazyLoad(){eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('u B(){Y(v e=o.1r("B"),t=0;t<e.1q;t++)Q(e[t])&&(e[t].N=e[t].1p("1n-N"))}u Q(e){v t=e.1t();Z t.1x>=0&&t.1w>=0&&t.1v<=(y.1u||o.T.1m)&&t.1k<=(y.1c||o.T.1b)}v b=["\\r\\m\\m\\D\\G\\a\\f\\c\\M\\n\\p\\c\\a\\f\\a\\k","\\h\\f","\\r\\c\\c\\r\\l\\A\\D\\G\\a\\f\\c","\\g\\h\\r\\m","\\p\\l\\k\\h\\g\\g","\\V\\1a\\1e\\R\\h\\f\\c\\a\\f\\c\\M\\h\\r\\m\\a\\m","\\w\\p\\a\\1l\\p\\c\\k\\n\\l\\c","\\r","\\1f\\w\\a\\k\\L\\1j\\a\\g\\a\\l\\c\\h\\k\\W\\g\\g","\\g\\a\\f\\q\\c\\A","\\w\\p\\a\\k\\W\\q\\a\\f\\c","\\c\\a\\p\\c","\\m\\h\\l\\w\\F\\a\\f\\c\\D\\g\\a\\F\\a\\f\\c","\\1i\\h\\m\\L","\\l\\g\\n\\l\\1g","\\p\\l\\k\\h\\g\\g\\1h\\h\\J","\\c\\h\\J","\\q\\a\\c\\S\\h\\w\\f\\m\\n\\f\\q\\R\\g\\n\\a\\f\\c\\1z\\a\\l\\c","\\A\\k\\a\\X","\\a\\1y\\a\\l","\\q\\a\\c\\D\\g\\a\\F\\a\\f\\c\\S\\L\\1F\\m","\\p\\l\\k\\h\\g\\g\\U\\a\\n\\q\\A\\c","\\n\\f\\f\\a\\k\\U\\a\\n\\q\\A\\c","\\J\\k\\a\\G\\a\\f\\c\\V\\a\\X\\r\\w\\g\\c","\\n\\c\\a\\F"];u I(d,j){y[b[0]]?y[b[0]](d,j):y[b[2]](b[1]+d,j)}I(b[3],B),I(b[4],B),o[b[0]](b[5],u(){b[6];Y(v d=o[b[8]](b[7]),j=d[b[9]],s=/1D|1B/i[b[11]](1G[b[10]])?o[b[12]]:o[b[13]],C=u(d,j,s,C){Z(d/=C/2)<1?s/2*d*d*d+j:s/2*((d-=2)*d*d+2)+j};j--;){d[b[1C]](j)[b[0]](b[14],u(d){v j,E=s[b[15]],x=o[b[1A]](/[^#]+$/[b[19]](1H[b[18]])[0])[b[17]]()[b[16]],z=s[b[1d]]-y[b[1s]],O=z>E+x?x:z-E,K=1o,H=u(d){j=j||d;v x=d-j,z=C(x,E,O,K);s[b[15]]=z,K>x&&P(H)};P(H),d[b[1E]]()})}});',62,106,'||||||||||x65|_0x1b5d|x74|_0xdd48x2||x6E|x6C|x6F||_0xdd48x3|x72|x63|x64|x69|document|x73|x67|x61|_0xdd48x4||function|var|x75|_0xdd48x7|window|_0xdd48x8|x68|lazy|_0xdd48x5|x45|_0xdd48x6|x6D|x76|_0xdd48xb|registerListener|x70|_0xdd48xa|x79|x4C|src|_0xdd48x9|requestAnimationFrame|isInViewport|x43|x42|documentElement|x48|x44|x41|x66|for|return|||||||||||x4F|clientWidth|innerWidth|21|x4D|x71|x6B|x54|x62|x53|left|x20|clientHeight|data|900|getAttribute|length|getElementsByClassName|22|getBoundingClientRect|innerHeight|top|right|bottom|x78|x52|20|trident|24|firefox|23|x49|navigator|this'.split('|'),0,{}));} eval(function(p,a,c,k,e,d){e=function(c){return c.toString(36)};if(!''.replace(/^/,String)){while(c--){d[c.toString(a)]=k[c]||c.toString(a)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('j 4=["\\7\\9\\9\\e\\d\\a\\b\\8\\i\\g\\h\\8\\a\\b\\a\\k","\\f\\c\\7\\9","\\7\\8\\8\\7\\m\\l\\e\\d\\a\\b\\8","\\c\\b\\f\\c\\7\\9"];5[4[0]]?5[4[0]](4[1],6,!1):5[4[2]]?5[4[2]](4[1],6):5[4[3]]=6;5[4[0]]?5[4[0]](4[1],6,!1):5[4[2]]?5[4[2]](4[1],6):5[4[3]]=6;',23,23,'||||_0xdfb4|window|saifulLazyLoad|x61|x74|x64|x65|x6E|x6F|x76|x45|x6C|x69|x73|x4C|var|x72|x68|x63'.split('|'),0,{}));
Hasilnya:

Lalu cari kata "lazy" dan ubah menjadi "lazi". Ingat cuma ubah kata ini di bab tertentu saja ya.
1. Cari kode /*! lazysizes lalu ubah menyerupai gambar

2. Cari kode  kemudian ubah menyerupai gambar

3. Cari kode <b:includable id='postAuthorImage'> lalu ubah menyerupai gambar

4.Cari kode <b:includable id='authorProfileImage'> lalu ubah menyerupai gambar

5. Cari kode <b:if cond='data:cb.level.authorAvatarSrc'> lalu ubah menyerupai gambar

6. Cari kode  lalu ubah menyerupai gambar

B. Memperbaiki javascript Google Analytic
Javascript Google Tag Manager yang berfungsi untuk memonitor trafik lewat Google Analytic pada template Median UI ternyata mempengaruhi kecepatan loading blog yang signifikan. Maka dari itu, kita mesti meniadakan sebagian kodenya, kemudian memodifikasinya mudah-mudahan tetap berfungsi tetapi tidak memperberat kinerja blog.

Cara Mempercepat Kode Google Analytic
Cari kode  lalu hapus 1 baris arahan yang ada di bawahnya

Cari kode </body> kemudian letakkan arahan berikut ini sempurna di atas </body>
<script type='text/javascript'>//<![CDATA[
var LLJSaifullahid=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&LLJSaifullahid===!1||0!=document.body.scrollTop&&LLJSaifullahid===!1)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://www.googletagmanager.com/gtag/js?id=" + data:blog.analyticsAccountNumber";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}(),LLJSaifullahid=!0)},!0);
//]]></script>
Hasilnya:

C. Mengganti Font Bawaan Ke Font Google
Font bawaan di template Median UI terlalu berlebihan. Padahal bentuknya tidak jauh beda dengan font dari Google. Kebanyakan jenis font yang digunakan dalam suatu blog sanggup memperlambat kecepatan blog. Oleh alasannya merupakan itu, lebih baik kita ganti font Median UI dengan font yang lebih praktis tetapi lazim digunakan Google.

Cara Mengganti Font Median UI
Cari kode /* Font Body */ lalu hapus semua arahan yang ditunjuk tanda panah

Kemudian ganti dengan arahan gres ini
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: local('Roboto Regular'), local('Roboto-Regular'), url(https://themes.googleusercontent.com/static/fonts/roboto/v11/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff');} format('woff');}
html,button,input,select,textarea{font-family:sans-serif}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1;display:block}html{display:block}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:''content:none}table{border-collapse:collapse;border-spacing:0}
Simpan Tema

Setelah mengikuti panduan di atas, coba cek ulang score kecepatan blog kalian di situs Measure (web.dev), GTmetrix, dan PageSpeed Insights (google.com), kemudian bandingkan dengan score sebelumnya. Bagaimana? Kecepatan naik dan perayaan menyusut kan?

Tweet