02 Apr
Nội dung hiển thị/thuộc màn hình đầu tiên là gì?
- Nội dung hiển thị (visible content) là phần nội dung của trang web mà người dùng thấy trên màn hình đầu tiên trước khi họ có bất kỳ hành động cuộn chuột nào
- Đôi khi nó còn được gọi là “nội dung nằm trong màn hình đầu tiên“
Ưu tiên nội dung hiển thị đầu tiên (initially) cho người dùng
Các trang web có vẻ có tốc độ tải rất nhanh và nhẹ nhàng thường cũng có cùng kích cỡ như các trang web chậm, nhưng sở dĩ nó load nhanh hơn là vì các trang web đó ưu tiên cho nội dung nằm trong màn hình đầu tiên.
Người dùng yêu thích các trang web hiển thị nội dung nhanh chóng và Google cũng vậy. Bài viết này sẽ cung cấp một số hướng dẫn về cách tập trung vào nội dung nằm trong màn hình đầu tiên để bạn có được trang với tốc độ tải nhanh hơn đáng kể. Nếu bạn vào trang chuyên kiểm tra tốc độ của Google và nhận được kết quả yếu kém trong việc “ưu tiên nội dung hiển thị cho màn hình đầu tiên” thì bài viết này sẽ giúp bạn khắc phục điều đó.
Giảm dung lượng nằm trong màn hình đầu tiên
Google gợi ý hai chiến lược chính để hoàn thành điều này, và họ gợi ý cho chúng ta các cách kiểm tra tổng quan khá hiệu quả. Chúng ta sẽ đi sâu vào cả hai chiến lược.
- Cấu trúc HTML của bạn để nó tải nội dung quan trọng, nằm trong màn hình đầu tiên trước
- Giảm số lượng dữ liệu sử dụng bởi các tài nguyên của bạn
Ưu tiên cho nội dung chính
Một trong những cách nhanh nhất, đơn giản nhất và phổ biến để cải thiện tốc độ tải trang về mặt nhận thức cho người dùng là đảm bảo HTML của bạn hiển thị nội dung trước khi nó hiển thị các phần khác. Để minh họa điều này hãy xem một kịch bản rất phổ biến sau…
Trang với một cột phải/trái (sidebar)
Trong hình trên chúng ta thấy trang web có một sidebar ở bên trái và nội dung nằm ở bên phải. Chúng ta cũng thấy rằng trong HTML, sitebar được viết trước nội dung (nhìn vào đoạn mã, phần <content> màu xanh nằm sau <sitebar> màu đỏ).
Đây là ví dụ về chuyện nội dung quan trọng bị đẩy ra đằng sau các thứ khác. Lý do cần phải điều chỉnh điều này là vì nếu sidebar được viết trước trong HTML thì nó sẽ được tải đầu tiên, trước cả phần nội dung chính.
Thông thường thì sidebar sẽ chứa các quảng cáo, nút mạng xã hội và các nội dung khác dựa vào bên thứ ba. Vì thế nếu sidebar của bạn tải trước nội dung chính (main content) thì bạn sẽ thực sự bắt người dùng phải đợi để xem nội dung mà họ muốn xem. Giả dụ bạn có quảng cáo Google Adsense, nút Twitter, nút Facebook, và nút Google plus trong sidebar. Trong kịch bản này, bạn không chỉ làm chậm thời gian tải trang, bạn đang làm điều gì đó còn tồi tệ hơn. Bạn làm người dùng phải tốn thời gian hơn để xem nội dung của bạn.
Nếu các phần trong sidebar cần thời gian để tải về, trình duyệt sẽ đợi cho đến khi tất cả chúng được tải xong trước khi nó có thể hiển thị cho người dùng nội dung chính. Với người dùng đây là điều phiền toái, bực bội vì họ không đến trang của bạn để nhìn sidebar, footer hay mấy nút mạng xã hội, họ đến đây để thấy nội dung chính của bạn.
Điều này có thể thay đổi với một bước đơn giản. Nhờ thế bạn sẽ hiển thị cho người dùng nội dung chính trước.
Đặt phần nội dung trước phần sidebar
Bạn chỉ cần copy và paste phần sidebar ra đằng sau phần nội dung, trang của bạn sẽ hiển thị nội dung chính trước mà không cần phải đợi những thứ khác nằm trong sidebar.
Khi mà phần nội dung nằm trước trong HTML của bạn, nội dung sẽ được tải trước…
- Trang web của bạn tải và hiển thị nội dung của bạn
- Người dùng có thể thấy nội dung gần như ngay lập tức
- Trong khi người dùng của bạn đọc, các quảng cáo nằm ở sidebar và các nút mạng xã hội sẽ tiếp tục tải
- Người dùng cảm thấy thoải mái vì họ không cần phải chờ đợi
Đây là ví dụ về việc thay đổi cấu trúc của trang HTML để đưa nội dung quan trọng lên trước, nhưng có nhiều thứ hơn chúng ta phải làm để đảm bảo trang của chúng ta tải theo cách mà người dùng (và Google) muốn thấy trang của chúng ta tải về.
Tải nội dung nằm trên màn hình đầu tiên trước
Khái niệm về việc tải nội dung thuộc màn hình đầu tiên trước có thể gây nhầm lẫn. Để giải thích ý mà Google muốn đề cập, hãy thử nghĩ về footer (chân trang web)…
Tại sao người dùng phải đợi xem trang chỉ để bạn tải CSS, Javascript, ảnh, vân vân cho phần chân trang trong khi bạn thậm chí không chắc là người dùng sẽ cuộn chuột xuống để nhìn nó (chân trang)?
Tôi có thể tự tin để nói rằng có khá nhiều tình huống mà người xem của bạn sẽ không bao giờ nhìn xuống phần chân trang. Hãy xem các tình huống sau…
- Người dùng ghé thăm trang chủ của bạn, quan sát những gì họ đang tìm kiếm trên thanh điều hướng chính của bạn, click và chuyển sang trang khác.
- Người dùng đến trang của bạn, thấy quảng cáo và click vào nó (rời khỏi trang của bạn)
- Người dùng đang tìm kiếm sản phẩm nào đó để mua (ví dụ như tai nghe) và cuối cùng họ đang ở trên trang chuyên về tai nghe của bạn, người dùng thấy tai nghe mà họ thích và click vào ảnh để đi vào trang chi tiết về sản phẩm.
Trong tất cả các kịch bản trên, người dùng không bao giờ nhìn vào chân trang web! Tuy nhiên bạn đang làm cho người dùng phải chờ đợi bằng cách bắt họ tải một số file cho chân trang trước khi hiển thị thông tin mà họ thực sự muốn xem.
Đây là cách làm không khôn ngoan trong thế giới “mới hơn” và “nhanh hơn” của chúng ta.
Tại sao chân trang lại nằm ở cuối trang
Trong hình trên chúng ta thấy chân trang web có khá nhiều nội dung. Nhiều theme WordPress có chân trang tương tự như vậy.
Nó có chứa thông tin tác giả với hình chân dung (một ảnh cần phải tải), nó có các cột cần CSS để định dạng trong khi các phần khác của trang thì không cần, và có thể nó có twitter feed sử dụng JavaScript và bắt buộc phải có giao tiếp (tạo ra lần gọi ra bên ngoài, để nhận file bên ngoài) với một bên thứ ba – trong trường hợp này là twitter – để hiển thị thông tin.
Nói tóm lại, chân trang này có nhiều điều hay ho, nhưng trong phần lớn trường hợp, trình duyệt phải tìm ra và tải xuống tất cả các thành phần của chân trang trước khi nó tải xong trang. Điều này là không có ý nghĩa khi trang phải tải nhiều thứ mà người dùng có thể không bao giờ nhìn đến, trong khi nó làm hãm lại, ngăn không cho người dùng thấy thông tin mà họ muốn xem.
Làm thế nào để tải nội dung trong màn hình đầu tiên trước
Trong tình huống lý tưởng nhất, người dùng sẽ thấy nội dung chính của trang mà không cần phải đợi chân trang tải xong. Nhưng làm thế nào để làm được điều đó đây?
Tôi sẽ không nói dối bạn làm gì, để làm được điều này yêu cầu một số suy nghĩ và lên kế hoạch. Dù vậy thì một khi bạn đã tìm ra cách để làm nó thành công trên một trang, bạn sẽ có khả năng triển khai nó trên toàn bộ website một cách dễ dàng hơn. Nhưng bạn phải bắt đầu với một trang trước đã. Hãy xem về tổng thể cách mà trang tải thực sự diễn ra như thế nào…
Cách trình duyệt tải một trang web
Khi trang web của bạn tải, trình duyệt sẽ thực hiện một số bước để xác định trang sẽ tải như thế nào (đây là phiên bản đã được đơn giản hóa, nhưng về cơ bản đây là những gì sẽ xảy ra):
- Trình duyệt tải file HTML
- Nó phân tích cú pháp (xem xét tổng quan) trang HTML
- Nó bắt gặp một số thứ nó cần phải tải (như ảnh, các file CSS ngoài, vân vân) và tạm dừng phân tích cú pháp HTML
- Nó tải các tài nguyên bên ngoài
- Nếu tài nguyên bên ngoài là CSS hoặc JavaScript thì nó sẽ phân tích cú pháp của file
- Sau đó nó tiếp tục phân tích cú pháp HTML cho đến khi nó gặp phải nguồn tài nguyên khác mà nó phải tải về
Trong suốt quá trình này, trình duyệt sẽ cố gắng hiển thị nhiều nội dung nhất có thể, càng sớm càng tốt. Do đó có nhiều cách để đảm bảo rằng một số nội dung của trang sẽ được tải trước và hoàn thành, trước khi trình duyệt gặp rào cản là các tài nguyên bên ngoài (external resources).
Nội dung nằm trong màn hình đầu tiên có thể được ưu tiên bằng cách làm nó không cần phải dựa vào bất cứ tài nguyên bên ngoài nào, hoặc tải những tài nguyên đó sớm hơn, trước khi trình duyệt tải bất cứ thứ gì mà nó phải phân tích cú pháp.
Chúng ta sẽ xem xét vài thứ mà chúng ta đã quen thuộc, nhưng như tôi sẽ cho bạn thấy, chúng có thể được sử dụng theo cách thức tốt hơn. Những thứ mà chúng ta sẽ xem xét bao gồm…
- HTML
- CSS
- Javascript
HTML
Chúng ta đã thấy ở trên về cách thức trang HTML của bạn gọi những tài nguyên có thể ảnh hưởng đến cách trang được tải như thế nào. Những tài nguyên nằm trong HTML hầu hết sẽ được tải tuần tự (dòng đầu tiên trước, dòng thứ hai tiếp sau, vân vân), vì thế cách quan trọng nhất để ưu tiên nội dung là đảm bảo nội dung quan trọng nhất của bạn được gọi bởi HTML trước khi bạn gọi các nội dung ít quan trọng hơn khác. Để hiển thị nội dung nằm trong màn hình đầu tiên, bạn có thể cần xem xét lại một số điều cơ bản về bố cục HTML của bạn.
Đây là một bố cục rất phổ biến và giải pháp minh họa cách chúng ta có thể thay đổi cách trang web tải chỉ cần thông qua bố cục của HTML.
Vấn đề
Chúng ta có trang web có div sidebar và div nội dung chính. Nếu chúng ta cố gắng “tải nội dung nằm trong màn hình đầu tiên trước” với bố cục này, chúng ta sẽ không thể làm được, hoặc giải quyết chỉ rất hạn chế mà thôi.
Giải pháp
Hãy làm trang web của chúng ta có giao diện cũng như vậy, nhưng với một bố cục khác. Trong bố cục mới của chúng ta, chúng ta có một sidebar nằm trong màn hình đầu tiên và nội dung nằm trong màn hình đầu tiên, ngược lại, chúng ta cũng có sidebar nằm dưới màn hình đầu tiên và nội dung nằm dưới màn hình đầu tiên.
Kết quả
Giờ chúng ta đã có các thành phần nằm trong màn hình đầu tiên chia tách với các phần khác của trang, chúng ta có thể có CSS nội tuyến cho phần nằm trong màn hình đầu tiên và file CSS ngoài được tải cho cho phần CSS còn lại của website.
Sự khác biệt là giờ khi một ai đó truy cập vào trang web của chúng ta, nó sẽ tải nhanh gần như ngay lập tức bởi vì tất cả các nội dung nằm trong màn hình đầu tiên không cần phải đợi các file CSS ngoài tải xong. Điều đó sẽ dẫn chúng ta đến công việc mới cần làm, đó là…
CSS
CSS của bạn là nơi có khả năng tạo ra được nhiều điều kỳ diệu liên quan đến việc tăng tốc độ tải trang. Tôi sẽ tóm tắt ngay bên dưới, nhưng tôi cũng có viết riêng một bài chuyên sâu về việc tối ưu hóa phân phối CSS cho trang.
Một thiết lập CSS lý tưởng sẽ đẩy nhanh tốc độ trang của bạn, không làm nó chậm lại. Cách thức để làm điều đó là…
- Một (và chỉ một) file CSS ngoài
- Một khối nội tuyến cụ thể theo từng trang và cho phép nội dung trong màn hình đầu tiên tải ngay lập tức.
Bạn có thể biết được cách CSS của bạn tải như thế nào bằng cách sử dụng công cụ kiểm tra phân phối CSS: https://varvy.com/tools/css-delivery/
JavaScript
JavaScript trên trang có thể thực sự làm tốn thêm thời gian tải trang, nhưng nó không cần thiết buộc phải như vậy.
Bạn có thể trì hoãn tải JavaScript xuống cho đến khi nội dung tải xong. Đây là một vấn đề khác cần suy nghĩ nghiêm túc, nhưng nó là thứ có khả năng cải thiện lớn nhất thời gian tải của nội dung nằm trong màn hình đầu tiên, đặc biệt nếu bạn sử dụng các nút mạng xã hội như (Google+, Facebook, Twitter, vân vân) hoặc sử dụng các thư viện JavaScript như jQuery.
Kết thúc
Ưu tiên nội dung hiển thị không có một câu trả lời dễ dàng, nó yêu cầu bạn phải nhìn vào các khía cạnh của trang và nghĩ về cách để làm nó tốt hơn.
Những thứ đầu tiên cần xem xét là (một bản tóm tắt):
- HTML: Hãy đảm bảo là nội dung chính được tải trước mọi phần khác. Bố cục của trang web với nội dung nằm trong màn hình đầu tiên lúc nào cũng phải được ghi nhớ (thậm chí ngay cả khi bạn có bổ sung thêm một số div).
- CSS. Kiểm tra phân phối CSS của bạn với công cụ CSS. https://varvy.com/tools/css-delivery/
- JavaScript: Trì hoãn JavaScript cho đến khi trang tải xong (khi mà nó có thể tải). Bạn có thể hiểu thêm cách defer và async tệp JavaScript.
Một ví dụ về trang không có gọi bất cứ file bên ngoài nào
Tôi có tạo một trang hài hước (hy vọng thế) để giải thích tại sao nó lại tải rất nhanh. Trang đó đây: https://varvy.com/pagespeed/wicked-fast.html
Trang này không thực hiện bất kỳ lời gọi file bên ngoài nào. CSS và ảnh hoàn toàn nằm trong HTML, vì thế ngay sau khi file HTML tải xong, trang cũng được hiển thị. Ví dụ này đưa cho chúng ta một ý tưởng, nhưng dĩ nhiên đấy không phải là tình huống thực tế. Các trang như thế này đơn giản là không đáp ứng được hết nhu cầu của chúng ta. Dù vậy, trang là một ví dụ rất tốt để minh họa các vấn đề lớn liên quan đến tốc độ trang đến từ những cái đang được gọi bởi trang và làm thế nào nó được gọi. Chúng ta thấy rằng nếu một trang không gọi bất cứ tài nguyên bên ngoài nào, nó sẽ được tải gần như ngay tức thì.
(Dịch từ bài viết: Prioritize visible content – Tác giả: Patrick Sexton – Website: Varvy)
