Thời gian tải trang web nhanh hơn đóng vai trò quan trọng trong trải nghiệm của người dùng và SEO, trong đó tốc độ tải trang là yếu tố quyết định chính đối với thuật toán của Google.
Nhà phát triển web front-end phải quyết định cách tốt nhất để hiển thị trang web sao cho mang lại trải nghiệm nhanh và nội dung động.
Hai phương pháp kết xuất phổ biến bao gồm kết xuất phía máy khách (CSR) và kết xuất phía máy chủ (SSR).
Mỗi trang web đều có những yêu cầu khác nhau, vì vậy, hiểu được sự khác biệt giữa kết xuất phía máy khách và phía máy chủ có thể giúp bạn kết xuất trang web phù hợp với mục tiêu kinh doanh của mình.
Google và JavaScript
Google có tài liệu mở rộng về cách xử lý JavaScript và các nhân viên Google thường xuyên cung cấp thông tin chi tiết và trả lời các câu hỏi về JavaScript thông qua nhiều định dạng khác nhau – cả chính thức và không chính thức.
Ví dụ, trong podcast Search Off The Record, có thảo luận rằng Google hiển thị tất cả các trang cho Tìm kiếm, bao gồm cả những trang có nhiều JavaScript.
Điều này đã gây ra một cuộc thảo luận đáng kể trên LinkedIn và một số thông tin rút ra từ cả podcast và các cuộc thảo luận tiếp theo là:
- Google không theo dõi chi phí để hiển thị các trang cụ thể.
- Google hiển thị tất cả các trang để xem nội dung – bất kể trang đó có sử dụng JavaScript hay không.
Cuộc trò chuyện nói chung đã giúp xóa tan nhiều huyền thoại và quan niệm sai lầm về cách Google có thể có đã tiếp cận JavaScript và phân bổ tài nguyên.
Bình luận đầy đủ của Martin Splitt trên LinkedIn về vấn đề này như sau:
“Chúng tôi không theo dõi “trang này tốn kém như thế nào đối với chúng tôi?” hay gì đó. Chúng tôi biết rằng một phần đáng kể của web sử dụng JavaScript để thêm, xóa, thay đổi nội dung trên các trang web. Chúng tôi chỉ cần kết xuất, để xem tất cả. Thực sự không quan trọng nếu một trang có sử dụng JavaScript hay không, vì chúng tôi chỉ có thể chắc chắn rằng sẽ xem tất cả nội dung sau khi nó được kết xuất.”
Martin cũng xác nhận có hàng đợi và độ trễ tiềm ẩn giữa quá trình thu thập dữ liệu và lập chỉ mục, nhưng không chỉ vì một thứ gì đó có phải là JavaScript hay không, và việc sự hiện diện của JavaScript là nguyên nhân gốc rễ khiến URL không được lập chỉ mục cũng không phải là vấn đề “mờ ám”.
Thực hành JavaScript chung tốt nhất
Trước khi đi sâu vào cuộc tranh luận về phía máy khách so với phía máy chủ, điều quan trọng là chúng ta cũng phải tuân theo các biện pháp thực hành tốt nhất chung cho cả hai cách tiếp cận này:
- Không chặn tài nguyên JavaScript thông qua Robots.txt hoặc quy tắc máy chủ.
- Tránh chặn kết xuất.
- Tránh đưa JavaScript vào DOM.
Kết xuất phía máy khách là gì và nó hoạt động như thế nào?
Kết xuất phía máy khách là một phương pháp tương đối mới để kết xuất trang web.
Nó trở nên phổ biến khi các thư viện JavaScript bắt đầu tích hợp nó, trong đó Angular và React.js là một số ví dụ tốt nhất về các thư viện được sử dụng trong kiểu kết xuất này.
Nó hoạt động bằng cách hiển thị JavaScript của trang web trong trình duyệt của bạn thay vì trên máy chủ.
Máy chủ phản hồi bằng một tài liệu HTML cơ bản chứa các tệp JS thay vì lấy toàn bộ nội dung từ tài liệu HTML.
Mặc dù thời gian tải lên ban đầu hơi chậm nhưng các trang tải tiếp theo sẽ nhanh hơn vì chúng không phụ thuộc vào trang HTML khác nhau trên mỗi tuyến đường.
Từ việc quản lý logic đến việc truy xuất dữ liệu từ API, các trang web do máy khách kết xuất thực hiện mọi thứ một cách “độc lập”. Trang sẽ khả dụng sau khi mã được thực thi vì mọi trang mà người dùng truy cập và URL tương ứng của trang đó đều được tạo động.
Quy trình CSR như sau:
- Người dùng nhập URL họ muốn truy cập vào thanh địa chỉ.
- Yêu cầu dữ liệu được gửi đến máy chủ theo URL đã chỉ định.
- Khi khách hàng yêu cầu trang web lần đầu tiên, máy chủ sẽ gửi các tệp tĩnh (CSS và HTML) đến trình duyệt của khách hàng.
- Trình duyệt của khách hàng sẽ tải xuống nội dung HTML trước, sau đó là JavaScript. Các tệp HTML này kết nối JavaScript, bắt đầu quá trình tải bằng cách hiển thị các ký hiệu tải mà nhà phát triển xác định cho người dùng. Ở giai đoạn này, trang web vẫn chưa hiển thị cho người dùng.
- Sau khi JavaScript được tải xuống, nội dung sẽ được tạo động trên trình duyệt của máy khách.
- Nội dung web sẽ hiển thị khi khách hàng điều hướng và tương tác với trang web.
Kết xuất phía máy chủ là gì và nó hoạt động như thế nào?
Kết xuất phía máy chủ là kỹ thuật phổ biến hơn để hiển thị thông tin trên màn hình.
Trình duyệt web gửi yêu cầu thông tin từ máy chủ, tìm nạp dữ liệu cụ thể của người dùng để điền vào và gửi trang HTML được hiển thị đầy đủ đến máy khách.
Mỗi khi người dùng truy cập một trang mới trên trang web, máy chủ sẽ lặp lại toàn bộ quy trình.
Sau đây là cách tiến hành từng bước của quy trình SSR:
- Người dùng nhập URL họ muốn truy cập vào thanh địa chỉ.
- Máy chủ sẽ gửi phản hồi HTML đã sẵn sàng để hiển thị tới trình duyệt.
- Trình duyệt hiển thị trang (bây giờ có thể xem được) và tải xuống JavaScript.
- Trình duyệt thực thi React, do đó làm cho trang có thể tương tác được.
Sự khác biệt giữa kết xuất phía máy khách và phía máy chủ là gì?
Sự khác biệt chính giữa hai phương pháp kết xuất này nằm ở thuật toán hoạt động của chúng. CSR hiển thị một trang trống trước khi tải, trong khi SSR hiển thị một trang HTML được kết xuất đầy đủ khi tải lần đầu.
Điều này mang lại lợi thế về tốc độ cho kết xuất phía máy chủ so với kết xuất phía máy khách, vì trình duyệt không cần xử lý các tệp JavaScript lớn. Nội dung thường hiển thị trong vòng vài mili giây.
Các công cụ tìm kiếm có thể thu thập dữ liệu trang web để SEO tốt hơn, giúp lập chỉ mục trang web của bạn dễ dàng. Khả năng đọc được dưới dạng văn bản này chính xác là cách các trang web SSR xuất hiện trên trình duyệt.
Tuy nhiên, kết xuất phía máy khách là lựa chọn rẻ hơn cho chủ sở hữu trang web.
Nó làm giảm tải cho máy chủ của bạn, chuyển giao trách nhiệm hiển thị cho máy khách (bot hoặc người dùng đang cố gắng xem trang của bạn). Nó cũng cung cấp các tương tác trang web phong phú bằng cách cung cấp tương tác trang web nhanh sau khi tải ban đầu.
Ít yêu cầu HTTP được gửi đến máy chủ hơn khi sử dụng CSR, không giống như trong SSR, nơi mỗi trang được hiển thị từ đầu, dẫn đến quá trình chuyển đổi giữa các trang chậm hơn.
SSR cũng có thể bị quá tải khi máy chủ phải xử lý lượng lớn yêu cầu cùng lúc từ nhiều người dùng khác nhau.
Nhược điểm của CSR là thời gian tải ban đầu dài hơn. Điều này có thể ảnh hưởng đến SEO; trình thu thập thông tin có thể không đợi nội dung tải xong và thoát khỏi trang web.
Cách tiếp cận hai giai đoạn này làm tăng khả năng nhìn thấy nội dung trống trên trang của bạn bằng cách thiếu nội dung JavaScript sau lần đầu tiên thu thập và lập chỉ mục HTML của trang. Hãy nhớ rằng, trong hầu hết các trường hợp, CSR yêu cầu một thư viện bên ngoài.
Khi nào sử dụng kết xuất phía máy chủ
Nếu bạn muốn cải thiện khả năng hiển thị trên Google và xếp hạng cao trên các trang kết quả của công cụ tìm kiếm (SERP), kết xuất phía máy chủ là lựa chọn số một.
Các trang web học trực tuyến, thị trường trực tuyến và các ứng dụng có giao diện người dùng đơn giản với ít trang, tính năng và dữ liệu động đều được hưởng lợi từ kiểu kết xuất này.
Khi nào sử dụng kết xuất phía máy khách
Kết xuất phía máy khách thường được ghép nối với các ứng dụng web động như mạng xã hội hoặc trình nhắn tin trực tuyến. Điều này là do thông tin của các ứng dụng này liên tục thay đổi và phải xử lý dữ liệu lớn và động để thực hiện các bản cập nhật nhanh nhằm đáp ứng nhu cầu của người dùng.
Trọng tâm ở đây là một trang web phong phú với nhiều người dùng, ưu tiên trải nghiệm của người dùng hơn SEO.
Kết xuất phía máy chủ hay phía máy khách tốt hơn?
Khi xác định phương pháp nào là tốt nhất, bạn không chỉ cần cân nhắc đến nhu cầu SEO của mình mà còn phải xem xét cách trang web hoạt động như thế nào đối với người dùng và mang lại giá trị ra sao.
Hãy nghĩ về dự án của bạn và cách kết xuất bạn chọn sẽ tác động như thế nào đến vị trí của bạn trên SERP và trải nghiệm của người dùng trên trang web.
Nhìn chung, CSR phù hợp hơn với các trang web động, trong khi SSR phù hợp nhất với các trang web tĩnh.
Tần suất làm mới nội dung
Các trang web có thông tin rất năng động, chẳng hạn như trang web cờ bạc hoặc FOREX, cập nhật nội dung của họ mỗi giây, nghĩa là bạn có thể sẽ chọn CSR thay vì SSR trong trường hợp này – hoặc chọn sử dụng CSR cho các trang đích cụ thể chứ không phải tất cả các trang, tùy thuộc vào chiến lược thu hút người dùng của bạn.
SSR sẽ hiệu quả hơn nếu nội dung trang web của bạn không yêu cầu nhiều tương tác của người dùng. Nó ảnh hưởng tích cực đến khả năng truy cập, thời gian tải trang, SEO và hỗ trợ phương tiện truyền thông xã hội.
Mặt khác, CSR rất tuyệt vời trong việc cung cấp khả năng kết xuất tiết kiệm chi phí cho các ứng dụng web, dễ xây dựng và bảo trì hơn; tốt hơn cho Độ trễ đầu vào đầu tiên (FID).
Một cân nhắc khác về CSR là thẻ meta (mô tả, tiêu đề), URL chuẩn và thẻ Hreflang phải được hiển thị ở phía máy chủ hoặc được trình bày trong phản hồi HTML ban đầu để trình thu thập thông tin có thể nhận dạng chúng sớm nhất có thể, chứ không chỉ xuất hiện trong HTML đã hiển thị.
Cân nhắc về nền tảng
Công nghệ CSR có xu hướng tốn kém hơn để duy trì vì mức phí theo giờ cho các nhà phát triển có kỹ năng về React.js hoặc Node.js thường cao hơn so với các nhà phát triển PHP hoặc WordPress.
Ngoài ra, có ít plugin có sẵn hoặc giải pháp tích hợp sẵn cho các khuôn khổ CSR hơn so với hệ sinh thái plugin lớn hơn mà người dùng WordPress có thể truy cập.
Đối với những ai đang cân nhắc thiết lập WordPress không cần giao diện, chẳng hạn như sử dụng Frontity, điều quan trọng cần lưu ý là bạn sẽ cần thuê cả nhà phát triển React.js và nhà phát triển PHP.
Nguyên nhân là do WordPress không có giao diện người dùng phụ thuộc vào React.js cho phần giao diện người dùng trong khi vẫn yêu cầu PHP cho phần giao diện người dùng.
Điều quan trọng cần nhớ là không phải tất cả các plugin WordPress đều tương thích với thiết lập không có giao diện, điều này có thể hạn chế chức năng hoặc yêu cầu phát triển tùy chỉnh bổ sung.
Chức năng và mục đích của trang web
Đôi khi, bạn không phải lựa chọn giữa hai giải pháp này vì có các giải pháp kết hợp. Cả SSR và CSR đều có thể được triển khai trong một trang web hoặc trang web duy nhất.
Ví dụ, trên một thị trường trực tuyến, các trang có mô tả sản phẩm có thể được hiển thị trên máy chủ vì chúng là trang tĩnh và cần được các công cụ tìm kiếm lập chỉ mục dễ dàng.
Tiếp tục với thương mại điện tử, nếu bạn có mức độ cá nhân hóa cao cho người dùng trên một số trang, bạn sẽ không thể hiển thị SSR nội dung cho bot, do đó, bạn sẽ cần xác định một số dạng nội dung mặc định cho Googlebot để thu thập dữ liệu mà không cần cookie và không có trạng thái.
Các trang như tài khoản người dùng không cần phải được xếp hạng trên các trang kết quả của công cụ tìm kiếm (SERP), do đó, phương pháp CRS có thể tốt hơn cho UX.
Cả CSR và SSR đều là những cách tiếp cận phổ biến để dựng trang web. Bạn và nhóm của bạn cần đưa ra quyết định này ở giai đoạn đầu của quá trình phát triển sản phẩm.
Thêm tài nguyên:
Hình ảnh nổi bật: TippaPatt/Shutterstock
Nguồn: Searchenginejournal
