|
Chung tay xây dựng cộng đồng 
Cấp bậc: Binh nhì
Tham gia: 18/11/2019
Bài viết: 30
Đến từ: Ha Noi
Đánh giá: [0]
|
Vì vậy, tất nhiên, giảm tổng thời gian tải vẫn là ưu tiên hàng đầu để cho phép người dùng tương tác nhanh nhất có thể.
Nhưng tốc độ trang không chỉ là về tổng thời gian tải trang; đó cũng là về những gì người dùng trải nghiệm trong 3 (hoặc 15) giây đó. Điều cần thiết là xem xét hiệu quả của các trang được hiển thị.
Điều này được thực hiện bằng cách tối ưu hóa đường dẫn hiển thị quan trọng để đến lớp sơn đầu tiên của bạn càng nhanh càng tốt.
Về cơ bản, bạn đang giảm lượng thời gian người dùng dành để nhìn vào màn hình trắng để hiển thị nội dung trực quan càng sớm càng tốt (xem 0.0 bên dưới).
Kết xuất trang được tối ưu hóaVí dụ về kết xuất được tối ưu hóa so với tối ưu hóa từ Google
Có cả một quá trình về cách thực hiện việc này, được nêu trong tài liệu hướng dẫn dành cho nhà phát triển của Google (cảm ơn bạn, Ilya Grigorik), nhưng tôi sẽ tập trung vào một công cụ đặc biệt nặng nề: giảm tài nguyên chặn kết xuất.
Con đường kết xuất quan trọng là gì?
Đường dẫn kết xuất quan trọng đề cập đến chuỗi các bước mà trình duyệt thực hiện trong hành trình hiển thị trang của mình, bằng cách chuyển đổi HTML, CSS và JavaScript thành các pixel thực trên màn hình.
Về cơ bản, trình duyệt cần yêu cầu, nhận và phân tích tất cả các tệp HTML và CSS ( cộng với một số công việc bổ sung ) trước khi nó bắt đầu hiển thị bất kỳ nội dung trực quan nào.
Cho đến khi trình duyệt hoàn thành các bước này, người dùng sẽ thấy một trang trắng trống.
Cùng tham khảo kiến thức tại Seo là gì để cập nhật thông tin nhanh nhất nhé.
Các bước để kết xuất một trang
Làm thế nào để tôi tối ưu hóa nó?
Cải thiện đường dẫn kết xuất quan trọng liên quan đến việc xác định và phân tích các tài nguyên quan trọng của bạn (bất kỳ tài nguyên nào chặn kết xuất ban đầu của trang) và tìm kiếm cơ hội để:
Giảm số lượng tài nguyên quan trọng bằng cách trì hoãn các tài nguyên chặn kết xuất.
Rút ngắn đường dẫn quan trọng bằng cách ưu tiên nội dung trong màn hình đầu tiên và tải xuống tất cả các tài sản quan trọng càng sớm càng tốt.
Giảm số lượng byte quan trọng bằng cách giảm kích thước tệp của các tài nguyên quan trọng còn lại.
Bài viết này sẽ tập trung vào bước 1 - trì hoãn các tài nguyên chặn kết xuất (nghĩa là sắp xếp lại các yếu tố cho hiệu quả để tạo cảm giác như trải nghiệm nhanh hơn mà không cần xóa nội dung).
Tại sao tôi nên quan tâm?
Chà, không ai nói điều đó thẳng thắn hơn chính người đàn ông trăm đô:
Thời gian của tiền là tiền.
Dữ liệu hành vi người dùng của Google báo cáo rằng hầu hết người dùng từ bỏ một trang web chậm sau khoảng 3 giây.
Ngược lại, một nghiên cứu tốc độ trang của Unbounce cho thấy gần ba phần tư người tiêu dùng nói rằng họ sẵn sàng chờ 4 giây trở lên để tải trang.
Đưa cái gì?
Thời gian là một ảo ảnh.
Một nghiên cứu được công bố bởi Tạp chí Nghiên cứu Người tiêu dùng chỉ ra rằng có hai loại thời gian:
Thời gian khách quan: Giờ đồng hồ tiêu chuẩn.
Thời gian chủ quan: Nhận thức của người tiêu dùng về thời gian.
Tập trung quá nhiều vào thời gian khách quan có thể là vấn đề, vì con người (và người dùng thực tế của chúng ta) nổi tiếng là rất tệ trong việc ước tính thời gian.
Thời gian trôi nhanh khi bạn đang vui vẻ.
Nhận thức của mọi người về thời gian dựa trên nhiều yếu tố chủ quan.
Trong số này bao gồm cả việc họ đang ở trong trạng thái chờ đợi thụ động của người Hồi giáo hay người chờ đợi hoạt động của người hâm mộ. Về mặt kết xuất trang, chúng có thể được định nghĩa là:
Chờ thụ động: Người dùng đang nhìn vào một màn hình trắng
Chờ hoạt động: Nội dung trực quan được hiển thị trên trang
Nghiên cứu được INFORMS công bố cho thấy, ngay cả khi thời gian chờ đợi bằng nhau, những người chờ đợi thụ động đã đánh giá quá cao thời gian chờ đợi của họ bằng + 36% .
Bị động và chờ đợi chủ động
Khái niệm tương tự đã truyền cảm hứng cho việc sử dụng rộng rãi thanh tiến trình (hoặc tải) trong điện toán, vì nó được tìm thấy để giảm lo lắng, tạo ra trải nghiệm tích cực hơn cho người dùng.
Các trang web của Web không có thanh tải. Vì vậy, khi trang chậm, khách truy cập không biết liệu độ trễ sẽ là 500 mili giây hay 15 giây nữa. Có lẽ nó sẽ không bao giờ tải. Và nút quay lại nằm ngay tại đó (Andy Crestodina, Orbit Media được trích dẫn bởi Unbounce ).
Với nhiều nghiên cứu liên kết việc giảm thời gian tải trang với cải thiện KPI có giá trị (chuyển đổi, tỷ lệ thoát, thời gian trên trang web), cải thiện độ trễ của trang web đã trở thành mục tiêu kinh doanh hàng đầu của nhiều tổ chức.
Các chuyên gia SEO đang ở một vị trí duy nhất để hướng dẫn nỗ lực này, vì vai trò của chúng tôi thường là thu hẹp khoảng cách giữa các mục tiêu kinh doanh và các ưu tiên của nhà phát triển web.
Có khả năng kiểm toán một trang web, phân tích kết quả và xác định các khu vực để cải thiện giúp chúng tôi làm việc với các nhà phát triển để cải thiện hiệu suất và dịch kết quả cho các bên liên quan chính.
Quay lại Tài nguyên chặn kết xuất
Mục tiêu chính của việc tối ưu hóa đường dẫn kết xuất quan trọng là ưu tiên các tài nguyên cần thiết để hiển thị nội dung có ý nghĩa trong màn hình đầu tiên.
Để thực hiện điều này, chúng tôi cũng phải xác định và loại bỏ các tài nguyên chặn kết xuất - tài nguyên không cần thiết để tải nội dung trong màn hình đầu tiên và ngăn trang hiển thị nhanh nhất có thể.
Kết xuất CSS chặn
CSS vốn đã bị chặn kết xuất.
Trình duyệt sẽ không bắt đầu hiển thị bất kỳ nội dung trang nào cho đến khi có thể yêu cầu, nhận và xử lý tất cả các kiểu CSS.
Xem thêm: https://ggmedia.biz/google-adwords-la-gi/
Điều này tránh trải nghiệm người dùng tiêu cực sẽ xảy ra nếu trình duyệt cố hiển thị nội dung không theo kiểu.
Một trang được hiển thị mà không có CSS sẽ hầu như không sử dụng được và phần lớn (nếu không phải tất cả) nội dung sẽ cần phải được sơn lại.
Trang bị CSS bị vô hiệu hóa
Nhìn lại quá trình kết xuất trang, hộp màu xám biểu thị thời gian trình duyệt yêu cầu và tải xuống tất cả các tài nguyên CSS, do đó nó có thể bắt đầu xây dựng cây CCSOM (DOM của CSS).
Thời gian trình duyệt thực hiện việc này có thể khác nhau rất nhiều, tùy thuộc vào số lượng và kích thước của tài nguyên CSS.
Các bước để kết xuất CSS trang
Khuyến nghị chính thức của Google :
CSS CSS là một tài nguyên chặn kết xuất. Đưa nó đến máy khách sớm nhất và nhanh nhất có thể để tối ưu hóa thời gian để kết xuất lần đầu tiên.
Kết xuất JavaScript chặn
Đợi đã, còn JavaScript thì sao?
Không giống như CSS, trình duyệt không cần tải xuống và phân tích tất cả các tài nguyên JavaScript để hiển thị trang, do đó, về mặt kỹ thuật không phải là một bước bắt buộc (* hầu hết các trang web hiện đại đều yêu cầu JavaScript cho trải nghiệm của họ).
Bảo vệ quảng cáo PPC của bạn khỏi các đối thủ cạnh tranh và clickbots.
Tự động bảo vệ quảng cáo của bạn khỏi các đối thủ cạnh tranh, bot, trang trại nhấp chuột và các hình thức gian lận nhấp chuột khác. Thiết lập đơn giản. Bắt đầu thử nghiệm miễn phí ngay hôm nay.
Bắt đầu dùng thử miễn phí
QUẢNG CÁO
Tuy nhiên, khi trình duyệt gặp JavaScript trước kết xuất ban đầu của trang, quá trình kết xuất trang bị tạm dừng cho đến sau khi JavaScript được thực thi (trừ khi có quy định khác sử dụng thuộc tính defer hoặc async - nhiều hơn về sau).
Ví dụ: thêm chức năng cảnh báo JavaScript vào kết xuất trang khối HTML cho đến khi mã JavaScript được thực thi xong (khi tôi nhấp vào OK OK OK trong phần ghi màn hình bên dưới).
Ví dụ về Render Blocking Java Script
Điều này là do JavaScript có khả năng thao tác các phần tử trang (HTML) và các kiểu liên kết (CSS) của chúng.
Vì về mặt lý thuyết, JavaScript có thể thay đổi toàn bộ nội dung trên trang, trình duyệt tạm dừng phân tích cú pháp HTML để tải xuống và thực thi JavaScript chỉ trong trường hợp.
Cách trình duyệt xử lý JavaScriptCách trình duyệt xử lý JavaScript, hình ảnh từ Bits of Code
Khuyến nghị chính thức của Google :
JavaScript JavaScript cũng có thể chặn xây dựng DOM và trì hoãn khi trang được hiển thị. Để cung cấp hiệu suất tối ưu, loại bỏ mọi JavaScript không cần thiết khỏi đường dẫn kết xuất quan trọng.
Cách xác định tài nguyên chặn kết xuất
Để xác định đường dẫn kết xuất quan trọng và phân tích các tài nguyên quan trọng:
Chạy thử nghiệm bằng webpagetest.org và nhấp vào hình ảnh thác nước thác.
Tập trung vào tất cả các tài nguyên được yêu cầu và tải xuống trước dòng Bắt đầu Render Render màu xanh lá cây.
Phân tích quan điểm thác nước của bạn; hãy tìm các tệp CSS hoặc JavaScript được yêu cầu trước khi dòng màu xanh lá cây bắt đầu hiển thị dòng LINE nhưng không quan trọng để tải nội dung trong màn hình đầu tiên.
WPT Bắt đầu kết xuất dòng
Sau khi xác định tài nguyên chặn kết xuất (có khả năng), hãy kiểm tra loại bỏ nó để xem nội dung trong màn hình đầu tiên có bị ảnh hưởng hay không.
Trong ví dụ của tôi, tôi nhận thấy một số yêu cầu JavaScript đối với API Google Maps dường như không quan trọng. Nhưng đó là một ý tưởng tốt để kiểm tra loại bỏ các tập lệnh này để kiểm tra xem các yếu tố dịch chuyển trên trang web ảnh hưởng đến trải nghiệm như thế nào.
Ví dụ về kết xuất JavaScript chặn
Để kiểm tra trong trình duyệt về cách trì hoãn các tài nguyên này sẽ ảnh hưởng đến nội dung trong màn hình đầu tiên:
Mở trang trong Cửa sổ ẩn danh Chrome (cách tốt nhất để kiểm tra tốc độ trang, vì các tiện ích mở rộng của Chrome có thể làm lệch kết quả và tôi tình cờ là người thu thập các tiện ích mở rộng của Chrome).
Mở DevTools của Chrome (ctrl + shift + i) và điều hướng đến tab Yêu cầu chặn chặn trong Bảng điều khiển mạng.
Đánh dấu vào ô bên cạnh Kích hoạt yêu cầu chặn chặn và nhấp vào dấu cộng.
Nhập một mẫu để chặn (các) tài nguyên bạn đã xác định, càng cụ thể càng tốt (sử dụng * làm ký tự đại diện).
Nhấp vào Thêm Thêm và làm mới trang.
Xem thêm: https://ggmedia.biz/seo-la-gi/ để có thêm kiến thức về marketing.
Chúc các bạn thành công.
|