Categories Tối ưu CSS Tối ưu JavaScript

Tuyến hiển thị quan trọng trong tăng tốc độ website

đường dẫn render quan trọng

Tuyến hiển thị quan trọng là gì?

Tối ưu những sự kiện này đem lại kết quả tăng tốc website đáng kể.

tuyến hiển thị quan trọng

Tuyến hiển thị quan trọng có thể làm được điều rất kỳ diệu…

Nó cho bạn khả năng biến các trang web lớn với nhiều tài nguyên nặng nề tải nhanh hơn, ngay cả khi so sánh với một trang nhỏ với ít tài nguyên hơn! Tôi thực sự thích điều này.

Vì hầu hết các trang web đều có nhiều thành phần khác nhau, nên không phải lúc nào bạn cũng có thể loại bỏ mọi thứ để làm trang web tải nhanh hơn được.

Nếu bạn có lần nào đấy tự hỏi “Tôi có thể làm được điều gì nữa để làm trang web tải nhanh hơn không?” hoặc “Google hy vọng các trang tải xong trong một giây như thế nào?” thế thì khái niệm tuyến hiển thị quan trọng là dành cho bạn đấy.


Tối ưu hóa Tuyến hiển thị quan trọng

tuyến hiển thị

Để cho rõ ràng, chúng ta sẽ thống nhất định nghĩa của một số thứ sau:

  • Quan trọng / Critical – Cực kỳ cần thiết;
  • Hiển thị / Render – Trong trường hợp của chúng ta trang web “đã được render” khi nó hiển thị cho người duyệt web;
  • Đường dẫn / Path – Chuỗi các sự kiện dẫn đến trang web của chúng ta được hiển thị trên trình duyệt;
  • Giao diện thấy đầu tiên / Initial view – còn được biết đến với tên “màn hình đầu tiên / phía trên đường biên fold / above the fold”, giao diện thấy đầu tiên là phần hiển thị của trang web mà người dùng thấy- trước khi có bất kỳ hành động cuộn chuột (hoặc “vuốt vuốt”) nào.

Nói cách khác tuyến hiển thị là một chuỗi các sự kiện xảy ra để làm trang web của bạn hiển thị trên trình duyệt.

Vì hầu như mọi trang web trong thế giới internet đều thực hiện các bước không cần thiết để render trang nên đây là nơi bạn có thể thực hiện việc tối ưu hóa một cách rõ ràng và thực sự có ý nghĩa.

Tối ưu hóa Tuyến hiển thị quan trọng có thể giúp bạn giảm vài giây thời gian tải trang web! Nó thực sự là con đường nhanh nhất để làm trang web có tốc độ tốt hơn.


Đường dẫn / Path

thứ tự đường dẫn

Để hiển thị trang web, trình duyệt phải nhận được tất cả các tài nguyên được gọi bởi trang web đó. Một ví dụ đơn giản sẽ là trang web có một ảnh, một file CSS và một file JavaScript.

Hãy cùng nhìn vào đường dẫn mà trang này phải đi trước khi nó được hiển thị…

  1. Trình duyệt tải tệp HTML về;
  2. Trình duyệt đọc tệp HTML và thấy nó có một file CSS, một file JavaScript và một ảnh;
  3. Trình duyệt bắt đầu tải ảnh;
  4. Trình duyệt quyết định là nó không thể hiển thị trang web khi mà vẫn chưa có CSS và JavaScript;
  5. Trình duyệt tải file CSS và đọc nó để đảm bảo rằng không có thứ gì khác được gọi;
  6. Trình duyệt vẫn quyết định rằng nó không thể hiển thị trang web cho đến khi nó có JavaScript;
  7. Trình duyệt tải file JavaScript về và đọc nó để đảm bảo rằng không có thứ gì khác được gọi;
  8. Giờ thì trình duyệt quyết định hiển thị trang web.

Đường dẫn ở trên là của một trang web vô cùng đơn giản, bây giờ hãy thử tưởng tượng đường dẫn của bạn trông như thế nào.

Bạn có thể có các nút bấm mạng xã hội, một vài file CSS, một vài file JavaScript, nhiều ảnh, widget, và cũng có thể kèm thêm cả audio và video nữa.


Điều này có nghĩa là tuyến hiển thị của bạn trông giống như một đống lộn xộn rất lớn

đường dẫn render lộn xộn

Hầu hết các trang web có Tuyến hiển thị rất tệ hại, lý do là vì họ gọi rất nhiều thứ mà trình duyệt bắt buộc phải tải trước khi trang web có thể được hiển thị.

Đây sẽ là lợi thế của bạn so với những người khác! Nếu bạn tạo ra được trang web nhanh hơn so với các đối thủ, bạn sẽ khiến người truy cập cảm thấy vui vẻ (lợi thế xoáy vòng nữa là Công cụ tìm kiếm rất thích điều này).


Render / Xuất trang / Hiển thị trang

render trang / xuất trang / hiển thị trang

Có một số kiểu tài nguyên nhất định mà website gọi đang thực sự chặn hiển thị trang web. Hai thứ phổ biến nhất là các file CSS và các file JavaScript.

Không thành vấn đề là bạn có bao nhiêu file, trình duyệt của người dùng phải tải xuống và phân tích cú pháp của từng file một trước khi nó có thể hiển thị bất kỳ điều gì cho người duyệt web. Hãy xem xét một kịch bản rất phổ biến sau.

Các blog WordPress sử dụng theme (giao diện). Hầu hết mọi theme WordPress đều có một vài file CSS.

Nhiều cái có sáu hoặc bảy file CSS (đây là lý do tại sao pagespeed lại có hướng dẫn gộp các file CSS bên ngoài/external). Tất cả các CSS đó có thể được đưa vào trong một tệp, nhưng khi bạn sử dụng một giao diện, thực tế là nó có vài file CSS. Vì thế trước khi blog của bạn có khả năng hiển thị chỉ một ký tự thôi, trình duyệt phải tải và phân tích (đọc) từng file này, điều đó có nghĩa là có sáu hoặc bảy vòng tới máy chủ chỉ để bắt đầu reder trang. Điều này được biết đến với thuật ngữ CSS chặn hiển thị.

Trong khi chuyện này diễn ra, người duyệt web nhìn chằm chằm vào màn hình trống bởi vì không có thứ gì được hiển thị cho họ cho đến khi những bước “quan trọng” được hoàn thành xong.

quá nhiều tệp cần tải mới render được trang

Nhưng thậm chí sau khi CSS của bạn được tải xong, trang blog cũng chưa thể render bởi vì theme WordPress cũng cần phải có một số file JavaScript nữa. Trang sẽ không thể hiển thị vì trong nhiều trường hợp nó vẫn đang tiếp nhận các file JavaScript tải về. Điều này được biết đến với thuật ngữ JavaScript chặn hiển thị.

Vì thế một render điển hình của một trang blog WordPress có thể yêu cầu đến 20 lượt chỉ để nhận được các tệp tin CSS và JavaScript chính. Nhưng đợi đã, giờ bạn còn có các nút bấm mạng xã hội hoặc cả widget nữa…à vâng, với những thứ đó, chúng cũng cần một vài tài nguyên CSS và JavaScript nữa đấy.

Bạn có thể phải tải hàng tá thứ trước khi trang của bạn có thể hiển thị cho người dùng. Chẹp chẹp. Để biết trang của bạn đang tải những thứ gì, hãy sử dụng công cụ kiểu như Google PageSpeed Insights, hoặc nhấn phím F12 khi duyệt web trên Chrome.

Nhưng đó không chỉ là câu chuyện của riêng WordPress đâu, tôi chỉ sử dụng nó như ví dụ thôi. Điều khá phổ biến trong thế giới web nói chung là cần phải có nhiều yêu cầu tài nguyên cho giao diện thấy đầu tiên (nội dung thuộc màn hình đầu tiên) của một trang web.

Những sự chậm trễ trong việc render nội dung của bạn có thể kiểm soát được, đó là ý nghĩa của việc chúng ta cần tìm hiểu tuyến hiển thị quan trọng (critical render path).


Quan trọng / Critical

nội dung trên màn hình đầu tiên rất quan trọng

Đến thời điểm này có vẻ tôi đã vẽ ra một bức tranh rất ảm đạm rồi phải không, nhưng tin tốt là bạn có thể gọi cả triệu thứ cho trang web và nó có thể có đến 12000 bức ảnh, 200 tệp JavaScript mà trang vẫn có thể tải trong một hoặc vài giây. Ngạc nhiên chưa!


Điều này được thực hiện như thế nào vậy?

Bằng cách hiểu được điều gì là quan trọng cho trang web của bạn trong mục tiêu hiển thị được nội dung ở màn hình đầu tiên.


Tối ưu hóa cho Tuyến hiển thị

Có ba thứ thực sự cần phải tập trung vào:

  • Tối thiểu hóa số lượng các tài nguyên quan trọng;
  • Tối thiểu hóa dung lượng các byte quan trọng;
  • Tối thiểu hóa độ dài của đường dẫn quan trọng.

Ví dụ

Hình ảnh – Thậm chí nếu một trang web có 12000 hình ảnh, cũng chỉ có một hoặc hai ảnh có khả năng hiển thị ở màn hình đầu tiên (quan trọng) mà thôi. Điều đó có nghĩa là nếu chúng ta tập trung vào hai bức ảnh đó, chúng ta có thể làm cho thời gian tải trang cho giao diện thấy đầu tiên nhanh hơn rất nhiều. Chúng ta đâu phải hiển thị ra cùng lúc cả 12000 bức ảnh, chúng ta chỉ cần hiển thị một hoặc hai cái trong giao diện thấy đầu tiên. Các ảnh còn lại có thể trì hoãn hoặc sử dụng lazy load.

Tệp Javascript – Chúng ta cũng có thể có đến 12000 tệp, nhưng chúng ta chỉ phải tải những tệp quan trọng cho mục tiêu hiển thị phần đầu của trang, và 11,998 tệp javascript khác có thể được trì hoãn (deferred).

Tệp CSS – Cách hay nhất để tối thiểu hóa CSS không phải là thông qua công cụ trực tuyến nào đâu – mà là người thiết kế giao diện cần phải không lạm dụng CSS ngay từ lúc ban đầu khi viết mã. Có khả năng trang của bạn sử dụng ít hơn 20% số lượng CSS mà bạn có. Có một số lựa chọn. Bằng cách kết hợp một vài tệp CSS ngoài, bạn có thể giảm số lượng tệp cần thiết để render. Bạn cũng có thể inline (nội tuyến) một số đoạn mã CSS nhỏ vào trong HTML. Không thành vấn đề là CSS của bạn lớn hay nhỏ, người dùng sẽ phải chờ đợi cho đến khi nó được tải xong mới nhìn thấy trang web.

Phần bên dưới, chúng ta sẽ nhìn sâu hơn vào một trang web và xem xem chúng ta có thể sử dụng kiến thức của mình về tuyến quan trọng (critical path) như thế nào để làm trang tải nhanh hơn đáng kể.


Hiểu về biện pháp đo lường tốc độ trang

Khi Google nói về tốc độ trang, họ không có ý nói về tổng toàn bộ thời gian cần phải trải qua để tải đầy đủ một trang web đâu. Cái họ quan tâm là về mức độ nhanh chóng mà người dùng bắt đầu thấy được nội dung trên trang (các nội dung ở màn hình đầu tiên) và mức độ nhanh chóng của sự kiện người dùng bắt đầu có khả năng tương tác với nội dung đó.

Lý do Google bắt đầu sử dụng tốc độ trang như một yếu tố xếp hạng là dựa trên mong muốn làm hài lòng người dùng của họ. Chẳng phải là trải nghiệm hay ho gì nếu ai đó tìm kiếm trên Google và máy tìm kiếm này trả về trang web chậm chạp khiến người dùng phải chờ đợi rất lâu.

Mọi người than phiền với Google về điều này, họ nói rằng “Tại sao bạn lại gửi cho tôi một trang mà tải quá là chậm như vậy chứ?”. Điều này gọi là tốc độ nhận thức (perceived speed).

Nếu người dùng thấy một trang trắng trống trơn trong 10 giây trong khi chờ nó tải về, điều này là rất tệ và Google không muốn đưa trang này vào trong kết quả tìm kiếm. Nếu một trang web tương tự hiển thị thông tin trong ngay giây đầu tiên, nó sẽ là một trải nghiệm tuyệt vời, và Google sẽ muốn đưa nó vào trong kết quả tìm kiếm.

Mối quan tâm chính của chúng ta khi nói về tốc độ trang web là làm sao để nội dung có trước mặt người dùng càng sớm càng tốt trong màn hình đầu tiên.


Một ví dụ thực tế về tối ưu hóa Tuyến hiển thị quan trọng

Trang web mà bạn đang đọc ngay lúc này sẽ được dùng làm ví dụ của chúng ta (ý là trang varvy.com – không phải trang kiencang.net, speed.family mặc dù 2 trang này cũng được tối ưu hóa tốc độ khá tốt)…Tang Varvy được render trong chưa đến nửa giây, trong khi nó cũng thực hiện khá nhiều điều mà trang của bạn cũng đang làm.

Tôi sẽ cho bạn thấy hai phiên bản của trang web này, một phiên bản không được tối ưu hóa cho tuyến quan trọng và một phiên bản (trang mà bạn đang đọc) được tối ưu hóa.

Điều này sẽ đem đến cho bạn sự so sánh rất tốt về mức độ mà những thay đổi có thể tạo ra. Nó cũng minh họa tốt cách Google đo đạc tốc độ tải trang, cái cũng hữu dụng và thú vị nếu biết. Trang này sử dụng một số file JavaScript khá phổ biến, nào cùng xem trang này đang sử dụng những gì…

  • Một số ảnh kích cỡ lớn.
  • CSS.
  • Google Analytics.
  • Google plus badge (nó thực hiện rất nhiều lệnh gọi javascript).
  • Viglinks (một trong những cách tôi kiếm tiền từ Varvy).

Tóm lại, tôi đang sử dụng những thành phần chính mà mọi người hay dùng để tạo lên trang web (ảnh, CSS, công cụ phân tích, chia sẻ mạng xã hội, kiếm tiền). Tôi đoán có khả năng cao là bạn cũng đang dùng các thành phần tương tự trên trang của bạn. Bằng cách tối ưu hóa tuyến quan trọng, tôi thực sự giảm được tất cả những lời gọi và tất cả những thành phần đó thành một yêu cầu. Điều mà tất cả các trình duyệt đều cần để hiển thị trang này là tệp HTML. Với một tệp tin nhỏ chỉ 12KB, trang này được tải gần như ngay lập tức.

Mặt khác, phiên bản chưa được tối ưu của trang này tạo ra hàng tá các yêu cầu và vòng lặp (round trips) tới máy chủ, nó sẽ gây tốn thời giản tải hơn trên máy bàn, và còn gây tốn thời gian tải hơn nữa trên thiết bị di động…Nhưng bạn cần phải lưu ý là cả hai phiên bản của trang này đều có nội dung giống hệt nhau!

Hãy xem kết quả thế nào…


Phiên bản chưa được tối ưu hóa của trang này

phiên bản chưa tối ưu hóa của trang


Thời gian để render: 1,3 giây

Lưu ý: Trang này chỉ hiển thị cho người dùng sau khi tất cả các file đã được tải về (được đại diện bằng thanh dọc mảnh màu xanh da trời/blue ở phía phải xa nhất của bức ảnh).

Trên hình cũng cho thấy có bao nhiều lời gọi mà phiên bản chưa tối ưu hóa thực hiện. Phiên bản chưa tối ưu hóa cần đến 1,5 giây để tải. Đó chỉ là một trang tĩnh đơn giản, nhưng cũng cần đến 20 yêu cầu để tải trang. Điều đó có nghĩa là trang cần phải đợi 20 thành phần tải xong trước khi người dùng có thể nhìn thấy nó.

Để ý rằng, đầu tiên trình duyệt tải HTML, sau đó là CSS, tiếp đến là các ảnh, và các tệp JavaScript, tất cả phải được tải về và phân tích cú pháp trước khi người dùng nhìn thấy trang.

Phiên bản chưa tối ưu hóa này không bỏ bất cứ công sức nào vào việc tạo ra tuyến hiển thị quan trọng, và về cơ bản tất cả các tệp được gọi phải tải về trước khi trang được render (hiển thị).


Phiên bản được tối ưu của trang này

phiên bản được tối ưu

Thời gian để render: 0,25 giây (250 mili giây)

Lưu ý: Trang hiển thị cho người dùng sau khi một file được tải xong (được đại diện bởi thanh dọc mảnh màu xanh ở gần giữa bức hình).

Phiên bản đã được tối ưu của trang này (cái mà bạn đang đọc) chỉ tạo ra một yêu cầu để hiển thị nội dung cho màn hình đầu tiên. Trang được hiển thị cho người dùng nhanh hơn đến năm lần (được đại diện bằng thanh dọc mảnh màu xanh trong biểu đồ) dù chúng có nội dung tương tự. Nó vẫn tải hầu hết các tệp giống nhau, vẫn sử dụng cùng JavaScript, nhưng sự khác biệt là thời gian để hiển thị nội dung cho người dùng, sự chênh lệch không hề nhỏ. Trang này nhanh hơn đến hơn năm lần so với trang chưa được tối ưu hóa. Nếu trang của bạn cần đến 5 giây để tải về, bạn có khả năng thay đổi để nó mất chưa đến một giây. Chuyện cứ như là phép thuật vậy đúng không nào?


Làm thế nào tôi kiểm tra được trang web của mình?

Tôi nhìn vào trang của mình và tự hỏi bản thân:

Trang này thực sự chỉ cần tải cái gì cho nội dung thuộc màn hình đầu tiên?

Tôi nhận ra rằng đó chính là những thứ nằm trên màn hình đầu tiên:

  • Logo (một hình ảnh nhỏ).
  • Ảnh lớn đầu tiên.
  • CSS của tôi (file ngoài).

Điều đó có nghĩa là những thứ sau đây sẽ không cần thiết có khung hình đầu tiên…

  • Google plus badge.
  • Những ảnh nằm phía bên dưới.
  • Đoạn mã phân tích Google Analytics.

Sau đó tôi nhìn vào biểu đồ phân tích những gì mà trang đang tải (waterfall) và tôi nhận ra những thứ không cần tải là những thứ thực sự lại mất thời gian nhất để tải về. Vì thế nếu tôi bằng cách nào đó chuyển những thứ không cần thiết ra ngoài Tuyến hiển thị quan trọng, thì trang của tôi sẽ tải được nhanh hơn đáng kể.


Các phần việc tối ưu hóa mà tôi đã thực hiện

Kết quả của những tối ưu hóa này là tôi đã lấy ra mọi thứ có thể khỏi Tuyến hiển thị. Trong thực tế, tôi đã giảm Tuyến hiển thị chính xuống chỉ một lời gọi, tệp HTML thực tế, cái có mọi thứ trình duyệt cần để render trang web cho người dùng.


CSSOM

Một khía cạnh dưới góc độ kỹ thuật hơn để xem Tuyến hiển thị quan trọng đó là bổ sung hiểu biết cơ bản về CSSOM.

CSSOM là cụm từ viết tắt cho CSS Object Model.

CSSOM về cơ bản là một bản đồ của các style/định dạng cụ thể nào phải được áp dụng vào các phần khác nhau của trang web theo dạng thức CSS.

Nếu bạn thực sự muốn tinh chỉnh mọi thứ, hiểu biết về CSSOM là nền tảng để làm điều đó.


Các điểm mấu chốt

  • Tuyến hiển thị quan trọng là chuỗi các sự kiện cần để hiển thị trang web.
  • Cách để cải thiện Tuyến hiển thị là loại bỏ hoặc trì hoãn các lời gọi không cần thiết trong việc hiển thị nội dung trên màn hình đầu tiên.
  • Hầu hết các đoạn mã JavaScript mà bạn sử dụng có thể được trì hoãn tải sau khi xem trang (những thứ như nút bấm mạng xã hội, mã phân tích, vân vân).
  • Tôi đã tiến hành kiểm tra trang của mình bằng cách xem xem cái gì trang thực sự cần tải cho nội dung thuộc màn hình đầu tiên (từ đó xác định cái gì trang không cần tải mà vẫn hiển thị được nội dung thuộc màn hình đầu tiên).
  • Tôi sử dụng công cụ tối ưu hóa tốc độ trang kiểu như Google PageSpeed Insights để loại bỏ hoặc trì hoãn tất cả những thứ mà trang không cần tải cho nội dung nằm trong màn hình đầu tiên.

(Dịch từ bài viết: Critical rendering path – Tác giả: Patrick Sexton – Website: Varvy)

Back to Top