Tối ưu tốc độ tải trang cho blogspot

Blog của bạn có tốc độ tải trang khá chậm hoặc chậm hơn nhiều so với trang demo của người tạo ra template ? Bài viết này sẽ giúp bạn giải quyết nó. (Còn về tại sao lại cần tốc độ tải trang tốt thì trang càng load nhanh càng được google đánh giá cao - tốt cho SEO và càng được người dùng ưu thích )

Đầu tiên chúng ta sẽ điểm đến 2 công cụ kiểm tra tốc độ tải trang tốt nhất hiện nay.

Đó là Page speed insights của Google ( Dán url trang web của bạn vào và chọn Analyze )

và Website Speed Test của Pingdom. ( Dán url trang web của bạn vào, chọn server và nhấn Start test.

Thực ra các server của công cụ này đều ở mỹ nên cũng không quan trọng lắm )

Việc sử dụng hai công cụ này sẽ giúp các bạn biết được tốc độ tải trang của mình nhanh đến đâu. Không chỉ thế, hai công cụ này sẽ cho các bạn biết được những thứ làm chậm tốc độ tải trang của bạn và những thứ trang của bạn đã rất tốt cho tốc độ tải trang. Vì thế bạn có thể sửa lại phần chưa tốt để tắng tốc độ tải trang. Còn phần đã tốt thì tất nhiên là để nguyên rồi. 😀😀😀

Thực ra 2 công cụ này khá giống nhau nhưng Website speed test của Pingdom có vẻ chi tiết hơn về các số liệu thống kê nhưng phần chỉ ra các thứ cần sửa chữa thì 2 bên là tương đương nhau.

Mình thì thường dùng Pagespeed Insights của Google hơn. Vì giao diện của nó dễ nhìn hơn và chỉ cần dùng nó thôi là quá đủ rồi. Tuy nhiên trong một số trường hợp ít thì lại cần đến công cụ của Pingdom.

Vì thế ở bài viết này mình sẽ chỉ dùng đến công cụ của google.

Khi bạn kiểm tran bằng Pagespeed Insights của google, thì bạn có thể kiểm tra tốc độ load trên Mobi và Desktop ( PC ). Kết quả sẽ được hiện ở thang điểm 100 ( điểm càng cao thì càng tốt ) và được chia ra 3 mức từ xấu đến tốt : Poor ( Quá tồi - thấp hơn 60/100 ), Needs Work ( Có thể chấp nhận được - từ 60 đến 75/100 ) và Good ( Tuệt vời - trên 75/100) .

Dù kết quản của trang bạn là bao nhiêu thì bạn cũng nên tối ưu hơn nữa. Vì trang càng thân thiện ( tải nhanh ) thì càng được google đánh giá cao và tất nhiên khi bạn vào 1 trang web load nhanh bao giờ cũng dễ chịu hơn các trang load chậm. Đặc biệt nếu trang của bạn rơi vào mức Poor thì nên tốt ưu hơn.

Lúc này khi các bạn kéo xuống sẽ thấy các mục chưa tối ưu và đã tối ưu được xếp theo thứ tự nghiệm trọng đến tốt.

Các bạn có thê mở rộng các phần này ra để xem chi tiết cần làm những gì. Nhưng chúng khá khó hiểu và có nhưng thứ dù làm theo vẫn chưa đủ tốt để tăng tốc tải cho trang của bạn.

Và sau đây là các bước để tối ưu hóa tốc độ tải trang cho blog của bạn.

1. Chọn template thân thiện.

Đa số các template hiện giờ đều khá thân thiện tuy vậy vẫn nhiều bạn chọn template khá nặng. Tất nhiên là phụ thuộc vào sở thích mỗi người thôi. Nhưng tin mình đi, template bây giờ có rất nhiều và miễn phí nữa. Vì thế các bạn luôn có thể tìm được các template hợp ý mình và có mức độ thân thiện cao.

Một số trang tải template miễn phí nổi tiếng hiện nay :
https://btemplates.com/
https://gooyaabitemplates.com (Cá nhân thì mình thích trang này nhất )
https://www.bloggertemplatestore.com/
http://www.deluxetemplates.net/
http://www.lovelytemplates.com/blogger-templates

Hoặc bạn có thể lên google tìm theo từ khóa. Ví dụ : " Template tin tức IT cho blogspot free " , .....

Ngoài ra, các bạn không nên chèn quá nhiều hiệu ứng vào template ví dụ như tuyết rơi hay nhạc,.... vì chắc chắn chúng sẽ làm chậm trang của bạn lại. Và thậm chí sẽ gây lag trình duyệt không thể tải được. Và có thể bạn thấy chúng khá đẹp nhưng người khác thì có thể không thấy vậy.

Trang web càng tối ưu thì càng cho thấy sự chau chút và chuyên nghiệp.

2. Chèn dấu ngắt phẩy vào bài viết

Các bạn có bao giờ thấy khi mình cài 1 template thì khi so sánh kết quả tải trang bằng các công cụ trên thì trang của bạn luôn luôn chậm hơn trang demo của người chia sẻ template đó không ?

Lý do là vì khi viết bài các bạn quên chèn dấu ngắt nhảy cho blog.

Việc chèn dấu ngắt phẩy này vào bài đăng sẽ giúp cho trang của bạn phải load ít nội dung hơn.

Ví dụ trên trang chủ của web bạn, bạn cho phép hiện 10 bài đăng, phần popular post bạn cho hiện thêm 10 bài nhiều truy cập nhất nữa, vậy là nếu không có dấu ngắt phẩy mỗi khi load trang chủ bạn sẽ phải load đủ nội dung của 20 bài viết. Việc này là không cần thiết vì chúng ta chỉ cần hiện ảnh đại diện cho bài và tiêu đề bài thôi, cùng lắm là thêm 1 phần nhỏ nội dung trong bài.
Chèn dấu ngắt phẩy vào các bài viết sẽ giúp trình duyệt sẽ chỉ phải load 20 cái ảnh đại diện cho 20 bài viết này và 20 tiêu đề của 20 bài viết này thôi. Vì thế sẽ nhanh hơn việc phải load đủ nội dung của 20 bài từ ảnh đại diện của bài tới tên bài và nội dung khác của bài, đặc biệt nếu bài nào nhiều ảnh mà không chèn dấu thì sẽ làm chậm tốc độ tải của cả các bài khác.

Vì thế các bạn nên sửa lại các bài viết đã xuất bản trên web của mình và chèn dấu ngắt phẩy vào tất cả các bài này. Nếu bài quá nhiều thì có thể chỉ cần chèn vài những bài trong phần Popular post và những bài hiện trên trang chủ.
Các bạn cũng không nên để quá nhiều bài trong phần Popular post.

Sau khi chèn xong hãy thử kiểm tra lại với Google Pagespeed Insight, các bạn sẽ thấy phần Optimize images và Leverage browser caching chứa ít link ảnh hơn. Tức là có ít phần cần tối ưu hơn. Tốc độ tải trang cũng sẽ tăng lên đáng kể.

Blog của mình điểm tăng từ 62/100 lên tầm 72/100 sau khi thêm dấu ngắt phẩy này.

3. Optimize hình ảnh trước khi xuất bản.

Khi các bạn đăng hình ảnh lên thì nếu bài viết càng nhiều ảnh sẽ load càng chậm. Và chất lượng ảnh càng cao cũng vậy.

Vậy chả nhẽ ta phải dùng ảnh xấu mù mờ tịt để đăng sao ? Câu trả lời là không. 

Trên google có rất nhiều công cụ optimize (nén) hình ảnh miễn phí. Tức là sẽ giúp giảm độ lớn của kính thước ảnh lại nhưng chất lượng ảnh sẽ "không thay đổi". Nghĩa là dù kích thước ảnh giảm nhưn chất lượng thay đổi không đáng kể, thậm chí mắt nhìn cũng không phân biệt được.

Vì thế giúp tăng tốc tải trang mà không gây mất thẩm mỹ.

Các trang web này trên google có rất nhiều. Các bạn có thể tìm với từ khóa "Optimize hình ảnh online"

Các bạn có thể dùng trang này nếu ngại tìm kiếm : http://optimizilla.com/vi/

Dùng rất đơn giản. Các bạn chỉ cần tải ảnh lên và kéo thanh nhỏ để lựa chọn mức độ muốn nén và ấn Apply. nếu thấy xấu quả thì tăng lên rồi apply. vẫn đẹp mà hơi nặng thì lại giảm xuống. Khi nào thấy được thì tải về 

Tiên đây mình cũng chia sẻ với các bạn key bản quyền của phần mềm Blackbirdcleaning - Phần mềm nén ảnh chuyên nghiệp. Phần mềm này sẽ giúp các bạn nén tốt hơn mà chất lượng giảm ít hơn hoặc nó sẽ chọn ra mức tốt nhất dung hòa giữa kích thước và chất lượng ảnh.

Link trang chủ : http://blackbirdcleaning.com/imgoptim.html

Key bản quyền : 8765-3762

Thêm 1 lưu ý nữa là các bạn nên chèn trực tiếp ảnh vào bài đăng chứ không nên chèn qua 1 link trang web trung gian. Điều này cũng giúp tăng tốc độ tải trang lên.

4. Tìm trong mã nguồn blog xem có hình ảnh nào từ trang khác không:

Khi tạo template người ta có thể lấy ảnh từ các trang khác và khi tải trang có bạn trình duyệt sẽ phải truy xuất tới các trang này và tất nhiên là điều này sẽ làm chậm tốc độ tải trang của bạn lại. Nhất là khi các trang chứa ảnh kia load chậm.

Vì thế các bạn cần vào phần Edit HTML của blogger ( nằm trong mục Mẫu ) và tìm từ khóa .jpg và tìm cách link ảnh có trong template của các bạn. Nếu link không có chứa blogspot.com thì không cần chỉnh sửa. Còn nếu link là tên miền khác thì các bạn nên vào từng link đó tải ảnh về sau đó vào mục Trang của blogger. Tạo 1 trang mới chuyên để chứa các ảnh cho blog của bạn. Sau đó tải các ảnh kia lên, lấy link thay tương ứng vào các link cũ.

Điều này không chỉ giúp tăng tốc tải trang mà còn giúp bạn dễ quản lý blog hơn. Ví dụ sau này những trang kia sập thì blog của bạn sẽ bị lỗi. và làm như này sẽ giúp bạn dễ chỉnh sửa tempalate theo ý mình hơn.

Sau khi tìm xong với từ khóa .jpg các bạn làm tương tự với từ khóa .png 

5. tối ưu hóa các JS

Thông thường người tạo blog sẽ chèn các script vào template dưới dang sau :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'/>

Phần link mà xanh có thể  khác. Điều này nghĩa là trang của bạn sẽ phải load các trang khác rồi lấy các script đó về để chạy. Tất nhiên sẽ gây chậm rồi.

Vì thế các bạn hãy vào phần Edit Html tìm từ khóa : <script

Sau đó xem từng phần, nếu thấy phần nào có dạng như trên thì hãy vào từng link đó và copy nội dung của các file js đó  sao đó quay lại phần chỉnh sửa template, xóa dòng cũ đi thay bằng đoạn sau :

<script type='text/javascript'>//<![CDATA[
Nội dung file js kia
//]]></script>

Nếu thấy đoạn nào quá dài thì có lẽ là nên thôi vì lúc này sẽ gây rối code và nếu dài quá thì khi chèn trực tiếp vào tốc độ cũng sẽ không khác mấy. ví dụ như :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'/>

Các bạn sẽ thấy nó rất dài vì thế không nên chèn trực tiếp. Thậm chí dài như này chèn trực tiếp sẽ gây chậm đi.

Và lưy ý rằng nếu phiên bản của đoạn js trên không phải là 2.1.4 thì các bạn nên sửa lại thành 2.1.4 ( giống như của mình : <script src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'/> )
Vì 2.1.4 là bản cập nhật mới nhất của nó. 

Một vài lưu ý nhỏ khác :

 - Các bạn không nên để background là hình ảnh, chỉ nên để là màu thôi.
 - Trên google có rất nhiều cách như sửa <head> thành &lt;head&gt; thì những cách này không phải tempalte nào cũng phù hợp. Khi sửa như vậy sẽ làm xấu giao diện web của các bạn đi rất nhiều và tốc độ có thể tăng không đáng kể.
 - Theo mình thì quan trọng nhất và dễ dàng nhất vẫn là chọn 1 template thân thiện chuẩn Seo. Vì khi chọn được 1 temmplate như vậy rồi bạn sẽ không cần tối ưu lại nhiều nữa. Sẽ giảm thiểu được khả năng sửa code ảnh hưởng tới giao diện blog. Khi chọn được 1 template tốt rồi thì bạn chỉ cần chú ý các mục 2, 3 khi đăng bài thôi là đã đủ rồi.
Và điểm lợi là hầu hết các template chuẩn seo bây giờ đều có các tính năng như sitemap hay breadcum,... Nên bạn sẽ không cần phải chỉnh sửa nhiều nữa.
 - Bài viết các bạn cũng không nên chèn quá nhiều ảnh nếu không cần thiết. Google chỉ thích những trang nào nhiều chữ thôi vì thế nếu bạn nào có ý định đăng kí quảng cáo Google adsense thì blog không nên chứa nhiều hình ảnh flash,... 

Nếu có thắc mắc thì bạn có thể comment dưới bài viết hoặc inbox page facebook của mình để mình hỗ trợ nhé. 
https://www.facebook.com/cysb.blogger/ 

Chúc các bạn thành công. 

Bài viết được tổng hợp và tích lọc từ trên mạng. Đặc biệt cảm ơn tới blogthuthuatwin10 đã giúp mình biết tới việc chèn dấu ngắt phẩy có thể tăng tốc độ tải cho trang tốt đến vậy.