- vừa được xem lúc

Cách đơn giản để thay đổi code CSS cho việc giảm thời gian tải trang.

0 0 20

Người đăng: Noodle Wooden

Theo Viblo Asia

image.png

Technofunnel đã trình bày thêm một bài viết để giúp hướng dẫn bạn cách giảm thời gian tải trang bằng cách áp dụng một thủ thuật đơn giản trong HTML. Mọi người đều muốn trang của họ tải nhanh hơn. Điều này cũng giúp cung cấp hiệu suất SEO tốt hơn. Hãy xem thử cách để có thể giảm thời gian tải trang bằng cách thực hiện một vài thay đổi trong CSS.

Tác động của CSS đến thời gian tải trang

CSS là một trong những yếu tố chính ảnh hưởng đến thời gian tải trang. Bất cứ khi nào một ứng dụng gặp một tệp CSS, nó sẽ tải CSS theo thứ tự ưu tiên. Trên cơ sở CSS, CSS Object Models (CSSOM) được tạo ra. Sau khi CSSOM được tạo, nó sẽ kết hợp với DOM tree để tạo ra một “Render Tree”. Render Tree được tạo khi DOM tree được hợp nhất với CSSOM và cung cấp kiểu định dạng chính xác cho tất cả các thành phần trên trang.

Số lượng CSS trong ứng dụng càng lớn thì thời gian tạo CSSOM và hợp nhất nó với DOM để tạo Render Tree càng lớn.

Khi HTML truy xuất một tệp CSS, nó sẽ đợi tệp được tải xuống và CSSOM được tạo. Rồi parser sẽ đợi thao tác này hoàn thành. Do đó, có thể nói là CSS bị chặn hiển thị lại sau.

Sử dụng CSS không bị chặn

Để giải quyết vấn đề này, chỉ cần sử dụng vài mẹo để cải thiện hiệu suất của ứng dụng. Ta mong muốn rằng trình duyệt không nên đợi CSS được tải xuống và CSSOM được tạo trong quá trình tải trang đầu tiên. Ta có thể trì hoãn việc tạo CSSOM cho các tài nguyên CSS không quan trọng hơn. Hãy tưởng tượng chúng ta có một số CSS sẽ được áp dụng cho một mục nhất định sẽ chỉ hiển thị sau khi tải trang đầu tiên. Vì vậy, chúng ta không cần bắt trang tải phải đợi CSS được tải xuống hết và parse xong.

<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">

Đoạn mã trên chỉ định rằng giá trị “media” cho CSS là “print”, có nghĩa là CSS sẽ không được áp dụng ban đầu và sẽ được áp dụng khi người dùng cố gắng load trang. Cùng với liên kết, ta đã thêm chức năng “onload” cho biết rằng khi trang được tải, hãy thay đổi loại “media” thành “all”.

Điều này xảy ra khi trang được tải và do đó, trang không đợi tải CSS này và tạo CSSOM. Điều này làm cho trang tải nhanh hơn.

  • Thuộc tính “media =’ print ’” chỉ nên được áp dụng cho những phần tử CSS không có bất kỳ tác động nào trong quá trình tải trang đầu tiên. Các kiểu bắt buộc khi tải trang trên màn hình không thể có “media =’ print ’”.

Hãy thử áp dụng cách này cho trang web của bạn thử và để lại ý kiến nhé.

Nguồn: https://javascript.plainenglish.io/simple-css-hack-to-reduce-page-load-time-366f7aaaa3be

Bình luận

Bài viết tương tự

- vừa được xem lúc

2021, chúng ta cần tối ưu hóa việc tải hình ảnh trên web như nào?

Rất chào các bạn,. Như các bạn đã biết, trong kỉ nguyên công nghệ, song song với sự sinh ra dày đặc của các trang web mới cũng là sự biến mất của những trang web "lạc hậu" hay hoạt động kém hiệu quả.

0 0 43

- vừa được xem lúc

Cách mình "hack" được vào hẹ thống của SMAS để xem điểm.

Cách mà mình "hack" được vào hệ thống của SMAS. Thật ra dùng từ hack cũng không đúng lắm, chỉ là một vài trick để lừa hệ thống mà thôi.

0 0 124

- vừa được xem lúc

Giải thích một số JAVASCRIPT ARRAY METHOD với EMOJIS

Như chúng ta đã biết, Array trong JS có rất nhiều method tiện dụng có thể hỗ trợ chúng ta. Sau đây là một số method thông dụng được giải thích bằng các emoji. Thêm một hoặc nhiều phần tử vào sau mảng. livestock.

0 0 33

- vừa được xem lúc

Testing trong Javascript với Jest (Phần 1)

Hello 500 anh em, lại là mình đây. Chú bé coder yêu màu tím thích màu hồng và ghét sự giả dối đây .

0 0 249

- vừa được xem lúc

Áp dụng kiến trúc 3 Layer Architecture vào project NodeJS

The problem encountered. Các framework nodejs phổ biết như Express cho phép chúng ta dễ dàng tạo ra Resful API xử lí các request từ phía client một cách nhanh chóng và linh hoạt.

0 0 61

- vừa được xem lúc

Một số String methods cần biết trong javascript

String là một trong những phần quan trọng nhất trong javascript, ngoài những methods hay dùng như trim, concat, subString, toUpperCase, toLowerCase; Javascript còn cung cấp cho chúng ta rất nhiều methods hữu ích khác để thao tác và giải quyết các vấn đề dễ dàng hơn khi làm việc với String. Mặc dù nh

0 0 25