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 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.
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
Còn nữa…