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.
>> Có thể bạn quan tâm: [Case study] Giá trị không ngờ của CDN: Giúp phục hồi website sau tấn công xóa sổ dữ liệu
