Showing posts with label SEO. Show all posts
Showing posts with label SEO. Show all posts

Thursday, October 09, 2014


Masalah render-blocking Javascript and CSS berlaku apabila, browser perlu download keseluruhan file Javascript atau CSS tersebut terlebih dahulu, dan barulah rupa webpage atau blog tersebut dapat di paparkan dengan sempurna.

Masalah mula muncul apabila browser kena tunggu lama untuk dapatkan file CSS atau Javascript tu sedangkan yang lain dah siap download dari Blogger. Blog akan kelihatan lambat untuk dipaparkan.

Cara Atasi

Ada 3 cara untuk mengatasinya.
  1. Letakkan file CSS dan Javascript itu sebelum </body> tag.
  2. Menggunakan kaedah defer.
  3. Memasukkan code CSS dan Javascript itu ke dalam fail HTML utama.

Kaedah Defer

Gantikan defer.js dengan skrip JS luaran. Dengan cara ini, skrip ini hanya akan di download setelah keseluruhan web page di paparkan dengan sempurna.

Oops!

Tapi ingat ye, cara yang pertama tidak sesuai pada fail Javascript dan CSS yang diperlukan untuk menampakkan rupa web atau blog. Lazimnya file Jquery.

Tapi, code Javascript dan CSS seperti Facebook dan Syntax Highlighter atau widget-widget yang beri fungsi extra lazimnya boleh diletakkan di hujung file HTML (sebelum </body>).

Cara yang ketiga lebih ideal tetapi kena hati-hati sebab code Javascript yang kita extract keluar dari file .js nya adalah tidak di 'encode'. Kang, nanti Blogger report kata ada tag yang tak tutup.

Ada dua solusi
  1. Encode file tersebut menggunakan servis HTML Encoder / Decoder
  2. Menggunakan CDATA untuk escape. Contoh penggunaan CDATA adalah seperti di bawah

Kadangkala, cara CDATA tak dapat selesaikan masalah ini 100%. Tapi cara ini lebih baik sebab code Javascript itu lebih mudah untuk dibaca.

So, Nak Pakai Yang Mana?

Pada aku, cara yang terbaik adalah cara yang ketiga. Semuanya datang dari satu server.

Lagi sikit blog kita 'request' sumber-sumber luaran, lagi kurang kebergantungan blog kita dengan sumber luaran dan secara tidak langsung lebih cepat dan kurang risiko.

Atasi Masalah Render-Blocking Javascript and CSS




Hari ni aku belajar 5 perkara yang wajib diberi perhatian sebelum kita tekan butang Publish warna oren tu.

Rata-rata ramai dah tau cuma biasalah manusia, kena saling diperingatkan. Aku pun sama la.

Okaylah, cut the chase and here we go.

1. Tajuk Entri Biar Menarik

Tajuk entri blog korang tu biar catchy. Biar menarik perhatian pengunjung untuk klik pada entri tu sama ada di SERP (search engine result page) atau dari segmen 'entri berkaitan'.

Artikel yang selalu pengguna klik akan lebih dipandang oleh Google dari artikel yang orang tak bernafsu nak klik.

Malah, apabila pembaca yang datang ke blog kita membaca artikel demi artikel di blog kita, Google akan nampak ini sebagai satu 'engagement' yang baik dan memberi markah seo yang lebih.

Secara tidak langsung, pembaca pun seronok sebab dia rasa blog kita bermanfaat untuknya. Silap-silap dia bookmark blog kita. Jackpot!

2. URL Yang Mesra Google



Wajib pakai permalink. By default, Blogger memang dah pakai permalink tetapi WordPress tak. So, pada geng WordPress, make sure korang pakai permalink (di Setting).

Pastikan permalink tu pendek dan ada keyword yang disasarkan.

Untuk pengguna Blogger, tekan pada perkataan Permalink di sebelah kanan skrin untuk tukar permalink secara manual.

Untuk pengguna WordPress, permalink boleh diubah di kekotak di bawah tajuk entri.

3. Interlink Dengan Post Terdahulu

Kalau korang nak tau, interlink ni 5 kali lebih baik dari pakai widget yang "Anda mungkin meminati" seperti LinkWithin atau nRelate tu.

Interlink juga kelihatan lebih personal, sebab kita sendiri yang link kan artikel terdahulu dalam blog kita dengan topik yang kita tengah tulis dalam entri yang sedang dibaca pengunjung.

Apa kebenda interlink ni?

Alamak der, interlink ni, kita letak link dalam entri ni untuk pembaca kita bila dia klik dia akan di bawa ke post lain dalam blog kita.

Contohnya ada di tips yang ke 5 dalam entri ni.

4. Semak Ejaan dan Tatabahasa



Ini yang aku paling tak jaga haha. Ye la, blog ni blog santai. Bukan blog rasmi. Tapi, blog santai pun aku tetap kena pastikan aku pakai perkataan yang lengkap dan boleh di fahami.

Jangan pakai perkataan yang macam budak sekolah hantar SMS atau WhatsApp. Mau tergeliat otak nak baca dan fahamkan.

Tatabahasa pun penting sebab kalau tatabahasa tak betul, susah nak faham apa yang kita cuba sampaikan.

5. Gunakan Gambar / Imej



Gambar ni halwa mata. Perhatian kita mudah tertancap pada sesuatu yang menarik dan cantik.

Gunakan gambar untuk menarik perhatian pembaca. Jangan biarkan entri tu kosong dan padat dengan teks aje. Buku teks pun letak gambar dan gambarajah nak bagi mudah faham yob.. apatah lagi la entri blog kan.

Kalau korang rajin, cuba baca entri: Kecilkan Gambar Untuk SEO Yang Lebih Baik dan entri bagaimana nak kecilkan gambar tetapi kualiti imej tanpa kurangkan kualiti imej tanpa menggunakan Photoshop. Online je semua.

5 Perkara Wajib Buat Sebelum Publish Entri Blog


Saturday, October 04, 2014


Dalam entri sebelum ni, aku ada cakap pasal saiz gambar akan mengakibatkan blog kita perlahan dan kurang mesra SEO kan. Tapi aku tak sempat kupas tentang PNG. Hanya JPEG sahaja.

Kalau korang nak tau, ada gambar yang kalau kita save as PNG akan menjadi lebih kecil berbanding fail JPEG.

Ini kerana, PNG walaupun ia adalah lossless compression, tapi lebih bijak mengendalikan fail-fail imej atau gambar yang kurang variasi warna berbanding JPEG.

JPEG Vs. PNG

Jom kita banding dua gambar di bawah.

JPEG - 191 KB
PNG - 115 KB
Kan? Fail PNG hanya 115 KB sahaja berbanding fail JPEG (Quality: 60) yang sebesar 191 KB (dekat sekali ganda kot).

Ini tak ambil kira yang fail PNG .. kualiti gambarnya jauh lebih baik dari fail JPEG termampat.

Tetapi bagaimana kalau kita nak kecilkan lagi fail PNG ni?

TinyPNG

Di sini lah TinyPNG memainkan peranan. TinyPNG mampu untuk mengecilkan fail PNG kita tanpa menjejaskan kualiti imej PNG kita dari pandangan mata kasar.

PS: TinyPNG adalah lossy compression tetapi masih mengekalkan alpha channel yang ada di fail PNG. Alpha channel ni .. ala.. yang bagi fail PNG boleh transparent tu la :)

So untuk demo kebagusan TinyPNG ni, aku upload gambar PNG di atas ke websitenya untuk ia mampatkan. Hasilnya adalah seperti di bawah.


Dari 118 KB dah menjadi 64 KB sahaja. Amazing kan.

Dan kalau kita banding dengan fail JPEG tadi, lebih dari 3x ganda kecilnya.

Hasil mampatan tinyPNG, aku tunjuk kat bawah ni. Feel free untuk download ketiga-tiga gambar dan bandingkannya.


So lepas ni, boleh la korang compress file PNG korang kat sini kan :)

Peringatan

Kalau gambar yang banyak warna seperti gambar panda di atas, file JPEG selalunya lebih kecil.

PNG bagus dalam memampatkan gambar yang tidak terlalu banyak variasi warna. Sebab tu lah, gambar dari kamera kita tak pernah tengok ia dimampat dalam format PNG kan.

Dan sekiranya korang nak kekalkan transparency yang ada pada gambar sedia ada, convert atau save ke JPEG adalah tidak digalakkan sebab JPEG akan menghilangkan kesan transparent tu.

Nasib baik ada pokcik TinyPNG. Gambar tersebut boleh dikecilkan tapi transparency nya dikekalkan/

Good job TinyPNG.

Bagaimana Nak Kecilkan Gambar dan Imej Berformat PNG


Friday, October 03, 2014



Korang tau tak yang blog korang akan jadi slow sikit kalau letak Facebook like button atau Facebook like page tu?

Serious!

Tak la banyak sangat. Tapi pada hantu SEO, semua benda ni dia amik kira. Sebanya, Google suka pada blog yang load cepat.

So, untuk blog PendekarLaut ni, aku cuba try test tengok. Berapa banyak dia score di Pingdom untuk:

Blog tanpa Facebook Like


Tanpa Facebook like punya code, blog aku ni dapat 87% score dan yang paling best tu, 91% lebih laju dari semua website yang pernah di uji di sini.

Ehem... bangga jap.

Well, terima kasih En. Google sebab bagi platform yang berdesup ni (WordPress aku di VPS yang pakai SSD pun semput nak atas 60% in term of relative speed walaupun skor boleh atas 93%). 

Blog dengan Facebook Like

Tapi bila aku masukkan aje kod Facebook, jeng jeng jeng...


Habis turun der.

Dari skor 87% turun ke 82%. Ouch.

Dari 91% faster dah tinggal 87% faster je. Double ouch.

So, Patut Ada Tak Facebook Like Ni?

Pada pendapat aku, kalau korang into Social Marketing jugak, memang wajib ada lah walaupun ia akan memperlahankan sikit blog korang.

Sebabnya, kalau pengunjung datang dan dia suka dengan apa yang ada kat blog korang dan dia rasa dia nak dapat notifikasi bila korang update entri blog korang... dia mesti nak like page korang.

Cuba bayangkan, dia dah nak like ni... tetiba cari Facebook like button tak dek pulak. Aduh. Jammed.

Lagipun, Facebook page Google dah bagi perhatian sekarang ni. Dan ia berkait juga dengan autoriti korang sebagai pemilik blog di mata Google.

So, memang tak rugi lah kalau penalti performance tak seteruk mana. (Macam result aku di atas, kira boleh terima lagi lah)

Tips Tambahan

Anyway, kalau korang nak tau, Facebook Facepile (ala, yang like button keluar muka banyak-banyak tu), lebih berat dari yang tak nampak muka (sebab tu aku tak show muka-muka likers di sini).

Nak Letak Plugin Facebook Ke Tak di Blog?




Alamak!

Aku lupa la. Ini Blogspot.

Aku terlupa yang Blogspot tak akan kecilkan gambar-gambar yang kita masukkan secara automatik. Di WordPress boleh la kalau kita pakai plugin EWWW tu.

Dan jangan ingat benda ni tak ada impact ye. Besar impact dia.

Baik dari segi pengguna dan SEO.

Tak ada pengguna yang sanggup tunggu page blog korang (termasuk blog aku le.. hue hue) loading lebih dari 10 saat punya.

Tu pun kira dah baik hati sangat tunggu 10 saat. Kalau aku, 5 saat... dah tutup tab tu. Assume page tak loading hehe.

Ye la... beratus ribu page lagi menanti untuk di klik dan di explore kan (search result di Google nun). Jadi, kalau satu lambat klik, boleh klik yang lain.

So, macam mana nak check yang Blog korang tu gambar-gambar dalam tu saiz gabak ke atau saiz yang cun melecun kecil molek?

Ada banyak cara. Tapi cara yang paling simple dan cepat adalah dengan menggunakan PageSpeed Insights. Tool yang Google sendiri bangunkan untuk webmaster check web masing-masing. Kita yang blogger ni pun kira webmaster lah ... ye tak :D

Klik sini untuk buka PageSpeed Insights. Kemudian, masukkan la URL blog korang dan tekan butang ANALYZE.

Sementara dia tengah analisa dengan bergaya tu, meh sini aku tunjuk result blog PendekarLaut.com sebelum dan selepas aku kecilkan gambar-gambar di dalamnya.

Sebelum



Dua dua score teruk. Yang paling parah kat 'mobile'. 53 markah sahaja. Sebaiknya kita kena usahakan agar mode desktop dan mobile dapat sekurang-kurangnya 85%.

Let see, berapa yang dapat aku tingkatkan dengan kecilkan gambar-gambar ni.

Selepas



See, hanya dengan kecilkan beberapa gambar sahaja, score dah naik ke 83. Sikit lagi nak sentuh 85%. Nanti kita ikhtiar kot cara lain pulak.

Aku tak nak la kecilkan sangat gambar-gambar tu sampai nampak segala artifak kat JPG tu. Buruk jadinya. Speed speed gak kan... tapi kualiti tetap kena jaga der.


Mobile punya score pun meningkat ke paras yang lebih selamat. 74%

Tapi aku tipu sikit kat sini. Selain dari gambar yang aku kecilkan, aku guna kan Blogger punya mobile template, sebab ia lebih laju. Yang kureng sikit.. rupanya lah (adeh.. sakit mata wei).

Tak pe, esok-esok kita customize sendiri. Kasi cun tapi ringan.

Apa-apa pun, I am still not very happy with this result. Nak cuba dapat at least 88% jugak. Kalau di WordPress aku leh setting kat 'Leverage Browser Caching'. Kat Blogspot hmmm... no idea haha.

Macam Mana Nak Kecilkan Gambar?

Ada yang tanya macam mana aku kecilkan gambar-gambar tu.

Hmm, tak dek la special mana pun. Aku just bukak gambar tu kat Photoshop dan File -> Save for web. Lepas tu pakai JPEG dengan Quality 60.

Kalau gambar tu besar sangat, aku resize la H (Height) di ke 720.


Tu je.

Selamat mencuba.

PS: Bayangkan kalau blog korang dah lama...dan banyak gambar... pergh. Mau pengsan nak kecilkan setiap satu dan upload balik. Tak pe..chaiyo'

Untuk gambar PNG, korang boleh baca kat sini. Bagaimana Nak Kecilkan Gambar dan Imej Berformat PNG (baca sini).

Kalau tak ada Photoshop, aku dah tulis satu artikel khas untuk korang. Yang ada Photoshop pun patut baca sebab servis-servis online ni lagi power dari Photoshop kita, Baca sini.

Update

Selepas aku set hanya 3 post sahaja yang terpapar di home page (yang lain kat page berikutnya), score PageSpeed dah naik ke 88%. Alhamdulillah.

Ooops! Terlebih Sudah - Kecilkan Saiz Gambar di Blog Untuk SEO Yang Lebih Baik


2014 Copyright Pendekar Laut. Customized by Zulfa Technologies | Template Trackers.