Hướng dẫn tăng tốc độ tải website một cách đơn giản

Tốc độ tải web là yếu tố quan trọng ảnh hưởng trực tiếp tới xếp hạng website và kết quả SEO. Khi công nghệ ngày một tiên tiến, người dùng trở nên ít kiên nhẫn hơn, luôn mong muốn tìm kiếm thông tin cần thiết chỉ trong vài giây, bất kể đang sử dụng thiết bị nào. Nếu website của bạn không đáp ứng được nhu cầu cần thiết này, bạn sẽ bị bỏ qua không thương tiếc.

Theo Kissmetrics, 47% người dùng mong đợi một trang web tải trong khoảng 2 giây, 40% người dùng sẽ từ bỏ một trang web nếu mất hơn 3 giây để tải. Vì vậy, nếu trang web của bạn quá chậm, bạn khó có thể đạt được mục tiêu từ khóa, ảnh hưởng tới đánh giá đầu vào cho thuật toán xếp hạng của Google (Google ranking Algorithm).

Vậy làm sao để có thể cải thiện tốc độ tải trang một cách nhanh chóng và hiệu quả nhất? Hãy cùng Quantrimang.com tìm hiểu cách khắc phục ở bài viết sau đây.

Hướng dẫn tăng tốc độ tải website một cách đơn giản
Hướng dẫn tăng tốc độ tải website một cách đơn giản

1. Sử dụng CDN (Content Delivery Network)

Lưu trữ tệp của trang web trên một mạng lưới các máy chủ phân phối nội dung là một trong những cách tốt nhất để tăng tốc độ website, thường có thể tiết kiệm tới 60% băng thông và giảm một nửa số yêu cầu trang web của bạn đưa ra. 

CDN hoạt động bằng cách lưu trữ các tệp của website trên một mạng lưới máy chủ lớn toàn thế giới. Ví dụ, khi người dùng truy cập trang web của bạn từ Thái Lan, họ đang tải xuống các tệp từ máy chủ gần họ nhất. Bởi vì băng thông được trải rộng trên rất nhiều máy chủ khác nhau, nó sẽ giảm tải yêu cầu hơn khi chỉ dùng trên một máy chủ, cách này cũng bảo vệ web khỏi các cuộc tấn công DDoS và tăng lưu lượng truy cập.

Amazon Cloudfront là một CDN tuyệt vời giúp người dùng gỡ bỏ được những tài nguyên tĩnh như CSS, javascript và hình nền để giảm tải trên server. Điều này làm cho website trở nên nhanh hơn. MaxCDN cũng là một CDN phổ biến khác mà khi kết hợp với TotalCache nó có thể gửi toàn bộ website tới một hệ thống CDN sử dụng phương pháp nén để đạt tốc độ tải siêu nhanh.

2. Sử dụng caching plugin

Đây là plugin quan trọng nhất giúp làm giảm tải cho server và tăng tốc độ website do nó lưu đệm các trang dưới dạng file html và đẩy nhanh trang xuống trình duyệt. Một số plugin phổ biến và miễn phí bạn có thể sử dụng như WP - Supercache, QuickCache hay W3 - TotalCache.

3. Xóa bớt những plugin ít sử dụng

Nếu website hiện tại đang chạy quá nhiều plugin thì đây chính là thủ phạm làm chậm tốc độ tải trang của bạn. Không những vậy, việc sử dụng nhiều plugin còn là nguyên nhân khiến trang web dễ gặp rủi ro về bảo mật. Hãy lưu ý và chỉ nên giữ lại những plugin thực sự cần thiết và an toàn.

Để làm điều này, bạn có thể sử dụng các công cụ như GTMetrix hoặc Google Pagespeed Insights để kiểm tra, rồi tới danh sách plugin đang sử dụng và tắt những thành phần không cần thiết hoặc đã lâu không còn sử dụng. Tiếp đó, hãy thử lại tốc độ trang xem website của bạn đã chạy nhanh hơn chưa.

4. Dọn dẹp cơ sở dữ liệu

Một trong những khó khăn nếu bạn đang sử dụng WordPress là cơ sở dữ liệu có thể trở nên lộn xộn rất nhanh do các bản nháp đã lưu, sửa đổi bài đăng, các plugin bị vô hiệu hóa... WP Optimize là một plugin tuyệt vời thường xuyên xóa tất cả những thứ làm lộn xộn cơ sở dữ liệu.

Thử nghiệm trên database của Quản Trị Mạng, mình thấy kết quả cơ sở dữ liệu từ 5mb giảm xuống còn 3mb, giúp tăng tốc thời gian trình duyệt thu thập và trả lại các tệp từ cơ sở dữ liệu.

5. Nén trang web bằng Gzip

Gzip là một phương pháp đơn giản, nén các tập tin trang web thành file zip để tiết kiệm băng thông và tăng tốc thời gian tải trang. Khi sử dụng, trình duyệt người dùng sẽ giải nén tệp tin và hiển thị nội dung cần thiết. Giải pháp này giúp truyền nội dung từ máy chủ đến trình duyệt hiệu quả hơn và tiết kiệm rất nhiều thời gian.

Bạn có thể bật Gzip bằng cách thêm mã sau vào tệp .htaccess của mình:

# compress text, html, javascript, css, xml:
 AddOutputFilterByType DEFLATE text/plain
 AddOutputFilterByType DEFLATE text/html
 AddOutputFilterByType DEFLATE text/xml
 AddOutputFilterByType DEFLATE text/css
 AddOutputFilterByType DEFLATE application/xml
 AddOutputFilterByType DEFLATE application/xhtml+xml
 AddOutputFilterByType DEFLATE application/rss+xml
 AddOutputFilterByType DEFLATE application/javascript
 AddOutputFilterByType DEFLATE application/x-javascript
 
 # Or, compress certain file types by extension:
 
 SetOutputFilter DEFLATE

Để kiểm tra xem Gzip có hoạt động trên trang web của bạn hay chưa, truy cập Gziptest.com để kiểm tra.

6. Đặt JS và CSS trong file riêng biệt

Nếu website của bạn tải quá chậm, rất có thể nguyên nhân đến từ việc có quá nhiều tệp Javascript và CSS, vì nếu cứ mỗi tài liệu HTML lại chứa các Script và CSS riêng biệt, nó sẽ được tải xuống mỗi lúc file HTML được gọi, gây đầy bộ nhớ đệm và tăng kích thước file HTML.

Để giải quyết vấn đề này, hãy thu nhỏ các tập tin này. Bạn có thể gói tất cả các JavaScript và CSS riêng lẻ thành một file duy nhất để đơn giản duy trì và cập nhật dữ liệu.

Cách nữa bạn cũng có thể dùng là xóa các khoảng trắng trong tệp và file của bạn sẽ tự động nhỏ hơn. Nếu đang sử dụng WordPress, WP Minify sẽ là một lựa chọn tuyệt vời, giúp bạn thực hiện tất cả những công việc này.

7. Thay thế PHP bằng HTML tĩnh nếu có thể

 HP là một lựa chọn tuyệt vời giúp website của bạn hoạt động hiệu quả và giảm thiểu công việc nhập một thông tin nhiều lần. Tuy nhiên, việc gọi thông tin qua PHP sử dụng khá nhiều tài nguyên hệ thống, vậy nên hãy cân nhắc việc thay thế nó bằng HTML.

8. Hạn chế sử dụng @import

Tương tự như trên @import sử dụng nhiều tài nguyên hệ thống hơn việc liên kết trực tiếp tới stylesheets của bạn, và kết quả của 2 cách dùng này là như nhau. Vậy nên chẳng lý do gì mà phải sử dụng cách khiến website chậm hơn cả. Lý do nữa là một số trình duyệt cũ hơn không còn hỗ trợ @import nữa.

9. Đặt CSS ở trên cùng và JS ở dưới cùng

Đây được đánh giá là vị trí tốt nhất để đặt CSS, càng gần đầu trang càng tốt, vì trình duyệt sẽ hiển thị tệp CSS trước. Trái lại, JavaScript nên đặt ở càng gần dưới trang càng tốt để không ảnh hưởng tới việc tải trang.

10. Sử dụng ít hình ảnh, kết hợp dùng CSS Image Sprite 

Làm giảm kích thước hình như loại bớt màu sắc sẽ giúp tải hình nhanh hơn mặc dù chất lượng hình kém đi. Đồng thời, hãy tải càng ít ảnh lên trang càng tốt. Nhiều plugin được khuyến nghị như Smush- it sử dụng để nén ảnh trên server. Người dùng có thể sử dụng CSS Sprites để kết hợp hình. Hãy nhớ luôn luôn quy định kích thước cho hình.

CSS Image Sprite là một tập hợp các hình ảnh trang trí như icon hay button nằm trong một file hình duy nhất, sau đó dùng thuộc tính background của CSS để hiện ra đúng vị trí cần thiết.

Các trang web có nhiều hình ảnh thường mất nhiều thời gian để tải và tạo ra nhiều yêu cầu của máy chủ, vì vậy sử dụng hình ảnh sprite sẽ giảm tải yêu cầu tới máy chủ, giảm dung lượng file hình, tăng tốc độ tải trang và tiết kiệm tài nguyên hệ thống.

Xem thêm: Image Sprite trong CSS

Hi vọng rằng những lời khuyên trên sẽ giúp bạn tăng đáng kể tốc độ website của mình. Hãy thử và cho Quantrimang.com biết kết quả nhé. Chúc bạn thành công!

Thứ Ba, 11/02/2020 17:53
4,54 👨 14.338