10 cách để tăng tốc độ website giúp cải thiện trải nghiệm người dùng
Có rất nhiều yếu tố ảnh hưởng đến thời gian tải một trang trên website của bạn, do đó, có nhiều bước khác nhau bạn có thể thực hiện để tăng tốc độ và cải thiện trải nghiệm người dùng.
Mặc dù tất cả các mẹo này có thể giúp bạn cải thiện tốc độ trang web, nhưng bạn không nhất thiết phải thực hiện tất cả chúng cùng 1 lúc.
Trên thực tế, nếu trước đây bạn đã từng tìm cách tối ưu tốc độ website, trang có thể đã áp dụng một hoặc hơn trong số các mẹo tối ưu của Bizfly Cloud qua bài viết này.
1. Giảm HTTP requests
Theo Yahoo, 80% thời gian tải web dành cho việc tải xuống các phần khác nhau của trang, như hình ảnh, stylesheet và script.
Một HTTP request sẽ được tạo cho mỗi một trong các thành phần này, vì vậy các thành phần trên trang càng nhiều thì thời gian hiển thị càng lâu.
Bước đầu tiên để giảm thiểu các yêu cầu của bạn là tìm hiểu có bao nhiêu trang web của bạn hiện đang thực hiện, để sử dụng làm điểm chuẩn.
Nếu bạn sử dụng Google Chrome, bạn có thể sử dụng trình duyệt Developer Tools để xem có bao nhiêu yêu cầu HTTP mà trang web của bạn thực hiện.
Nhấp chuột phải vào trang bạn muốn phân tích và chọn "IInspect", sau đó nhấp tiếp vào tab "Network". (Nếu bạn không thấy tab "Network", bạn có thể cần phải mở rộng sidebar của Developer Tools bằng cách kéo đường viền bên trái sang trái.)
Cột "Name" hiển thị tất cả các tệp trên trang, cột "Size" hiển thị kích thước của mỗi tệp và cột "Time" hiển thị thời gian tải mỗi tệp.
Ở góc dưới bên trái, bạn cũng sẽ thấy số lượng yêu cầu mà trang web cần thực hiện.
Giảm số lượng yêu cầu này sẽ giúp tăng tốc trang, xem qua các tệp của bạn và xem nếu không cần thiết.
Bạn có thể sẽ không nhận ran gay sự khác biệt, nhưng đây có thể là yếu tố chính thúc đẩy những tiến triển trong quá trình thực hiện các bước tiếp theo.
2. Thu nhỏ và kết hợp các file lại
Giờ bạn đã biết có bao nhiêu yêu cầu trang web phải thực hiện, bạn có thể tác động để giảm số lượng đó. Để thực hiện, bạn nên bắt đầu với các tệp HTML, CSS và JavaScript. Đây là những tệp cực kỳ quan trọng, vì chúng là những yếu tố quyết định "diện mạo" cho website.
Chúng cũng làm tăng thêm các request website phải thực hiện mỗi khi người dùng truy cập. Bạn có thể giảm số lượng này bằng cách thu nhỏ và kết hợp các file. Việc này giúp giảm kích thước của mỗi tệp, cũng như tổng số tệp.
Điều này thậm chí còn đặc biệt quan trọng nếu bạn sử dụng một web template builder. Công cụ này giúp xây dựng website dễ dàng hơn, nhưng đôi khi chúng tạo code bất trình tự làm web chậm đáng kể.
Giảm một file gồm loại bỏ định dạng, khoảng trắng và code không cần thiết.
Vì mỗi đoạn code không cần thiết sẽ làm tăng kích thước trang, điều quan trọng là bạn phải loại bỏ các khoảng trắng thừa, ngắt dòng và thụt lề. Điều này sẽ đảm bảo các trang gọn gàng nhất có thể.
Đúng như khái niệm kết hợp file, nếu web chạy nhiều tệp CSS và JavaScript, bạn có thể kết hợp chúng thành một.
Nếu website chạy trên WordPress, các plugin như WP Rocket sẽ giúp thực hiện yêu cầu này một cách đơn giản.
Nếu bạn đã cài đặt plugin này, hãy chuyển đến tab "Static Files", kiểm tra các tệp bạn muốn thu nhỏ và kết hợp.
Chúng có thể bao gồm các tệp HTML, CSS và JavaScript, cũng như Google Fonts.
Sau đó, nhấp "Save Changes" để hoàn tất quy trình. Bạn có thể tải lại trang và xem Developer Tools để theo dõi sự thay đổi.
3. Sử dụng tải không đồng bộ CSS và JavaScript
Khi bạn đã thu nhỏ và kết hợp các file, bạn cũng có thể tối ưu hóa cách chúng tải trên trang. Các tập lệnh như CSS và JavaScript có thể được tải theo hai cách khác nhau: Đồng bộ hoặc Không đồng bộ.
Nếu các script tải đồng bộ, chúng sẽ tải từng tập một, theo thứ tự chúng xuất hiện trên trang. Nếu các script tải không đồng bộ, mặt khác, một số trong số chúng sẽ tải đồng thời.
Tải files không đồng bộ có thể tăng tốc trang vì khi trình duyệt tải một trang, nó sẽ đi theo hướng từ trên xuống dưới.
Nếu trình duyệt nhận một tệp CSS hoặc JavaScript dạng đồng bộ, nó sẽ dừng tải cho đến khi tải đầy đủ tệp cụ thể đó. Nếu cùng một tệp đó và tệp không đồng bộ, trình duyệt có thể tiếp tục tải các phần tử khác trên trang đồng thời.
Sử dụng cùng một tab "Static Files" của plugin WP Rocket, xem xét các tùy chọn bên cùng"Render-blocking CSS/JS."
Chọn "Save Changes,", sau đó kiểm tra lại web để đảm bảo mọi thứ tải chính xác.
>>> Có thể bạn quan tâm: 5 công cụ kiểm tra Website Speed Test miễn phí
4. Hoãn tải JavaScript
Hoãn tải một file có nghĩa là ngăn tải file đó cho đến khi các yếu tố khác đã tải xong. Nếu bạn hoãn tải các file lớn hơn, như JavaScript, bạn cần đảm bảo phần nội dung còn lại có thể tải mà không bị trì hoãn.
Nếu bạn có một trang WordPress, bạn có thể dùng plugin WP Rocket được đề cập ở trên để kích hoạt tải JavaScript bị hoãn một cách dễ dàng. Chỉ cần xem tích vào box bên cạnh "Load JS files deferred," là xong.
Nếu bạn có một trang HTML, bạn sẽ cần phải đặt lệnh cuộc gọi file external JavaScript ngay trước thẻ </ body>, lệnh có dạng như sau:
5. Giảm thiểu thời gian đến first byte
Ngoài khoảng thời gian để trang tải hết, bạn cũng sẽ muốn xem xét thời gian cần thiết để bắt đầu tải.
Thời gian đến first byte, hay TTFB, là khoảng thời gian trình duyệt phải chờ trước khi nhận byte dữ liệu đầu tiên từ máy chủ. Google khuyến nghị TTFB dưới 200 ms.
Không giống như các yếu tố hiệu suất front-end mà hầu hết chủ sở hữu trang web cần tập trung, đây là một yếu tố server-side.
Khi người dùng truy cập website, trình duyệt của họ sẽ gửi HTTP request đến máy chủ lưu trữ web. Có ba bước sẽ xảy ra giữa yêu cầu ban đầu đó và byte dữ liệu đầu tiên:
- Tra cứu DNS
- Máy chủ xử lý
- Phản hồi
Bạn có thể ttheo dõi quá trình này mất bao lâu bằng Chrome's Developer Tools hoặc 1 công cụ của bên thứ ba.
Nếu bạn sử dụng Developer Tools, điều quan trọng cần nhớ là thời gian phản hồi có thể bị ảnh hưởng bởi kết nối Internet của bạn. Vì vậy, kết nối càng chậm, phản hồi từ máy chủ sẽ càng chậm.
Để biết thông tin này trong Developer Tools, nhấp vào tab "Network" và di chuột qua mục trên cùng trong cột "Waterfall".
Bạn cũng có thể sử dụng bất kỳ số lượng công cụ bên thứ ba miễn phí nào như WebPageTest kiểm tra trang web từ một trung tâm dữ liệu.
Nếu TTFB của bạn dưới 200ms, bạn có thể nhận được các tiến triển tốt.
Nếu không, có thể do một số vấn đề khác nhau ở root.
Nói chung, hầu hết các sự cố với TTFB chậm là do sự cố mạng, nội dung động, cấu hình web server và lưu lượng truy cập.
Trong bốn yếu tố này, bạn có quyền kiểm soát hai yếu tố: Tạo nội dung động và cấu hình máy chủ.
Không giống như các trang tĩnh, một máy chủ cần phải xây dựng một tập tin động trước khi phản hồi.
Nếu trang của bạn là WordPress, rất có thể đó là trang động. Điều này có nghĩa là trang cần phải tương tác với một database để được "built" thành công với PHP trước khi chúng được phân phối.
Bạn có thể giảm thời gian thực hiện bằng cách bật bộ đệm ẩn/caching .
6. Giảm thời gian phản hồi cho server
Một trong những yếu tố tác động đến tốc độ tải trang là khoảng thời gian tra cứu DNS.
Một DNS, hay hệ thống tên miền, là một máy chủ cơ sở dữ liệu địa chỉ IP và hostname liên quan. Khi người dùng nhập URL vào trình duyệt, máy chủ DNS sẽ dịch URL đó thành địa chỉ IP để xác định vị trí.
Sau đó, tra cứu DNS sẽ thực hiện tìm bản ghi DNS cụ thể. Tương tự như khi máy tính tìm kiếm một số trong danh bạ điện thoại.
Ví dụ: bạn muốn truy cập URL ubnt.com. Gõ tên url vào trình duyệt, ISP của bạn sẽ thực hiện tra cứu DNS để tìm địa chỉ IP được liên kết với URL đó. Và bạn sẽ nhận được một địa chỉ IP dạng 52.40.57.158.443, cho biết vị trí tìm trang web bạn đang tìm kiếm.
Thời gian xử lý phụ thuộc vào tốc độ nhà cung cấp DNS. Nếu không, đã đến lúc chuyển sang một nhà cung cấp DNS khác nhanh hơn.
7. Chọn phương án lưu trữ phù hợp với nhu cầu
Hầu hết các chủ sở hữu website mới sẽ chọn phương án rẻ nhất có thể. Lúc bắt đầu có thể không có vấn đề gì đầu, nhưng khi bạn bắt đầu nhận được nhiều lưu lượng truy cập hơn, bạn nên nghĩ đến chuyện nâng cấp.
Đối với hosting, bạn có ba tùy chọn khác nhau:
- Shared hosting
- Lưu trữ VPS
- Cloud server
Shared hosting trong đó là lựa chọn rẻ nhất. Bạn sẽ chia sẻ một số tài nguyên nhất định như CPU, dung lượng ổ đĩa và RAM với các trang web khác được lưu trữ trên cùng một máy chủ.
Với lưu trữ VPS, bạn vẫn chia sẻ một máy chủ với các trang web khác, nhưng được sở hữu các thành phần tài nguyên dành riêng trên máy chủ.
Khi bạn sống trong một căn hộ cho thuê, bạn chia sẻ một số tiện nghi nhất định như sân phơi, nhà để xe và có mặt trong nhóm cư dân tòa nhà.
Mặt khác, khi bạn sống trong một căn hộ, bạn không sử dụng các không gian chung và bạn phải chịu trách nhiệm cho việc sửa chữa, bảo trì. Ngoài ra còn có ít cư dân trong tòa nhà.
Với một cloud server, bạn có nhiều không gian lưu trữ hơn nữa, (thường nhiều hơn nhu cầu sử dụng thực tế của bạn) bảo mật hơn và không phải chịu trách nhiệm nâng cấp bảo trì. Nếu bạn đang đối mặt với tình huống lưu lượng truy cập làm chậm thời gian phản hồi máy chủ, thì có lẽ đã đến lúc chuyển từ lưu trữ chia sẻ sang VPS hoặc từ VPS sang cloud server.
8. Chạy compression audit
Các này sẽ giúp bạn giảm dung lượng các tệp ở mức nhỏ nhất có thể, mà không làm giảm chất lượng tệp.
Các trang chứa nhiều hình ảnh và nội dung thường có kích thước lớn hơn100KB. Kết quả là, chúng rất cồng kềnh và tải chậm.
Bạn có thể tăng tốc thời gian tải xuống bằng cách nén chúng. Có thể chạy tính năng này khi sử dụng 1 CDN. Công cụ nén các tệp HTML, CSS, JavaScript, văn bản trơn và tệp XML. Đây cũng là một cách tăng traffic cho website bằng việc tăng tốc độ tải trang.
9. Kích hoạt tính năng nén
Bạn có thể thực hiện nén bằng Gzip, một công cụ được sử dụng khá phổ biến hiện nay.
Gzip là một định dạng tệp và ứng dụng phần mềm, về cơ bản định vị các chuỗi mã tương tự trong các tệp văn bản, sau đó tạm thời thay thế chúng để các tệp nhỏ hơn.
Cách này phù hợp để nén CSS và HTML, vì các tệp này thường có mã và khoảng trắng lặp lại.
Hầu hết các máy chủ web có thể nén các tệp ở định dạng Gzip trước khi gửi chúng đi, bằng cách gọi module của bên thứ ba hoặc sử dụng các đoạn chương trình tích hợp. Theo Yahoo, cách này có thể giảm thời gian tải xuống khoảng 70%.
10. Sử dụng CDN
Ngoài máy chủ lưu trữ trang web của bạn, bạn cũng có thể sử dụng các mạng máy chủ khác để giảm thời gian tải trang.
Khi trang web của bạn được lưu trữ trên một máy chủ, mỗi người dùng truy cập sẽ gửi yêu cầu đến cùng một máy chủ đó.
Điều này có nghĩa là khi trang web có mức lưu lượng truy cập cao, thời gian xử lý mỗi yêu cầu sẽ tăng lên, làm chậm thời gian tải cho tất cả các yêu cầu.
Khi thấy rằng thời gian lưu lượng truy cập cao bắt đầu ảnh hưởng trực tiếp đến tiềm năng tăng trưởng cho doanh nghiệp của bạn, có nghĩa là cần thay đổi.
Ngoài ra, đối với người dùng ở xa máy chủ, thời gian tải lâu hơn vì thông tin có khoảng cách di chuyển xa hơn - ngay cả khi bạn không gặp vấn đề về lưu lượng truy cập.
CDN, hay Mạng phân phối nội dung, có thể giúp bạn loại bỏ các vấn đề này. CDN là cách tăng traffic cho website.
Với CDN, bạn lưu trữ trang web của mình trên mạng máy chủ toàn cầu. Khi một trình duyệt người dùng yêu cầu các tệp từ trang web của bạn, yêu cầu đó sẽ được chuyển đến máy chủ gần nhất.
11. Tối ưu hóa hình ảnh
Hình ảnh chiếm một phần lớn dung lượng tải trang trên các website. Việc tối ưu hóa hình ảnh không chỉ giúp giảm thời gian tải trang mà còn cải thiện trải nghiệm người dùng.
Khi nói về tối ưu hóa hình ảnh, lựa chọn định dạng hình ảnh là rất quan trọng. Các định dạng như JPEG, PNG và WebP có những ưu điểm và nhược điểm riêng.
- JPEG: Là định dạng phổ biến cho hình ảnh với nhiều màu sắc. JPEG thường được sử dụng cho ảnh chân dung hoặc hình ảnh phong cảnh. Tuy nhiên, JPEG có thể làm mất một số chi tiết do nén.
- PNG: Định dạng này hỗ trợ độ trong suốt và giữ nguyên chất lượng hình ảnh nhưng lại có kích thước tệp lớn hơn so với JPEG. Thích hợp cho các hình ảnh cần độ nét cao hoặc biểu tượng.
- WebP: Đây là định dạng mới hơn với khả năng nén tốt hơn mà vẫn giữ được chất lượng. WebP có thể giúp giảm kích thước tệp hình ảnh lên đến 30% so với JPEG và PNG.
12. Sử dụng caching hợp lý
Caching là một trong những kỹ thuật hiệu quả nhất để tăng tốc độ website. Bằng cách lưu trữ tạm thời nội dung của website, người dùng sẽ không phải tải lại trang mỗi khi truy cập.
Caching có thể diễn ra ở nhiều cấp độ:
- Browser caching: Khi người dùng truy cập website, trình duyệt sẽ lưu trữ một số tệp (như CSS, JS) để lần truy cập tiếp theo không phải tải lại.
- Server caching: Caching phía máy chủ giúp giảm tải cho máy chủ bằng cách lưu trữ kết quả của các truy vấn cơ sở dữ liệu.
- Content Delivery Network (CDN): Là hệ thống phân phối nội dung bằng cách lưu trữ các bản sao tĩnh của website (như hình ảnh, video, file CSS/JS...) trên nhiều máy chủ đặt tại nhiều vị trí địa lý khác nhau. Khi người dùng truy cập, nội dung sẽ được tải từ máy chủ CDN gần nhất, giúp tăng tốc độ tải trang và giảm tải cho máy chủ gốc.
Kiểm tra hiệu quả của caching: Sau khi cài đặt caching, bạn nên kiểm tra tốc độ tải trang để đảm bảo rằng nó thực sự cải thiện. Sử dụng các công cụ như Google PageSpeed Insights hay GTmetrix để theo dõi hiệu suất.
13. Tối ưu hóa database
Một cơ sở dữ liệu không được tối ưu hóa có thể gây ra những vấn đề nghiêm trọng về tốc độ tải trang. Thường xuyên dọn dẹp cơ sở dữ liệu sẽ giúp loại bỏ các bản ghi không cần thiết và làm giảm kích thước cơ sở dữ liệu.
- Xóa bản nháp và bình luận rác: Các bản nháp và bình luận không mong muốn có thể chiếm khá nhiều dung lượng trong cơ sở dữ liệu.
- Giới hạn lưu trữ phiên bản: Nếu website của bạn lưu trữ nhiều phiên bản của cùng một bài viết, hãy giới hạn số lượng phiên bản để tiết kiệm không gian.
Tuy nhiên trước khi tiến hành bất kỳ thay đổi nào trong cơ sở dữ liệu, hãy chắc chắn sao lưu dữ liệu để nếu có sự cố xảy ra bạn vẫn có thể khôi phục lại dữ liệu của mình.
14. Tối ưu hóa font cần thiết
Fonts có thể ảnh hưởng đáng kể đến tốc độ tải trang. Việc sử dụng quá nhiều font hoặc font không tối ưu có thể làm giảm hiệu suất tổng thể của website.
Khi chọn font, bạn nên cân nhắc giữa tính thẩm mỹ và hiệu suất. Một số font phổ biến như Google Fonts có thể giúp bạn có được sự cân bằng giữa đẹp mắt và nhanh chóng.
- Sử dụng font system: Font hệ thống là những font có sẵn trên hầu hết các thiết bị, ví dụ như Arial, Helvetica. Sử dụng font hệ thống sẽ giúp tránh việc tải thêm tệp font.
- Chọn font nhẹ: Những font đơn giản, ít chi tiết sẽ tải nhanh hơn so với những font phức tạp.
Ngoài ra, việc sử dụng quá nhiều font khác nhau có thể làm tăng kích thước trang và thời gian tải. Hãy tối ưu hóa số lượng font mà bạn sử dụng bằng cách giới hạn số lượng kiểu chữ, sử dụng weight một cách tối ưu.
15. Loại bỏ các plugin gây chậm website
Việc sử dụng quá nhiều plugin không chỉ làm nặng website mà còn có thể gây ra xung đột và tốn tài nguyên hệ thống. Để loại bỏ các plugin đầu tiên bạn cần đánh giá hiệu suất plugin hiện có xem nó có thực sự cần thiết hay không và tiếp theo tìm giải pháp thay thế.
Bước tiếp theo nữa bạn cần sử dụng các công cụ như Query Monitor hoặc P3 Plugin Performance Profiler để theo dõi hiệu suất của từng plugin. Cuối cùng luôn luôn cập nhật các plugin bạn đang sử dụng để đảm bảo chúng hoạt động tốt nhất và không gây xung đột.
