Semua pemilik website WordPress tentunya ingin nak melajukan website WordPress mereka. Maka hari ini den nak tunjukkan bagaimana den buat website WordPress dalam Shared Hosting biasa load dalam masa 1.9 saat.
Kalau boleh kita semua nak page dah keluar sebelum kita tekan butang “Enter” lagi kan.. :D
Weekend lepas den sempat bermain main dengan salah satu demo site den. Den bermain main dengan beberapa plugins untuk meningkatkan kelajuan website WordPress den tersebut. Inilah laporan ringkas tentang apa yang den godek godek hari tuh.
Website yang den gunakan dalam eksperimen ini adalah website demo den..
Website OnePage Engineering Demo ini adalah sebuat website OnePage yang den bina di atas platform WordPress Multisite Multi Network. Di hostkan dalam sebuah shared hosting yang berpusat di USA. Berikut adalah senarai plugins yang active di dalam website ini:
- Autoptimize (Activate untuk Tingkatkan Kelajuan)
- Cache Enabler (Activate untuk Tingkatkan Kelajuan)
- Easy Theme Plugin Upgrades
- HTTP / HTTPS Remover
- HTTP Headers
- Multisite Enhancements
- My Custom Functions
- Popup Maker
- Snapshot
Sebelum den mulakan dengan settings yang den buat untuk melajukan website demo den ini, sini den paparkan dulu kelajuan website den dalam GTMetrix.
Sebelum Dilajukan Website WordPress Ini
[peg-image src=”https://lh3.googleusercontent.com/-YcDeL7jI0yc/WcnR2ulciiI/AAAAAAACOrY/1ZwgEvUl3rInch708U7Rt-git5RbISjcwCCoYBhgL/s144-o/laporan-gtmetrix-sebelum-tingkatkan-kelajuan-wordpress-795×416.jpg” href=”https://picasaweb.google.com/102310321892737169531/HadeeRoslan#6469933077842659874″ caption=”” type=”image” alt=”laporan-gtmetrix-sebelum-tingkatkan-kelajuan-wordpress-795×416.jpg” image_size=”795×416″ ]
- PageSpeed Score dapat F terus!
- YSlow dapat D
- Page Fully Loaded dalam masa 3.4 saat
- Webpage size dalam 3.00MB
- Ada 77 request ke server.
Secara amnya, jika dilihat dari kelajuan load page tersebut, 3.4 saat untuk load tidaklah terlalu lambat. Kalau ikut GTMetrix, purata kelajuan untuk Fully Load ialah 8.7 saat.
Tapi, jika dilihat dari PageScore dan YSlow, ternyata banyak yang perlu dan boleh diperbaiki untuk mencapai kelajuan yang lebih optima untuk page tersebut.
Jom, ikut den optimakan dan memperlajukan lagi website ini.
Langkah Pertama – Enablekan GZip Untuk Website Anda.
Laporan GTMetrix (dalam gambar di atas) itu menyatakan supaya fungsi GZip digunakan. Maka itulah yang den akan lakukan terlebih dahulu. Jom..
Secara amnya, webserver anda akan menghantar kandungan website tanpa GZip. Sekiranya saiz web page anda itu besar, tempoh masa yang lama akan diperlukan untuk menghantar maklumat tersebut.
Untuk mengurangkan saiz kandungan yang perlu dihantar, anda boleh mengarahkan web server untuk menghantar kandungan dalam format yang telah di “compress” menggunakan GZip. Lebih kurang macam anda gunakan WinZip dalam PC/Notebook la.
Ada beberapa cara yang boleh anda gunakan untuk enable GZip pada website WordPress anda.
Cara pertama adalah dengan meletakkan kod yang den bekalkan di sini ke dalam file .htaccess anda.
<IfModule mod_deflate.c> # Compress HTML, CSS, JavaScript, Text, XML and fonts AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml # Remove browser bugs (only needed for really old browsers) BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html Header append Vary User-Agent </IfModule>
Cara kedua pula adalah untuk mereka yang kurang minat nak sentuh file .htaccess. Anda boleh gunakan pelbagai plugin untuk menetapkan setting GZip ini.
Sekiranya anda ada menggunakan apa apa “cache plugin”, sila semak sama ada ia ada menyediakan fungsi GZip. Kebanyakannya memang ada dan plugin tersebut biasanya akan meletakkan kod sama seperti yang den berikan di atas itu ke dalam file htaccess anda.
Satu lagi cara yang boleh anda gunakan sekiranya web server anda tidak mempunyai fungsi “mod_deflate” ialah dengan meletakkan setting “zlib.output_compression = on” di dalam file php.ini anda. Namun, den rasa tak ramai yang perlu lakukan setting ke tiga ini.
Tak faham apa itu “mod_deflate” dan php.ini? Abaikan sahaja cara terakhir ini. :D
Sesudah anda membuat setting GZip, anda boleh membuat ujian menggunakan website Check GZip Compression ini. Ada baiknya jika anda uji website anda menggunakan website ini terlebih dahulu. Kalau webhosting memang dah enable GZip, tak perlulah anda buat semua di atas .. Selamat.. :D
Dengan setting yang berfungsi dengan betul, website anda akan menghantar maklumat dalam format GZip. Anda akan melihat paparan seperti di bawah ini:
[peg-image src=”https://lh3.googleusercontent.com/-eU_2gZQELoY/WcvAkxHq_PI/AAAAAAACOvA/RGzOSW6sW8wVb75acceqD3oqnkJx66vbQCCoYBhgL/s144-o/check-gzip-compression-795×416.jpg” href=”https://picasaweb.google.com/102310321892737169531/HadeeRoslan#6470477027541187826″ caption=”” type=”image” alt=”check-gzip-compression-795×416.jpg” image_size=”795×416″ ]
Jika anda dapat paparan seperti yang den tunjukkan ini, anda dah boleh teruskan ke langkah seterusnya.
Langkah Kedua – Optimakan File CSS, Javascript dan HTML
Laporan GTMetrix di atas ada menyatakan supaya den Minify CSS. Biasanya anda akan dapat melihat tiga arahan untuk minify – Minify CSS, Minify HTML dan Minify Javascript. So, kita boleh lah gabungkan ketiga tiga item ini dalam satu gerak kerja.
Makanya, satu bahagian dari gerak kerja untuk optimakan File CSS, JavaScript dan HTML adalah untuk Minify.
Cara Mudah Untuk Minify CSS, JavaScript dan HTML
Setiap byte yang dapat di kurangkan dari file yang membina website anda akan mempercepatkan lagi capaian ke website. File CSS, Javascript dan HTML biasanya di bina dengan format untuk memudahkan ia dibaca oleh manusia. Segala format format ini menjadikan fail tersebut besar.
Server dan browser tidak perlukan segala format tersebut. Oleh itu adalah terbaik sekiranya segala format kod kod tersebut dibuang sebelum ia di hantar dari server ke browser. Proses membuang format ini dikenali sebagai “Minification” atau “Minify”.
File CSS sebelum di “minify” – Untuk bacaan manusia:
html,body{overflow-x:hidden}
/* > 1240 ------------------------------------------------------------------------------------------------------------- > 1240 */
@media only screen and (min-width: 1240px)
{
.layout-boxed{padding:25px}
.layout-boxed.nice-scroll{padding:25px 25px 25px 15px}
.layout-boxed.boxed-no-margin{padding:0;}
#Top_bar.loading{display:none}
.hover_color:hover .hover_color_bg,.hover_color.hover .hover_color_bg{background-color:inherit!important;border-color:inherit!important}
}
Berikut pula adalah contoh file CSS yang telah di “minify”: (tiada formatting langsung)
a,abbr,acronym,address,applet,b,big,blockquote,body,center,cite,code,dd,del,dfn,div,dl,dt,em,fieldset,font,form,h1,h2,h3,h4,h5,h6,html,i,iframe,img,ins,kbd,label,legend,li,object,ol,p,pre,q,s,samp,small,span,strike,strong,sub,sup,tt,u,ul,var{margin:0;padding:0;border:0;outline:0;background:0 0;font-size:100%;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}blockquote{margin:20px 0 30px;padding-left:20px;border-left:5px solid}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-spacing:0;border-collapse:collapse}article,aside,footer,header,hgroup,nav,section{display:block}body{color:#666;background-color:#fff;font-family:"Open Sans",Arial,sans-serif;font-size:14px;font-weight:500;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.7em}body.et_fixed_nav.et_boxed_layout #page-container,body.et_non_fixed_nav.et_transparent_nav.et_boxed_layout #page-container{padding-top:80px}body.page-template-page-template-blank-php #page-container{padding-top:0!important}
Untunglah anda tidak perlu nak “minify” setiap file secara manual. Apa yang anda perlu lakukan adalah gunakan salah satu dari pelbagai plugin yang sedia ada. Ya, ada banyak plugin yang boleh melakukan “minify” untuk anda.
Hampir setiap cache plugin pun ada menyediakan fungsi “minify”.
Tapi, plugin pilihan den untuk mengoptimakan file website WordPress den adalah – Autoptimize. Install dan activate plugin ini. Setelah itu, anda hanya perlu buat setting plugin ini seperti berikut:
[peg-image src=”https://lh3.googleusercontent.com/-8nDpwPI7Q4A/Wc0fbvT9q0I/AAAAAAACOvs/RcZ-N0DGJiQOpD0Gj6z_YWqBwjTV2iu3QCCoYBhgL/s144-o/autoptimize-plugin-settings-basic-795×416.jpg” href=”https://picasaweb.google.com/102310321892737169531/HadeeRoslan#6470862801018399554″ caption=”” type=”image” alt=”autoptimize-plugin-settings-basic-795×416.jpg” image_size=”795×416″ ]
Ya.. anda hanya perlu tandakan pada tiga pilihan seperti yang den tunjukkan. Mudahkan?
Selain dari Minify, file CSS dan Javascript juga perlu dioptimakan lebih lanjut dengan membuat penggabungan dan penyusunan semula file file tersebut.
Gabungkan CSS dan Susun Semula JavaScript
Website WordPress anda mungkin mempunyai pelbagai file CSS. Hasil dari penggunaan pelbagai plugins. File CSS yang banyak banyak itu boleh anda gabungkan menjadi 1 atau 2 file sahaja.
Kenapa nak gabungkan? Setiap file yang digunakan, perlu di download oleh browser. Lebih banyak file, lebih banyak kali browser perlu berhubung dengan server. Komunikasi ulang alik antara browser dan server ini makan masa. Katakan setiap komunikasi perlukan 0.5 saat, kalau ada 8 file CSS, dah jadi 4 saat.
Oleh itu, kalau digabungkan kepada satu file, anda dah jimat 3.5 saat. Banyak dah jimat tu. :D
Selain itu, file Javascript pula, seeloknya disusun semula supaya ia diload di penghujung kandungan website anda. Ini kerana kebanyakan file JavaScript bersifat “Render Blocking”. Browser akan berhenti melakukan apa apa sehinggalah file JavaScript itu selesai di download.
Kalau setakat ada satu file JavaScript, ok lah.. tapi, macam CSS, setiap website akan menggunakan pelbagai file JavaScript bergantung kepada jumlah plugins yang digunakan.
Untuk membolehkan Browser memaparkan webpage anda dengan cepat, file JavaScript seeloknya di load selepas segala kandungan utama website anda sedia untuk dipaparkan oleh Browser.
So.. kita nak gabungkan CSS dan susun semula kedudukan JavaScript. Macam mana nak buat tuh?
Jangan risau. Anda tidak perlu nak buat semua ini secara manual. Plugin Autoptimize dah buat semuanya untuk anda. :D :D :D
Ok.. sekarang.. pada paparan Autoptimize klik pada butang “Save Changes and Empty Cache” warna biru kat bawah tuh.
Selepas klik.. anda perlu pergi buat lawatan muhibbah ke website anda. Check setiap page dan fungsi yang ada di setiap page. Ada eCommerce page? Cuba buat belian dan pastikan semuanya berjalan dengan lancar.
Kalau ada fungsi yang tak jalan, masuk balik Autoptimize Settings dan unclick pada Javascript. Save dan test semula.
Kalau ada gambar atau design yang tak keluar, masuk balik Autoptimize Settings dan unclick pada CSS. Save dan test semula.
Sekiranya semua fungsi themes dan plugins website anda bejalan dengan baik, anda boleh lah ucapkan Terima Kasih kepada plugin Autoptimize. Jika tidak, anda perlu gunakan “Advanced Settings” dalam Autoptimize dan godek godek lagi.
Dalam eksperimen ini, den gunakan Divi Themes dari Elegant Themes. Alhamdulillah, tiada masalah.
Proses ini perlukan sedikit kesabaran dan keberanian. Kalau tak faham, den rekomen anda cari orang yang boleh bantu anda.
Langkah Ketiga – Optimakan Gambar Yang Diguna
Langkah seterusnya yang den buat. Den pastikan yang semua gambar yang den gunakan telah di optimize. Ada banyak cara nak optimize gambar. Satu cara yang den biasa guna ialah dengan website TinyPNG. Upload gambar ke TinyPNG dan download gambar yang dah optimize.
[peg-image src=”https://lh3.googleusercontent.com/-dKUvWed_Ulc/WcoEVpS6dOI/AAAAAAACOr4/L2WVQjMD0VIpabsBvq3knWCATCwAKkW2ACCoYBhgL/s144-o/tinypng-online-image-compressor-795×416.jpg” href=”https://picasaweb.google.com/102310321892737169531/HadeeRoslan#6469988584580084962″ caption=”” type=”image” alt=”tinypng-online-image-compressor-795×416.jpg” image_size=”795×416″ ]
TinyPNG boleh juga di gunakan sebagai WordPress Plugin – Compress JPEG & PNG Images. Plugin akan optimize gambar semasa anda upload ke dalam WordPress Media. Ia juga akan optimize semua gambar yang di hasilkan oleh WordPress dari gambar asal anda tadi.
Namun ada kalanya, Google Page Speed Insights akan tetap kata image perlu di optimizekan lagi. So, dalam situasi begini, den akan download jer optimized image yang disediakan oleh Google Page Speed. Klik jer pada link yang disediakan oleh Google Plage Speed.
[peg-image src=”https://lh3.googleusercontent.com/-UQcQ58KOa2o/WcoUSk0LGAI/AAAAAAACOsc/ADENghhj_NUwGQNCsKSi1VomNNij16aXgCCoYBhgL/s144-o/download-optimized-resources-google-page-speed-795×416.jpg” href=”https://picasaweb.google.com/102310321892737169531/HadeeRoslan#6470006124023846914″ caption=”” type=”image” alt=”download-optimized-resources-google-page-speed-795×416.jpg” image_size=”795×416″ ]
Itulah dia beberapa cara yang biasa den guna untuk mendapatkan gambar yang optima untuk paparan dalam website.
Sebenarnya ada banyak lagi cara yang boleh anda gunakan. Nanti lah, den buat satu post khas untuk terangkan cara cara tersebut.. InsyaAllah.. :D
Langkah Keempat – Gunakan Fungsi Browser Cache
Semua browser moden seperti Chrome dan FireFox menyediakan fungsi Browser Cache. Browser akan menyimpan kandungan yang anda akses di dalam hard disk. Makanya, jika anda melawat website yang sama buat kali ke dua dan seterusnya, capaian anda akan menjadi lebih pantas.
Browser tidak perlu download sekali lagi segala file yang tadi telah disimpan di dalam hard disk. Oleh itu, anda boleh buat setting pada website anda dan menyatakan berapa lama file file kandungan dari web server anda boleh disimpan dalam Browser Cache.
Seperti dua fungsi sebelum ini, setting ini juga memerlukan anda meletakkan kod di dalam file htaccess anda. Kod yang perlu anda letakkan adalah seperti berikut:
<IfModule mod_expires.c> ExpiresActive on <FilesMatch "\.(gif|jpeg|jpg|png|ico|js|css|swf|ttf)$"> ExpiresDefault "access plus 14 days" </FilesMatch> </IfModule>
Bagi yang kurang gemar nak usik htaccess secara manual, den cadangkan anda install dan activate plugin Far Future Expiry Header dari Tips and Tricks HQ.
[peg-image src=”https://lh3.googleusercontent.com/-MtKYlJgApaU/WcuL9qIcg9I/AAAAAAACOuE/NWYhDyItK4w2lZuvfXjrSsPOEK1meIyEwCCoYBhgL/s144-o/far-future-expiry-header-plugin-settings-795×416.jpg” href=”https://picasaweb.google.com/102310321892737169531/HadeeRoslan#6470419181045842898″ caption=”” type=”image” alt=”far-future-expiry-header-plugin-settings-795×416.jpg” image_size=”795×416″ ]
Plugin ini akan meletakkan kod seperti yang den berikan di atas itu ke dalam file htaccess anda. Plugin ini juga menyediakan setting untuk GZip. Maka anda boleh juga menggunakan plugin ini untuk setting GZip anda.
Untuk memastikan setting Browser Cache anda telah dibuat dan berfungsi dengan betul, anda boleh lakukan ujian di website Gift of Speed – Browser Caching Checker ini. Sekiranya setting anda betul, anda akan melihat paparan seperti berikut:
[peg-image src=”https://lh3.googleusercontent.com/-baINFBUUYNI/WcuN35nz24I/AAAAAAACOug/IOLauWfetVQw3sSgERcNMGbBFnbbPgyPACCoYBhgL/s144-o/browser-cache-checker-795×416.jpg” href=”https://picasaweb.google.com/102310321892737169531/HadeeRoslan#6470421281147968386″ caption=”” type=”image” alt=”browser-cache-checker-795×416.jpg” image_size=”795×416″ ]
Langkah Kelima – Gunakan Plugin Cache
WordPress adalah sebuah sistem yang dibina menggunakan PHP dan juga Database MySQL. Setiap kali browser meminta kandungan dari website anda, file PHP akan dipanggil, kod kod dalam file PHP tersebut akan dijalankan dan data akan diambil dari Database. Proses ini memakan masa.
Untuk menjimatkan masa, ada baiknya, kandungan setiap page yang ada dalam website anda disimpan dalam bentuk HTML dalam cache. Bila page tersebut diakses oleh Browser, salinan yang terdapat dalam cache akan diberi kepada Browser.
Tiada kod perlu dijalankan. Tiada database perlu di akses. Browser nak page. Server bagi page terus.
Secara ringkas, itulah fungsi cache.
Dalam WordPress, ada pelbagai plugin untuk Cache. Yang mana satu nak guna?
Itu satu misteri sebenarnya. :D
Ada orang suka WP Rocket (premium). Ada orang suka W3 Total Cache. Ada orang suka WP Fastest Cache. Ada orang suka Comet Cache. Ada orang suka Cache Enabler. Bagi yang menggunakan Server LiteSpeed, LiteSpeed Cache adalah yang terbaik dan pemasangannya sangat mudah dengan CyberPanel (sebuah Hosting Control Panel Terkini).
Dalam post ini, den gunakan plugin Cache Enabler. Ianya antara plugin yang mempunyai setting yang sangat mudah. Di samping itu, ia juga mempunyai integrasi dengan Autoptimize.
So.. install dan activate plugin Cache Enabler dari KeyCDN.
[peg-image src=”https://lh3.googleusercontent.com/-2qdbnZcVyHc/WdDTBEnmGII/AAAAAAACOxE/N3Y3uTrJrSouiXohlQfJMW_78zxjIcqygCCoYBhgL/s144-o/cache-enabler-settings-795×416.jpg” href=”https://picasaweb.google.com/102310321892737169531/HadeeRoslan#6471904679904548994″ caption=”” type=”image” alt=”cache-enabler-settings-795×416.jpg” image_size=”795×416″ ]
Setelah activate, bolehlah anda tetapkan settings untuk Cache Enabler seperti yang tertera dalam gambar di atas.
Sekiranya anda nak cuba godek Cache Enabler lebih dalam lagi, anda boleh rujuk di sini.
Apa Hasilnya?
Baiklah. Den dah tunjukkan 5 langkah yang den lakukan untuk mengoptimakan dan melajukan website WordPress den. Sebelum den tunjukkan hasilnya, jom kita recap semula apa yang telah den sampaikan:
- GZip – Pastikan kandungan website anda di hantar kepada Browser dalam format GZip
- Optimakan CSS, Javascript & HTML – Plugin Autoptimize
- Optimakan Gambar – TinyPNG
- Browser Cache – Far Future Expiry Header
- Cache – Cache Enabler
Hasil dari segala plugins dan settings yang den gunakan..
[peg-image src=”https://lh3.googleusercontent.com/-Z0x67XOF55U/WdDg5PiUFrI/AAAAAAACOxk/cYc4olyZUQYUdw9b1zqV16LglbqDJHfpQCCoYBhgL/s144-o/laporan-gtmetrix-selepas-tingkatkan-kelajuan-wordpress-795×416.jpg” href=”https://picasaweb.google.com/102310321892737169531/HadeeRoslan#6471919938559022770″ caption=”” type=”image” alt=”laporan-gtmetrix-selepas-tingkatkan-kelajuan-wordpress-795×416.jpg” image_size=”795×416″ ]
- PageSpeed Score dapat A (98%)
- YSlow dapat B (84%) – boleh improve lagi nih..
- Page Fully Loaded dalam masa 1.9 saat – pengurangan hampir 50%
- Webpage size dalam 1.80MB – pengurangan 50%
- Ada 38 request ke server – pengurangan 50%
Jika dikaji laporan yang diberikan oleh GTMetrix, masalah yang tinggal dalam website ini kini berpunca dari script script dari website pihak ketiga seperti google fonts dan youtube videos. Ini den tak dapat nak buat apa apa dah la.. redha jer lah.. bukan ada access nak ubah script script tersebut.
Kalau betul betul nak dapat 100%, maka kenalah buang segala script script dari website lain tuh. Maknanya tak boleh lah guna Google fonts, Google Analytics dan video Youtube dalam website.
Pada den, tak berapa nak penting sangat la nak dapat PageSpeed Score 100% tuh. Kalau boleh dapat, kira bonus. Apa yang lebih penting adalah “Fully Loaded Time” tuh. Cuba dapatkan nilai di bawah 3 saat.
Ok.. den dah terangkan langkah langkah yang den gunakan. Sekarang apa kata anda pula buat untuk website WordPress anda. Ikut jer apa yang den tunjukkan.
Tapi ingat.. Buat full backup dulu. Lepas tuh bedal jer.. kalau tak berjaya atau website jadi bengong lepas buat apa yang den buat, buang segala setting yang baru ditambah dalam htaccess (kalau ada ubah la) dan disable segala plugin yang baru di activate. Patutnya semua akan kembali seperti sediakala la. Kalau tak jugak… itu gunanya ada full backup sebelum buat. Restore jer lah..
Kalau berjaya.. Alhamdulillah dan terbaik lah!
Kalau tak berjaya, try godek godek lagi. Susah susah outsource jer la..
InsyaAllah :D
