Một số cách tăng tốc Blogspot

/
Speed-up Blogspot
Hiện nay xuất hiện khá nhiều blog chủ đề về tin tức hoặc giải trí sử dụng mã nguồn Blogger nhưng có vẻ như chưa được tối ưu hóa nên tốc độ tải trang có vẻ "không được nhanh", điều này không những gây khó chịu cho độc giả mà còn ảnh hưởng tới SEO. Vì vậy Noct muốn chia sẻ một số thủ thuật nhằm tăng tốc độ load trang web trên Blogspot với kinh nghiệm có được.

Trước khi thực hiện các tip này bạn nên save lại mẫu template của mình để có gì còn hồi phục lại được nếu chẳng may không thành công.

1/ Tối ưu CSS: nếu template của bạn có mã CSS quá dài thì nên làm điều này, còn không thì cứ để vậy cũng được. Bạn có thể vào địa chỉ này để nén code CSS lại, tốc độ sẽ được cải thiện.

2/ Tối ưu hình ảnh: các weblog về tin tức- giải trí chứa nhiều hình ảnh sẽ gây chậm blog, vì vậy hãy sử dụng định dạng JPG cho tất cả các image. Không nên copy link các hình ảnh trên website khác quá nhiều mà hãy tự upload chúng lên host riêng ví dụ như photobucket, mình thì thường up lên Picasa. Ngoài ra còn có một số software giúp nén hình ảnh mà vẫn giữ nguyên chất lượng ví dụ như Advanced JPEG Compressor. 

Thử test chương trình này thì được kết quả như sau (cả hai ảnh đều ở định dạng JPG):


      13Kb     ->             400%         ->        3Kb

Bạn có nhận ra được sự suy giảm chất lượng hình ảnh ? Tôi thì không. Software này đặc biệt hữu ích với các web có nhiều hình ảnh (truyện tranh).

3/ Tối ưu javascript: thông thường thì ta không nên chèn quá nhiều script vào template bởi gây chậm đáng kể, tuy nhiên nếu điều đó là bất khả kháng thì vẫn có một số cách để tăng tốc. Chúng ta có thể chèn thẳng code trong file .js vào trong template bằng cách dùng thẻ
<script type='text/javascript'>//<![CDATA[
code
//]]></script>

Tuy nhiên cũng cần chú ý với cách này, tuy nó có tăng tốc độ load trang web nhưng lại ảnh hưởng đến SEO. Sở dĩ nói vậy là vì Google không mặn mà lắm với các trang web có phần code HTML quá dài dòng và người chịu thiệt hại sẽ là bạn. Nếu ta sử dụng các liên kết tới file .js thì sẽ giảm được khả năng này. Vì vậy mình khuyên chỉ nên chèn các đoạn script có dung lượng < 10KB, và bạn cũng có thể nén nó lại bằng cách truy cập địa chỉ này (lưu ý là không phải lúc nào cũng nén thành công). Nên chèn script vào cuối phần code của template nếu được, càng sát thẻ </body> càng tốt.

Một đoạn script không nhất thiết phải được load ở tất cả các trang trên blog. Ví dụ: trang web của bạn có một slider ở trang chủ sử dụng hiệu ứng jquery. Vậy jquery có còn cần thiết ở trang đọc bài (không có slider) không ? Tất nhiên là không, ta sẽ sử dụng câu lệnh sau để loại bỏ sự phiền hà này:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script src='jquery.js' type='text/javascript'/>
</b:if>

Ở trên chỉ là ví dụ, hãy áp dụng cách này cho các script khác như related posts hoặc page-navigation chẳng hạn.

4/ Hạn chế sử dụng các tiện ích bên ngoài như Linkwithin, DISQUS, Facebook Fanpage... tuy rất tiện lợi nhưng chúng gây chậm rõ rệt, và SEO tệ hại.

5/ Hiện nay Blogger đã hỗ trợ tính năng readmore (đọc thêm), nhưng khả năng tùy biến của nó là chưa cao, và đa số chúng ta vẫn thường dùng Auto-readmore script bởi đẹp và tiện lợi. Tuy nhiên đây cũng chính là nguyên nhân gây chậm, bởi vì không như readmore của Blogspot, toàn bộ nội dung của bài đăng (tất cả hình ảnh) vẫn được load ở trang chủ, nó chỉ là bị ẩn đi thôi.

Thậm chí nếu số hình ảnh là quá lớn thì sẽ xảy ra tình trạng mất bài ở trang chủ. Mình khuyên là không nên dùng script auto, bạn có thể tham khảo thủ thuật auto-readmore không dùng javascript để khắc phục lỗi này.
Add a Comment

33 comments

Thường thì các ảnh kích thước lớn có hiệu ứng glow hoặc shadow thì mình dùng .jpg, còn lại dùng .gif. Các ảnh nhỏ thì chọn gì cũng được.

Nặc danh
1/19/2011 comment-delete

Mới lập Blog hả bạn ? Chúc phát triển nhé !^^

1/19/2011 comment-delete

Việc kiếm một host lưu trữ file js là khó khăn, dùng google code có tốc độ cao tuy nhiên thỉnh thoảng (không nhiều) mình vẫn thấy load chập chờn. Mình thường sử dụng lệnh điều kiện để chạy js khi ở item hay ở index. Thà để Blogger tốn chút thời gian xử lý vẫn hơn để trình duyệt đọc đoạn js đó mà không cần dùng. Ngoài ra thì bỏ bớt những đoạn mã trong template không dùng đến (nhiều lắm) giảm khá nhiều dung lượng, Blogger sẽ đỡ mất công đọc những đoạn mã không cần thiết, blog chạy tít mù :D

1/19/2011 comment-delete

bên godaddy đang có đợt giảm giá chỉ có 1.49$ cho tất cả các tên miền, Noct nên sắm một cái đi ^^

1/19/2011 comment-delete

@iTechPlus : cám ơn bạn đã ủng hộ ^_^

@Duy : host của cụ Gu gồ là số 1 đó. Nếu dùng host khác thì tỉ lệ chập chờn có khi còn cao hơn, có điều nhớ đọc kĩ TOS nhé. Mềnh có giới thiệu một host js free khá good là Dropbox ở bài trước đó, khi nào kẹt quá thì Duy xài thử xem.

@Rùa : thanks pác đã báo, em sẽ để ý.

1/19/2011 comment-delete

Bổ sung mục "Tối ưu hình ảnh" : nên đặt width & height cho nó để trình duyệt đỡ mất thời gian tính toán kích thước thật + đạt alt để tăng cường khả năng seo !
Vài lời chia sẻ ^^

1/19/2011 comment-delete

Bạn nói hoàn toàn chính xác, mình cũng biết điều đó nhưng việc chèn từng ảnh như vậy khá là vất vả nên không đề cập. Bên wordpress thì có sẵn plugin chuyên xử lí cái này nên "sướng" hơn.

1/19/2011 comment-delete

Phần tối ưu CSS và hình ảnh thấ đúng là hay thật , giảm tối đa những cái thừa thãi .
Comment Form của bác nhìn "ngon" quá ^^

1/20/2011 comment-delete

Mấy thủ thuật về speed của Noct rất hữu ich, cách phân tích dễ hiểu lắm.

3/18/2011 comment-delete

Bác Chinh ghé thăm thật là quí hóa quá :D

3/18/2011 comment-delete

Hic hic.Anh nòng nọc thật độc ác.em viets có mỗi 1 cái comment mà cũng xóa.huhu

Hix,blog anh noct-land còn nhanh hơn google b-(

https://lh3.googleusercontent.com/-zaF9_hPK7JI/Tec-RYuSExI/AAAAAAAACGs/wIfdp16-Xec/s104/Vs.jpg. Kinh thật

6/02/2011 comment-delete

Sao cái hình nhỏ xíu vậy nhỉ? Đây mới là hình lớn nè :
http://1.bp.blogspot.com/-zaF9_hPK7JI/Tec-RYuSExI/AAAAAAAACGs/wIfdp16-Xec/s1600/Vs.jpg

6/02/2011 comment-delete

Hic.. cái này đang cần đây.. Blog mình chạy như rùa ấy!

7/07/2011 comment-delete

Công nhận cái thằng CSS Compresser nén dữ thật, nén xong cái blog sách miễn phí của mình load cực đã, thanks bác Noct nhiều! :)

7/12/2011 comment-delete

Sau mình dùng cách rút ngắn css nhưng không được. Bạn có thể nói rõ cách làm này không vậy

7/14/2011 comment-delete

cảm ơn bài viết of anh nhìu lém, đôi khi thêm nhìu tiện ích cho blog mình quá,đâm ra khi mở lên thấy nó cứ kéo rề rề, mình cũng phát bực, h thì em bít cách tối ưu nó r, thank anh nhìu nha. hi vọng anh sẽ có thêm nhìu bài viết hay và hấp dẫn hơn nữa :)

7/20/2011 comment-delete

Sao mình nén bằng CSS Compresser thì blog không chịu lưu, nó bảo là không đúng mẫu Blogger? Anh giúp mình với! Cám ơn nhiều. Blog mình chạy cứ như rùa ấy!

8/01/2011 comment-delete

bạn thử dùng cái này xem.

8/01/2011 comment-delete

2 site đó mình nén rồi chèn vào đều không được :(

@Mít Tơ Ngố bạn thử tool này xem hontap.blogspot.com/p/css-optimizer.html

10/18/2011 comment-delete

Bạn hướng dẫn giúp mình kỹ hơn về cách dấu slider hay một widget khi ở trang đọc bài mà vẫn không mất ở trang chủ nhé!Cảm ơn bạn nhiều!

11/03/2011 comment-delete

Ok rồi.

11/05/2011 comment-delete

Nhận xét này đã bị quản trị viên blog xóa.

12/08/2011 comment-delete

Hay quá xá,sang blog mình chơi nhé 123oap.com

Nặc danh
1/11/2012 comment-delete

how can i host css sheet on on Google App Engin ?
thanks to answer

@toprodaterExcuse me but we are talking about how to speed up blogger.

2/14/2012 comment-delete

you can't show us how to host on google app engin admin?
thaks to talk

hi noct after doing a deep search i learnt how to upload on google apps,
My Request: how to replace blogger skin css with link and protect it in same time
please be generous and help me
thanks to answer...

hi Noct

mình mới tham gia blogger nay bị lỗi trang chính ko hiển thị đủ 10 bài như mình setting

nhờ bạn chỉ rõ hơn cách khắc phục nó nhé
tks bạn

8/15/2012 comment-delete

Thank anh, biết thêm về cái vụ đặt width với height cho thẻ img :D

8/18/2012 comment-delete

Duy Pham ơi,chỉ mình cách điều chỉnh để mấy cái js không load ngoài index với,vào index nó load luôn mấy file js làm blog mình chậm quá.

1/01/2013 comment-delete

Bạn sử dụng code sau nhé :D
<b:if cond='data:blog.pageType == "item"'>
link file js
</b:if>

1/01/2013 comment-delete

Đăng nhận xét

- Không chèn liên kết quảng cáo khi đăng nhận xét.
- Nội dung nên liên quan tới chủ đề của bài.
- Use English if you do not understand what we are talking about.

Chèn Emoticons
Top
Copyright © 2011 Noct Blog. Content is licensed under a Creative Commons Attribution-NonCommercial 3.0 License