Lần đầu mở một ứng dụng web chậm vì trình duyệt phải làm từ đầu mọi việc: tìm địa chỉ máy chủ, bắt tay mã hoá, rồi tải từng tệp mã, hình ảnh, âm thanh về máy. Từ lần thứ hai, phần lớn những việc đó được bỏ qua nhờ các tầng bộ nhớ đệm, nên ứng dụng mở gần như tức thì. Bài này đi qua từng chặng của một lần mở trang, chỉ ra chặng nào tốn thời gian nhất trên mạng di động Việt Nam, và người làm ứng dụng cắt bớt từng chặng ra sao.
Một lần mở trang đi qua những chặng nào
Từ lúc bạn chạm vào đường dẫn tới lúc thấy màn hình đầu tiên, trình duyệt đi qua một chuỗi việc nối tiếp nhau. Mỗi việc nhỏ, nhưng nhiều việc phải chờ một vòng đi về giữa điện thoại và máy chủ — và chính những vòng chờ ấy cộng lại thành cảm giác “chậm”.
- Tra địa chỉ (DNS). Tên miền như appgiaitri.com phải được đổi thành một địa chỉ số. Điện thoại hỏi máy tra cứu của nhà mạng hoặc một dịch vụ tra cứu công cộng.
- Mở kết nối. Điện thoại và máy chủ chào nhau để thiết lập đường truyền.
- Bắt tay mã hoá (TLS). Hai bên trao khoá để mọi thứ sau đó được mã hoá — thứ cho bạn biểu tượng ổ khoá trên thanh địa chỉ.
- Tải trang chính. Một tệp HTML nhỏ, cho trình duyệt biết cần những gì khác.
- Tải tài nguyên. Tệp giao diện, tệp mã, phông chữ, hình ảnh, âm thanh.
- Chạy mã. Trình duyệt đọc, dịch và chạy tệp mã, dựng màn hình đầu tiên.
Ba chặng đầu gần như không phụ thuộc vào ứng dụng nặng hay nhẹ; chúng phụ thuộc vào độ trễ — thời gian một gói tin đi tới máy chủ và quay về. Ba chặng sau phụ thuộc vào dung lượng và sức máy.
Độ trễ quan trọng hơn tốc độ mạng
Nhà mạng quảng cáo tốc độ bằng megabit mỗi giây, nhưng với một lần mở trang, thứ quyết định thường là độ trễ. Lý do: tốc độ là “ống to hay nhỏ”, còn độ trễ là “đường dài hay ngắn”. Ống to mấy thì một gói tin vẫn phải đi hết đường.
Ánh sáng trong cáp quang đi khoảng hai trăm nghìn kilômét mỗi giây, nghĩa là riêng quãng đường đã tốn thời gian khi máy chủ đặt ở nước khác. Cộng thêm thời gian sóng di động tới trạm, thời gian xếp hàng ở các thiết bị mạng, một vòng đi về trên 4G thường mất vài chục phần nghìn giây, có lúc lên hàng trăm khi sóng yếu hoặc đông người dùng. Nhân con số đó với số vòng phải chờ ở các chặng trên, bạn có ngay vài trăm phần nghìn giây trước khi tải được byte nội dung đầu tiên.
Vì sao trong thang máy hay tầng hầm lại chậm hẳn
Khi sóng yếu, gói tin hay bị mất và phải gửi lại. Mỗi lần gửi lại là thêm một vòng chờ. Một trang cần hai mươi tệp, mỗi tệp gặp vài lần gửi lại, là thành chậm rõ rệt dù “vẫn còn vạch sóng”.
Những tầng bộ nhớ đệm làm lần sau nhanh hơn
Lần mở thứ hai nhanh vì trình duyệt nhớ rất nhiều thứ từ lần đầu. Có ít nhất bốn tầng nhớ, từ gần tới xa:
| Tầng | Nhớ gì | Bỏ qua được chặng nào |
|---|---|---|
| Kho service worker | Toàn bộ khung ứng dụng: trang chính, mã, hình | Gần như tất cả, mở được cả khi mất mạng |
| Bộ nhớ đệm HTTP của trình duyệt | Từng tệp kèm “hạn dùng” do máy chủ ghi | Tải tài nguyên, nếu tệp còn hạn |
| Bộ nhớ tra địa chỉ | Tên miền nào ứng với địa chỉ số nào | Tra địa chỉ |
| Phiên mã hoá đã có | Khoá đã trao ở lần trước | Rút ngắn bắt tay mã hoá |
Tầng thứ hai là chỗ người làm ứng dụng có nhiều quyền nhất. Mỗi tệp gửi về được ghi kèm một dòng hướng dẫn kiểu “giữ tệp này một năm, đừng hỏi lại”. Tệp mã có số phiên bản trong tên thì dặn giữ thật lâu, vì sửa mã là đổi tên tệp; còn trang chính thì dặn hỏi lại mỗi lần, để luôn biết có bản mới hay không.
Nén: gửi ít byte hơn cho cùng một nội dung
Tệp mã và tệp giao diện là chữ, mà chữ thì lặp lại rất nhiều — cùng một tên biến, cùng một từ khoá xuất hiện hàng trăm lần. Máy chủ nén chúng trước khi gửi, trình duyệt giải nén khi nhận. Hai cách nén phổ biến là gzip (cũ, ở đâu cũng có) và Brotli (mới hơn, thường nén nhỏ hơn với tệp chữ). Với tệp mã, nén thường giảm còn khoảng một phần ba tới một phần năm kích thước gốc.
Ảnh và âm thanh thì khác: chúng đã được nén sẵn theo định dạng riêng (JPEG, WebP, MP3, Opus…), nén thêm lần nữa gần như không được gì. Muốn ảnh nhẹ hơn, người làm phải chọn đúng định dạng và đúng kích thước ngay từ đầu — không gửi ảnh rộng ba nghìn điểm ảnh cho một ô hiển thị rộng ba trăm.
Một mẹo khác là không gửi âm thanh chút nào. Các ứng dụng của AppGiaiTri tạo phần lớn tiếng động ngay trên máy bằng Web Audio thay vì tải tệp ghi âm, nên phần tải lần đầu nhẹ hơn hẳn.
Mạng phân phối nội dung: đưa tệp lại gần người dùng
Nếu máy chủ gốc ở xa, mỗi vòng đi về đều dài. Cách giải quyết phổ biến là mạng phân phối nội dung (CDN): một mạng lưới máy chủ đặt ở nhiều thành phố trên thế giới, giữ bản sao các tệp tĩnh. Điện thoại ở Hà Nội sẽ được nối tới điểm gần nhất thay vì máy chủ gốc. Nhiều nhà cung cấp lớn có điểm đặt tại hoặc gần Việt Nam, nhưng nhà mạng nào được nối tới điểm nào thì tuỳ thoả thuận kết nối của từng bên, nên cùng một trang có thể nhanh với mạng này mà chậm hơn với mạng khác.
Mạng phân phối còn lo luôn phần bắt tay mã hoá ở điểm gần bạn, và hỗ trợ các giao thức mới như HTTP/2 và HTTP/3, cho phép tải nhiều tệp song song trên một kết nối. HTTP/3 chạy trên nền QUIC, giảm số vòng chờ khi mở kết nối và chịu mất gói tin tốt hơn — đúng thứ mạng di động cần.
Người làm ứng dụng cắt bớt chặng nào
Gom lại, đây là bảng kiểm mà một ứng dụng web nhẹ thường đi qua:
- Ít tệp hơn: gộp các tệp nhỏ, bỏ thư viện không thật cần.
- Tệp đầu tiên thật nhỏ: chỉ tải đủ để hiện màn hình đầu; phần còn lại tải sau khi bạn đã thấy giao diện.
- Đặt hạn dùng đúng: tệp có phiên bản giữ lâu, trang chính luôn hỏi lại.
- Bật nén chữ: gzip hoặc Brotli cho mã và giao diện.
- Ảnh đúng cỡ, đúng định dạng.
- Phông chữ có chọn lọc: mỗi kiểu phông là một tệp riêng; tiếng Việt cần đủ dấu nên dễ nặng.
- Service worker cất sẵn khung ứng dụng cho lần sau.
Bạn làm gì khi ứng dụng web mở chậm
Phía người dùng cũng có vài việc đáng làm, theo thứ tự từ dễ tới khó:
- Đợi lần đầu tải xong hẳn. Thoát ra giữa chừng thì lần sau lại phải tải lại phần dở.
- Thêm ứng dụng ra màn hình chính. Lần mở sau đi thẳng vào kho đã cất.
- Thử đổi giữa Wi-Fi và 4G. Wi-Fi quán cà phê đông người có khi chậm hơn 4G.
- Tắt chế độ tiết kiệm dữ liệu nếu trình duyệt đang bật, vì nó có thể chặn tải trước hoặc nén lại ảnh.
- Kiểm tra VPN hay ứng dụng chặn quảng cáo. Chúng kéo đường đi qua nước khác, cộng thêm độ trễ.
Câu hỏi thường gặp
Vì sao lần đầu mở ứng dụng web chậm, lần sau nhanh?
Lần đầu, trình duyệt phải tra địa chỉ, bắt tay mã hoá và tải mọi tệp. Lần sau, các tệp đã nằm trong bộ nhớ đệm hoặc kho service worker, nên phần lớn chặng chờ được bỏ qua.
Mạng 4G mạnh vạch mà vẫn tải chậm là vì sao?
Vạch sóng nói về cường độ tín hiệu, không nói về độ trễ hay độ đông của trạm. Trạm đông người, hoặc đường đi tới máy chủ dài, vẫn làm mỗi vòng chờ lâu hơn dù sóng mạnh.
CDN là gì?
CDN là mạng lưới máy chủ đặt ở nhiều nơi, giữ bản sao các tệp tĩnh của trang web. Người dùng được nối tới điểm gần nhất, nên tệp tới nhanh hơn so với tải từ một máy chủ ở xa.
Xoá bộ nhớ đệm có làm ứng dụng web nhanh hơn không?
Thường là ngược lại: lần mở kế tiếp sẽ chậm như lần đầu vì phải tải lại hết. Chỉ nên xoá khi ứng dụng bị kẹt bản cũ hoặc hiển thị lỗi, và nên xoá riêng trang đó.
HTTP/3 có giúp gì trên điện thoại không?
Có, nhất là khi mạng chập chờn. HTTP/3 cần ít vòng chờ hơn để mở kết nối và một gói tin bị mất không làm cả loạt tệp phải đứng đợi như giao thức cũ.
