Một cái wapsite blog mà đột nhiên giữa tháng phải chi ra thêm một khoản tiền để nâng cấp hay mua thêm băng thông thì chết mẹ rồi. Mình đã rất nhiều lần hứng chịu nhiều lần như vậy Thật đâu đầu làm sao đúng không các bạn? nếu bạn đọc được bài này thì nên chỉnh chu lại cho em nó ngay để tránh tình trạng như lúc nấy mình nói.Dưới đây là những gì bạn có thể lưu ý đến em nó:
![]() |
Tiết kiệm băng thông ngay tránh tình trang như mình |
1. Tối ưu hóa hình ảnh
Cùng một bức ảnh nhưng bạn có thể tối ưu hóa một bức ảnh để giảm mức độ tiêu tốn băng thông. Một công thức đơn giản để tối ưu hóa hình ảnh:
- Đối với ảnh có ít màu sắc (độ biến thiên màu sắc ít), nhưng độ phân giải vừa và nhỏ, dùng làm icon hoặc nút bấm nên dùng GIF ( từ 32 màu đến 256 màu).
- Đối với ảnh có độ phân giải lớn, màu sắc tương đối không tương đồng (độ biến thiên gam màu lớn), hình ảnh trong bài viết, ảnh minh họa bạn nên dùng JPG (chất lượng khoảng 60% ~ 80%).
- Đối với ảnh kích thước nhỏ, có nhu cầu làm cho ảnh trong suốt, hoặc hiển thị rõ nét nhất như logo, banner, avatar bạn nên dùng PNG (32 bit/16 bit).
Để cho chất lượng ảnh tốt và kích thước bé, các bạn nên dùng chức năng Web củaPhotoshop: File -> Save for Web
Bạn cũng có thể sử dụng các trang web sau để giảm dung lượng ảnh mà chất lượng vẫn ổn
CÁC TRANG WEB GIẢM DUNG LƯỢNG ẢNH ĐẾN 90% GIỮ NGUYÊN
Ngoài ra còn một cách nữa đó là ứng dụng Sprite Map. Tức nhiều hình ảnh được đính gán vào 1 file duy nhất, cái này cải thiện tốc độ tải cũng như tiết kiệm băng thông cũng rất khá đấy.
2. Chú ý đến số lượng dòng code
Đây là một phần nhỏ, tương đối không quan trọng lắm. Nhưng theo lý thuyết, web tải càng lâu-> kích thước web càng lớn. Khi bạn viết HTML, bạn nên viết càng ít càng tốt. Đừng quên dùng những thủ thuật nén CSS, HTML để giảm kích thước web. Cái này còn kêu là kỹ thuật rút gọn code hay làm code trở nên khó đọc
Nếu dùng WordPress, bạn có thể xài plug-in W3 Total Cache để nén HTML và CSS. Rất tiện lợi :vui:
3. Tận dụng lợi thế từ cơ chế nén GZip
Ngoài cách làm cho code trở nên khó đọc. Server của bạn còn có thể nén toàn bộ trang web bằng GZIP để giảm kích thước. Hầu hết các trình duyệt bây giờ đều hỗ trợ GZIP nên bạn không phải lo lắng qua chuyện sợ người dùng không xem được web. Để mở GZIP, MinhNhut.info xin đề cử vài tải liệu để bạn tham khảo:
Apache: Module Apache “deflate”
Nginx: Module GZIP
4. Băng thông của bạn có thể bị ăn cắp
Khi mà một trang web khác link đến một tấm ảnh trên server của bạn là họ đang ăn cắp băng thông của bạn đấy! Thuật ngữ web đây còn gọi là Hotlinking. Cái này thường tiêu phí một lượng băng thông khá lớn đối với những website tương đối nổi tiếng. Tuy nhiên thật may mắn, bạn hoàn toàn có thể ngăn chặn việc này.
Tham khảo bài viết của mình:
Chóng hotlink bằng .htaccess
Chóng hotlink bằng .htaccess
5. CSS càng nhiều càng tốt
CSS được sáng chế vì một mục đích, đó là trang trí website mà không cần phải dùng hình ảnh. Đặc biết với CSS 3 với các hiệu ứng nào là đổ bóng, làm bo cạnh, hình nền chuyển màu, … mà chả cần phần dùng đến hình ảnh như lúc trước ta vẫn làm. Vì thế, nếu dùng được CSS, thì cứ dùng nó nhé.
6. Đừng dùng <table> hãy thay bằng <div> và <span>
Table đã là từ cái thời Web 1.0 rồi, vốn đã cỗ lỗ sỉ trong thiết kế web. Thẻ table cần quá nhiều đoạn code HTML để mô tả và quản lí mấy thuộc tính của nó. Hãy thay thế table bằng div hoặc span để tiết kiệm code, giảm kích thước website.
7. Tận dụng thuộc tính background-repeat của CSS
Mình rất thích thuộc tính background-repeat trong css. Từ một bức ảnh nhỏ ta có thể cho nó lập đến tận cuối trang. Cách hình nền kiểu như vậy được gọi là pattern. Bạn có thể tìm thấy rất nhiều trên mạng.
Bài viết liên quan
9 hình nền pattern hoa lá cho web
9 hình nền pattern hoa lá cho web
8. Search Engine cũng nhai băng thông
Như ta biết, mỗi ngày Google crawl trang web ta hơn chục lần nếu web đăng tin thường xuyên thì sẽ còn được crawl với tần suất cao hơn, có thể đến vài ngàn lần 1 ngày. Mà mỗi lần google làm vậy thì không khác gì một người dùng đang duyệt web bình thường, hơn nữa không phải là google chỉ làm một trang.
Nếu bạn cảm thấy Google truy vấn thông tin website mình quá nhiều, hãy điều chỉnh thông qua Google Webmaster Tools nhé
9. Dùng CDN
Một cách nữa để giảm tải cho website. Người truy cập sẽ lấy từ máy chủ CDN bản sao website của ta đã được lưu trên đấy từ trước, thay vì lấy từ website chúng ta. Đây là biện pháp tốt nhất theo Minh Nhựt.
Tham khảo bài của Minh Mèo
Content Delivery Network (CDN) là gì?
Content Delivery Network (CDN) là gì?
10. Cắt giảm nội dung phải tải với Ajax
Tuyệt chiêu cuối cùng mà Minh Nhựt rất thích và từng theo đuổi. Đó là chỉ tải một phần trang web nhỏ nội dung trang web, vừa tiết kiệm thời gian chờ đợi cho người xem. Vừa tiêu hao ít tài nguyên hệ thống.
Trên là các kinh nghiệm của Bác Minh Nhựt và mình cũng đã nhiều lần trải qua như lúc đầu mình viết. Chúc bạn thành cung :)