Cải Thiện FCP (first contentful paint) – Vẽ nội dung đầu tiên

Cải Thiện FCP (first contentful paint) – Vẽ hiển thị bất kì thứ gì đó cho người dùng.

Đây là chỉ số quan trọng nhất trong lĩnh vực tối ưu tốc độ load website, chỉ số full load có bao nhiêu giây thì tôi cũng không quan tâm lắm, nhưng tôi quan tâm và tập trung vào tối ưu FCP.

Tôi thường đánh giá tốc độ website của ai đó không bao giờ xem bằng chỉ số full load mà là chỉ số FCP (first contentful paint) – vẽ nội dung đầu tiên.

Bạn thử hỏi xem website: amazon.com chỉ số full load là bao nhiêu? nó hơn 9 giây đến 20 giây, nhưng ai cũng khen gợi là trang amazon load nhanh lắm.

Đó chính là chỉ số FCP (first contentful paint) amazon làm rất tốt chỉ số này, vì vậy amazon toàn đứng trong top website có ux tốt tầm thế giới.

Người dùng cảm thấy nhanh quan trọng hơn nhanh thực tế.

Nhiều người vẫn chưa hiểu được giá trị thực sự của FCP toàn tập trung vào chỉ số full load xong có những nhiều người đi xóa nội dung của mình đi để cho trang chủ load nhanh, điểm cao các thứ đó là một sai lầm.

Bạn có tự hỏi tại sao google pagespeed insight không có chỉ số full load (thời gian tải đầy đủ) họ toàn tập trung chủ lực vào FCP, mình biết rất nhiều người phàn nàn vì điều đó, có khi nào google pagespeed insight làm vớ vẩn?.

Sự thật là với sự nhiều tiền và nền tảng của google thì để tạo ra đo lường chỉ số full load cho google pagespeed insight đối với họ dễ như ăn kẹo, nhưng họ không làm vì nó có nguyên nhân của họ sợ khi họ có chỉ số full load nhiều người sẽ hiểu nhầm vào cắt giảm html những nội dung,những ảnh hay video… để có được điểm số cao, đó là lý do họ không làm, mình nghĩ như vậy google làm rất đúng đắn thực sự rất tốt.

Nếu ai hỏi hay phàn nàn:

Tại sao google pagespeed insight không có đo lường full load mà chỉ toàn tập trung vào FCP (first contentful paint). thì như mình đã giải thích nhé.

FCP (first contentful paint) thời gian dưới bao nhiêu giây là hợp lý?.

Google khuyến cáo là website load dưới 2 giây, họ bảo là dưới 2 giây nhưng không biết chi tiết là cái gì, nhiều người hiểu rằng là chỉ số full load tải đầy đủ, nhưng thực chất là 2 giây là đây không phải là chỉ số full load mà là chỉ số first contentful paint hãy nhìn những thứ công cụ google hỗ trợ cho việc tối ưu tốc độ load là google pagespeed insight và lighthouse.

Theo cá nhân mình FCP tốt nhất là phải dưới 1 giây, vì nguyên tắc trong tâm lý học nếu quá 1 giây rảnh rỗi não người sẽ tiếp tục nảy sinh ra một suy nghĩ khác, dưới 1 giây giúp người dùng vẫn luôn luôn tập trung vào website của bạn. ( dưới 1 giây để giữ sự tập trung của người dùng).

FCP dưới 2 giây như google khuyến cáo thì đơn giản và chung chung phù hợp với nguồn lực của mọi người hơn nhưng mục tiêu dưới 1 giây thì thử thách hơn rất nhiều và cần rất kiến thức và sự đầu tư thì mới có thể đạt được.

Mục tiêu là dưới 1 giây FCP.

Mình sẽ chia sẻ những cách tối ưu chỉ số first contentful paint – Vẽ nội dung đầu tiên.

Vẽ nội dung đầu là gì

Vẽ nội dung đầu tiên thuật ngữ chuyên ngành là first contentful paint gọi viết tắt là (FCP).

vẽ nội dung đầu tiên được kích hoạt là nội dung nào đó được xác định trong DOM. Đây có thể là văn bản, hình ảnh hoặc kết xuất css, javascript…

Thời gian này nhằm mục đích đại diện cho trải nghiệm của người dùng của bạn, vì nó xác định khi nội dung thực tế đã được tải trên trang và không chỉ là bất kỳ thay đổi nào – nhưng nó thuông thường có thể trùng thời điểm với First Paint.

Đây là chỉ số trọng tâm của tối ưu, tăng tốc độ website, đây là chỉ số cung cấp cho bạn ý tưởng về thời điểm người dùng của bạn nhận được thông tin đầu tiên nào đó (văn bản, hình ảnh, v.v.)

Hữu ích hơn nhiều cho việc đánh giá hiệu suất so với khi nền đã thay đổi hoặc một kiểu đã được áp dụng .

Nếu trình duyệt không thực hiện sơn (tức là. Html dẫn đến trang trống), thì thời gian sơn có thể bị thiếu.

Tầm quan trọng vẽ nội dung đầu tiên:

Mình sẽ lấy ví dụ cho các bạn dễ hiểu hơn về tầm quan trọng của vẽ nội dung đầu tiên:

Trường hợp 1: bạn đi vào một nhà hàng đông đúc và một thành phố xa lạ, khi bước vào nhà hàng có ngay một người phục vụ bạn vào chào đón bảo anh ngồi đây anh ăn gì để em ghi vào, thời gian làm món ăn của bạn mất 15 phút = tổng thời gian bạn có đồ ăn là 15 phút.
Trường hợp 2: bạn đi vào một nhà hàng đông đúc và một thành phố xa lạ, khi bước vào nhà hàng không ai thèm để ý đến bạn, cũng không thấy ai ra hỏi han gì, bạn tự ngồi vào bạn ăn mất 5 phút, xong có người phục vụ bàn hỏi ra hỏi anh ăn gì em ghi, thời gian làm món ăn của bạn hết 5 phút = tổng thời gian bạn có đồ ăn là 10 phút.

Bạn cứ nghĩ người dùng sẽ thích trường hợp 1 hay trường hợp 2 hơn, đương nhiên nói góc độ trải nghiệm người dùng thì trường 1 sẽ tốt hơn trường hợp 2, còn so sánh 15 phút và 10 phút tốc độ nhận được đồ ăn thì người dùng cũng không để ý nắm người dùng vẫn kiên nhẵn chờ đợi vì có lý do động lực để chờ đợi, còn trường hợp 2 thì 5 phút đầu tiên không ai thèm để ý người dùng suy nghĩ chắc quán ăn này đông quá rồi chắc không phục vụ mình đâu chắc người khác đặt bàn gì đó hết rồi chắc phải ra quán khác, hay suy nghĩ kiểu gắt hơn chắc họ đéo thèm phục vụ mình rồi.

so sánh 5 phút đánh đổi thì cái nào sẽ tốt hơn: trường hợp 1 hay trường 2 ( nó giống với việc so sánh giữa chỉ số Vẽ nội dung đầu tiên và chỉ số tải đầy đủ cho ví dụ trên).

Một ví dụ mình kể chuyển hy vọng bạn cũng đã hiểu tầm quan trọng của chỉ số vẽ nội dung đầu tiên rồi, đó cũng là lợi ích của công việc tối ưu tốc độ load website nhanh so với chậm nhưng nó cũng chỉ đóng góp một nhỏ trong thành công của kinh doanh mà thôi, khi website của bạn load nhanh giống với việc nhân viên bán hàng của bạn chào niềm nở chào đón khách hàng và chậm thì ngược lại, tuy nhiên điều đó cũng chỉ đóng góp một phần nhỏ trong việc có bán được hàng đó không, để bán được hàng có rất nhiều yếu tố như: chất lượng sản phẩm, hậu mãi, bảo hành, giá cả … có vô vàn yếu tố để kinh doanh thành công – tốc độ load website có đóng góp đến sự thành công của doanh nghiệp.

khi người dùng cứ nhìn mãi vào một màn hình trắng không có gì người dùng sẽ nảy sinh ra một suy nghĩ chắc website này dừng hoạt động, hay đang vấn đề gì rồi thôi mình thoát ra website khác xem thử xem.

(đây là một điểm chết người quan trọng bật nhất trong tăng tốc độ website, nó là lý do tại sao bạn cần phải tối ưu tốc độ load website đó, tác động trực tiếp đến túi tiền của bạn, người dùng chạy sang website đối thủ thì toang hẳn)

Trong môi trường internet thì cón khắc nhiệt hơn ngoài đời:

vì một trường internet người dùng có rất nhiều lựa chọn và tính cạnh tranh rất khắc nhiệt, nên yêu cầu người dùng sẽ cao hơn ở ngoài đời thực rất nhiều.

Như mình nói bên trên mục tiêu sẽ phải là dưới 1 giây.(để người dùng không thể nảy sinh suy nghĩ thứ 2), hãy gieo hy vọng trước để người dùng còn hy vọng.

1 dưới giây thì cũng không phải là câu chuyên đơn giản và dễ làm đâu, nhưng mình sẽ hướng dẫn chia sẻ bạn có thể cải thiện tốt nhất FCP vẽ nội dung đầu tiên.

wp tăng tốc hiện tại chỉ số này giao động từ 200ms đến 500ms, cũng gọi là đủ trình độ để chia sẻ hướng dẫn tối ưu Vẽ nội dung đầu tiên tuy nhiên trong bài viết này mình sẽ chia sẻ những cái nào quan trọng ảnh hưởng đến chỉ số này nhất còn nếu bạn muốn được nhanh kinh khủng hơn nữa thì bạn cần phải áp dụng nhiều kỹ thuật khác của wp tăng tốc chia sẻ ngoài bài viết này thì chắc chắn website của bạn sẽ rất nhanh và có thể nhanh hơn website của mình.

Link bài kiểm tra bạn có thể tham khảo qua: https://gtmetrix.com/reports/wptangtoc.com/stg8223D
Tôi thường đánh giá tốc độ website của ai đó không bao giờ xem bằng chỉ số full load mà là chỉ số FCP (first contentful paint) – vẽ nội dung đầu tiên.

Hay đơn giản trong các gói dịnh vụ tăng tăng tốc website WordPress của tôi cam kết là dưới 1 giây hay dưới 2 giây cam kết gì đấy nó là chỉ số (first contentful paint) – không phải là chỉ số full load.

Công cụ đo lường chỉ FCP – Vẽ nội dung đầu tiên

Công cụ đo lường chỉ số FCP (first contentful paint) tốt nhất:

Cá nhân mình thì thấy yêu thích có 4 công cụ:

• google pagespeed insight
• gtmetrix
• lighthouse
• Chrome Dev tool (công cụ yêu nhất của mình và mình thường sử dụng để đo lường FCP)

Công cụ chỉ để tham khảo chứ không phải là mục tiêu.

Bạn đừng quá tập trung vào duy nhất một công cụ nào đó, hãy sử dụng cả 3 để cho bạn có một cái góc nhìn tham khảo tốt hơn, thông số chỉ ở mức tương đối không phải là tuyệt đối.

Cần lưu ý: với công cụ gtmetrix bạn cần phải đăng ký một tài khoản miễn phí thì mới sử dụng được xem tính năng FCP (first contentful paint) nhé và lựa chọn sever gần người dùng nhất là sever hongkong, còn 2 công cụ google pagespeed insight và lighthouse thì đơn giản rồi họ làm hoàn toàn tự động bạn không cần settings cài đặt gì hết thế là chạy được luôn.

Chrome Dev tool là công cụ mình sử dụng hàng ngày và nó giúp mình kiếm cơm, nó là công cụ cực kì chuẩn xác và yêu thích nhất để đo lường FCP, mình thường dùng để đo lường giả lập ở thị trường Việt Nam tốc độ mạng ~~40mbps mình sẽ giả lập thực tế tốt nhất xem FCP của mình khoảng bao nhiêu và bạn đặt tốc độ mạng siêu chậm để xem FCP chuyển động website của bạn như thế nào.

Chrome Dev tool bạn cần phải tính toán cân nhắc tốc độ mạng trung bình của thị trường mình phục vụ, giả sự bạn phục vụ thị trường Việt Nam năm 2020 thì tốc độ mạng trung bình là ~~40mbps (tệp khách hàng tốc độ mạng bla bla, Ví dụ như bạn phục vụ những người yêu công nghệ thì tốc độ mạng sẽ khác khi bạn phục vụ những người cao tuổi ~~ 40mbps là con số chung chung ở Việt Nam tại thời điểm hiện tại), bạn sử dụng Chrome dev giả lập tốc độ mạng và kiểm tra xem là là chuẩn xác nhất.

Để sử dụng Chrome Dev tool hiệu quả, đo lường chuẩn xác yêu cầu tốc độ mạng internet của bạn đường truyền phải mạnh, bạn là webmasster, nhà phát triển, lập trình viên thì cài này không phải bàn rồi.

Hướng dẫn cải thiện FCP – Vẽ nội dung đầu tiên

Mục tiêu của chúng ta là dưới 1 giây, càng dưới thì càng tốt như dưới 600ms cũng càng tốt, vì người dùng thì sẽ có chênh lệnh tốc độ mạng và thời điểm khác so với khi bạn sử dụng công cụ speed test

Làm thật tốt TTFB

FCP = TTFB + thời gian render.

TTFB (Time to first byte) là một chỉ số quan trọng của quá trình tăng tốc độ load website là tiền đề nền tảng để có được chỉ số FCP thực sự tốt.

Bạn có thể tham khảo bài viết này: 11 Thủ thuật cải thiện TTFB cho WordPress

Giống như việc bạn làm sếp giao deadline trong 1 tuần bạn cần phải hoàn thành công việc làm đăng video đăng lên youtube video này về chủ đề này, ngày thứ nhất đầu tiên bạn đã quay xong chỉnh sửa xong hết rồi còn 6 ngày sau thì bạn nhẹ nhàng render video và đăng video lên youtube thế là xong và ngược lại sếp giao 1 tuần mà đến ngày thứ 6 mà bạn chưa làm bất cứ thứ gì thì đến ngày cuối cùng thì rất loạn và khó có thể làm tốt nhất được.

Hãy làm thật tốt những chỉ số ở trước FCP.

Ở khâu này thì mình thích gtmetrix hơn đó là luôn luôn tại sao gtmetrix rất nhiều người tăng tốc độ load website yêu thích, vì chính là điểm này này.

Máy chủ khỏe và sử dụng Litespeed webserver

Hiện tại litespeed websever đang là phần mềm máy chủ có tốc độ tốt nhất hiện, đặc biệt là FCP khi sử dụng luôn luôn vượt trội hơn nhiều so với những webserver khác như nginx, apache…

Hãy cố gắng nếu bạn sử dụng share hosting thì hãy chọn nhà cung cấp share hosting đang sử dụng công nghệ webserver Litespeed, mà thực sự cái này đơn giản lắm mà gần như bây giờ nhà cung cấp share hosting cũng đang sử dụng webserver litespeed vì litespeed webserver giúp nhà share hosting đó nâng cao được lợi nhuận của họ hơn, để chọn được nhà cung cấp chạy trên litespeed websever thì hiện tại rất là đơn giản.

Trong trường hợp bạn là nhà quản trị viên máy chủ, thì bạn có thể cài đặt litespeed, mình có seria hướng dẫn từ a đến z cài đặt openlitespeed cho WordPress bạn có thể tham khảo: Hướng dẫn cài đặt openlitespeed

Xóa tài nguyên chặn hiển thị HTML

file javascript hay css và file ảnh và iframes video… bạn cần defef trì hoãn hoặc nâng cao hơn thì bạn hãy lazy load nhé.

Thuật ngữ là Xóa tài nguyên chặn hiển thị HTML, những nguyên lý hoạt động của trình duyệt phân tích từ trên xuống dưới từ trái qua phải gặp file nào thì nó sẽ dừng lại quá trình phân tích html để phân tích cái file kia làm chậm quá trình phân tích html, mình cần khai báo trì hoãn hay lazy load để khi trình duyệt phân tích html xong thì mới cần phân tích đến mấy file kia.

• Với CSS thì mình có bài viết hướng dẫn về tải không đồng và tạo css quan trọng.
• Với javascript thì mình có bài viết là tối ưu javascript toàn tập.
• Với iframes video thì mình có bài viết là tăng tốc độ nhúng video youtube cho WordPress
• Với Lazy load ảnh thì mình có bài viết là Lazy load ảnh là gì, hướng dẫn sử dụng.

Có một chiến lược cải thiện cũng rất hay cải thiện rất tốt FCP nhưng mà mình ít khi sử dụng. Đó chính là cho toàn bộ CSS vào nội tuyến không sử dụng file nữa.

Ưu điểm của phương pháp đưa css nội tuyến toàn bộ html:

• Giúp cải thiện rất nhiều về FCP.
• Rất dễ dàng cho lập trình viên khi chỉnh sửa lại code css không phải lo lắng việc trình duyệt cache phải clear xóa gì đó, khiến người dùng lỗi này lỗi kia nữa chưa nhập được file css mới giao diện mới, nạp css html vào cái ăn ngay rồi
• không liên quan lắm cách này còn hack được điểm số google pagespeed insight nữa cơ.

Nhược điểm đưa css nội tuyến toàn bộ html:
không cung cấp file qua cdn được và không thể cache được trình duyệt vì vậy rất cần máy chủ của bạn phải rất khỏe thì mới có thể làm được với tuyệt chiêu này.

Nếu css bạn cho nội tuyến toàn bộ mà html mà dưới 100kb html và máy chủ của bạn siêu khỏe nhà trả có gì tiền thuê máy chủ mạnh thì cũng có thể cân nhắc sử dụng kỹ thuật này.

Chiến thuật này đang áp dụng cho điện máy xanh ( điện máy xanh họ nhiều tiền máy chủ thoải mái không phải nghĩ) nhưng 98% website WordPress thì mình khuyên không nên sử dụng bạn có thể sử dụng css tải không đồng bộ thì vẫn an toàn hơn. mình chỉ khuyến kích dùng kỹ thuật này khi bạn tối ưu landding page và bạn chưa có giao thức http/2 thì có thể triển khai rất tốt còn website thì ăn tài nguyên máy chủ thì kinh khủng lắm.

Nhưng đó cũng là một cách khá hay nhưng mình khuyên thì vẫn không nên sử dụng nếu bạn đáp ứng được những tiêu chí mình vừa nói trên thì có thể làm, kỹ thuật này có thể áp dụng tùy thuộc vào ngành nghề kinh doanh của bạn thì mới có thể triển khai được hay không.

Cách nội tuyến toàn bộ css vào html cho WordPress

Lựa chọn một themes WordPress chất lượng

Đây là khâu rất quan trọng, themes theo mình với WordPress gần như themes nói hơi quá thì giống như kiểu mã nguồn luôn rồi.

Mình chỉ muốn nói là hãy chọn themes thật sự chất lượng, chất lượng mã hóa code các thứ không phải là chất lượng themes giao diện đẹp các thứ các thứ.

Themes góp phần rất lớn đến FCP.

Mình sẽ giới thiệu những themes mà mình cảm thấy hài lòng về khả năng code của đội ngũ của họ.

1: Themes genesis ( đây là themes số một về mã hóa, mỗi tội nó không dễ sử dụng chỉ dành cho những người đam mê công nghệ có thời gian nghiên cứu về themes này, genesis không sinh ra một phát ăn ngay được đâu)
2: Themes: Generatepress ( đây là themes dành cho blog mà theo mình thấy miễn phí và tốt nhất dành cho những bạn không biết lập trình không có nhiều thời gian nghiên cứu nó thực sự rất tốt)
3: Themes: astra ( Đây là themes cũng rất tốt, nhẹ và nhanh)
4: Themes: OceanWP ( nhẹ và nhanh có sẵn page builder thích hợp cho những bạn yêu cầu cao về sự dễ dùng mà chất lượng rất tốt)

Mình giới thiệu sơ sơ về 4 themes mà mình cảm thấy hài lòng về tốc độ nhất, và thế giới cũng đã công nghệ về khả năng mã hóa của nó rất đỉnh.

Giảm phần tử dom

Phần tử dom góp phần lớn trong quá trình FCP, công việc tăng tốc chỉ số FCP bạn cần giảm phần tử dom.

Dom càng nhiều trình duyệt của người dùng sẽ render càng lâu, và ngược lại dom website của bạn càng ít thì trình duyệt của người dùng sẽ render ít vất vả hơn.

Hướng dẫn giảm phần tử dom

Những themes và page builder chất lượng là 2 yếu tố tác động đến phần tử dom nhiều nhất.

Bạn chỉ cần lựa chọn themes chất lượng hoặc loại bỏ page builder nếu bạn là lập trình viên. – có nên sử dụng page builder không?

Hay nếu bạn không phải là lập trình viên hãy lựa chọn những page builder nào đó thực sự chất lượng.

Thứ tự load tối ưu

HTML => CSS ~ FONT => ảnh đầu tiên hiển thị thường là logo => jquery => javascript => favicon icon => ảnh bình thường

Đây là nguyên lý thứ tự tải mà mình cảm thấy rất phù hợp cho gần 80% website WordPress, không phải là tất cả website WordPress mà là đa phần có thể sử dụng được.

Cá nhân mình thì gần như mình nhận dự án cho khách hàng thì 90% đều dùng sơ đồ này mà thi triển, có một số trường hợp đặc biệt là khác thôi.

Mình vẫn đang sử dụng thứ tự tải này cho wp tăng tốc và vẫn đang cảm thấy rất tốt ưu.

Thứ tự tải tối ưu cho website WordPress

Chuyển đổi định dạng hiển thị đầu trang

Phần đầu trang thường sẽ có:

Logo
Icons (search, social media, etc.)
Banner image
Background

chuyển đổi qua base64 html hoặc chuyển đổi định dạng sang icon svg.

Có một số nhược điểm của hình ảnh nội tuyến html base64:

html base64 sẽ làm tăng kích thước của hình ảnh (thường là 30%).
Hình ảnh nội tuyến không thể sử dụng được bằng CDN.

Theo kinh nghiệm của mình, nếu bạn có thể giữ kích thước trang html dưới 100 KB, hình ảnh nội tuyến base64 không phải là điều đáng lo ngại nó rất tuyệt vời. Nếu trong trường hợp ngược lại kích thước trang html của bạn trên 100kb khi sự chuyển đổi định đạng qua base64 thì tác hại hơn là tác lợi sẽ hại ngược lại bạn.

nếu chày cối thì bỏ luôn logo gõ mỗi chữ vào cách này hơi chày cối quá khuyến cáo không nên sử dụng trừ khi bạn nghiền tốc độ quá mức và ám ảnh bỏ logo cho mỗi chữ vào.

Khuyến nghị trong ux vẫn nên cho logo ở trên đầu đó vẫn chính là thương hiệu của bạn và lưu ý nếu bạn đang sử dụng lazy load thì nhớ skip lazy bỏ qua lazy load những hình ảnh màn hình đầu đi nhé nếu bạn không chuyển đổi hình ảnh nội tuyến được.

Lời khuyên nhỏ: là hãy giữ cho html của bạn dưới 100kb, hạn chế vượt quá 100kb ( đừng thủ thuật quá mức cắt giảm nội dung đi nhé thì toang đấy, dù gì tốc độ website cũng chỉ là giúp bạn kiến tiền và nội dung cũng giúp bạn kiếm tiền mà cân nhắc nhưng đừng ám ảnh tốc độ quá mức hãy tính toán)