Iris Tips
Iris TipsBest Tips for Speeding Up your website
Tối ưu hóa và cải thiện tốc độ tải trang là việc làm gần như bắt buộc đối với những Webmaster để tăng lượng traffic trên webiste của mình. Và việc này còn quan trọng hơn cho những bạn làm blog dựa trên nền Blogger, không có Server hay VPS khủng để chạy website. Vậy làm thế nào để tăng tốc độ tải trang cho website của bạn, hãy tham khảo những mẹo sau đây cùng Iris Tips nhé.
1. Tối ưu hóa giao diện
1Không sử dụng quá nhiều hình ảnh: Nếu muốn tải nhanh bạn đừng để hình ảnh chiếm hơn 80% diện tích website. Hãy giảm tải sử dụng hình ảnh xuống ít nhất có thể, thay vào đó là những nội dung HTML đơn giản (text).2Hạn chế sử dụng ảnh PNG và GIF: vì định dạng PNG thường có kích cỡ cao hơn các dạng ảnh khác (đương nhiên chất lượng cũng cao hơn). Còn GIF khi bạn sử dụng quá nhiều sẽ gây rối mắt cho độc giả và sẽ hướng sự tập trung vào các hình ảnh đó thay vì nội dung chính trên bài viết, vì lẽ đó mà đa số các banner quảng cáo cũng hay sử dụng ảnh động chăng :))
3Tối ưu nền website: Tốt nhất là bạn không sử dụng hình nền mà nên sử dụng màu nền. Còn nếu bạn thích sử dụng hình ảnh thì hãy sử dụng ảnh ở kích thước nhỏ và để chế độ lặp, không nên sử dụng ảnh lớn sẽ load rất chậm.
4Không sử dụng file flash trên website: Flash thường khá nặng và độ bảo mật cũng không cao nên càng ngày càng ít trình duyệt hỗ trợ plugin này, do đó bạn không nên sử dụng tập tin dạng này trên website của mình, sẽ hạn chế lag cũng như nâng cao độ bảo mật.
5Tránh 301 Redirects: việc sử dụng Redirects sẽ buộc các trình duyệt chuyển hướng đến một URL mới, làm tăng tốc độ tải trang. Tuy nhiên trong một số trường hợp 301 Redirects lại có lợi cho SEO.
6Hạn chế sử dụng plugin bên thứ 3: một số thủ thuật hay widget bạn sẽ thấy các plugin này xuất hiện (AddThis, Facebook, Google+...) và thường các plugin sẽ load rất chậm do phải sử dụng máy chủ của bên trung gian. Do đó bạn không nên sử các plugin này nếu không thật sự quá cần thiết.
7Tính toán số lượng banner quảng cáo một cách hợp lý: Các banner thường sử dụng các hình ảnh bắt mắt để thu hút người, do đó nếu sử dụng quá nhiều cũng sẽ gây ảnh hưởng đến vấn đề tải trang của bạn.
Tối ưu hóa code
1Khi viết code chúng ta nên nén Javascript (JS) lại bởi vì nó gần như thành phần nặng nhất trong template và rất dễ làm trình duyệt bị "đứng hình", cùng với CSS việc tối ưu JS là hết sức quan trọng khi bạn muốn tăng tốc độ tải trang.Các bạn có thể sử dụng 2 công cụ dưới đây để nén và làm đẹp cho Javacript và CSS của mình
2Gộp các JS và CSS lại thành 1 dòng code: Khi viết code đôi lúc sẽ gặp phải lỗi viết dư một và thành phần khiến cho đoạn code của chúng ta dài ra và nặng hơn. Ví dụ như đoạn CSS này
#menu {margin:0;padding:0;}
#menu {list-style:none;}
#menu ul {margin:0;padding:0;list-style:none;}Chúng ta có thể gộp lại thành 1 dòng duy nhất
#menu, #menu ul {margin:0;padding:0;list-style:none;}Còn đối với JS thay vì viết thành nhiều đoạn script khác nhau, các bạn có thể gộp chúng thành 1 lệnh script ví dụ
<script type='text/javascript'>
//<![CDATA[
//Code JS Iris Tips 1
//Code JS Iris Tips 2
...
//]]>
</script>3Sử dụng thuộc tính async và defer trong JS: Việc sử dụng 2 thuộc tính này cũng góp phần làm cho JS load nhanh hơn và không gặp phải lỗi chặn hiển thị màn hình khi kiểm tra PageSpeed. Iris Tips sẽ có một bài viết phân tích sâu hơn về 2 thuộc tính này, các bạn nhớ đón xem trên website nhé.
4Giảm HTTP Request: chung quy của nén, gộp các JS và CSS hay sử dụng async, defer trên là để giảm các HTTP Request. Việc gửi các lệnh request quá nhiều sẽ khiến cho website của bạn tải rất chậm. Ngoài các cách trên bạn cũng có thể cắt bớt các widget hiển thị hoặc sử dụng câu lệnh điều kiện để ẩn hiện widget, code ở các trang nhất định.
5Quy trình sắp xếp code: Thông thường khi viết code bạn nên sắp xếp theo trình tự: CSS >> HTML >> Javascript. Bạn cũng có thể thấy trình tự đó trong các template.
- CSS đặt trên cùng, trước thẻ ]]></b:skin>
- Kế đến là HTML sau thẻ <body>
- Và cuối cùng là các Javascript đặt trước thẻ </body>.
Tối ưu hóa bài viết
1Sử dụng dấu ngắt: Khi viết bài bạn nên sử dụng dấu ngắt bài hay còn được gọi là <!--more-->. Việc sử dụng dấu ngắt sẽ giúp trình duyệt không phải load toàn bộ bài viết qua đó giúp tăng tốc độ tải trang.
2Không sử dụng các Auto-Readmore: các auto này nhìn bề ngoài tưởng chừng như ngắt được bài viết nhưng thực tế trình duyệt vẫn phải load toàn bộ bài. Do đó việc sử dụng các auto này không giúp ích được gì trong việc tăng tốc độ tải trang mà còn khiến trang web nặng thêm - do phải đặt thêm lệnh script để sử dụng auto này, họa chăng chỉ giúp website hiển thị tốt hơn - ngắt được văn bản hiển thị.
Tốt nhất bạn nên sử dụng và thêm dấu ngắt trang hay <!--more--> bằng tay để đạt hiệu quả cao nhất, ngoài ra còn tránh được việc ăn cắp các bài viết do Get Data.
3Nén hình ảnh: Khi viết bài không upload trực tiếp hình ảnh. Bạn hãy nén chúng trước khi sử dụng chúng trong bài viết. Bạn có thể nén hình ảnh tại trang này.
4Tính toán số lượng hình ảnh xuất hiện: Bạn không nên cho quá nhiều hình ảnh vào trong một bài viết nếu không thật sự cần thiết, cũng giống như Tối ưu hóa giao diện việc sử dụng hình ảnh quá nhiều sẽ khiến bài viết của bạn rất nặng gây khó khăn trong việc tải trang.
5Chia bài viết: Nếu lượng thông tin bạn cần chia sẻ trong bài viết quá dài bạn nên chia chúng thành nhiều bài viết nhỏ. Và thêm các hậu tố như phần 1, phần 2... để biết các bài viết có liên quan với nhau. Ví dụ như
6Tối ưu hóa URL bài viết: Khi bạn viết tiêu đề bằng Tiếng Việt bạn sẽ gặp phải lỗi mất chữ. Ví dụ chữ "tốc độ" sẽ bị mất chữ "đ" và biến thành "toc-o", không đẹp chút nào phải không. Vậy cách khắc phục như thế nào?
Có 2 cách: 1 là bạn ghi tiêu đề bằng Tiếng Việt không dấu >> xuất bản >> rồi vào thêm dấu câu đầy đủ lại, 2 là sử dụng Liên kết cố định như hình ở bên dưới.
Sử dụng Lazyload
Các công cụ test tốc độ
1Và cuối cùng bạn hãy sử dụng các công cụ kiểm tra tốc độ để xem các lỗi mà webiste của mình mắc phải và tìm cách khắc phục vấn đề đó.Bạn còn có phương pháp nào để tối ưu website nữa hay không? Hãy để lại bình luận để chia sẻ cùng mọi người nhé.
Chúc bạn thành công!
Created by Iris Tips
Mẹo nhỏ khi bình luận