Render Blocking CSS
White

KawaiNT viết ngày 24/12/2015

Hôm nay, mình giới thiệu một kỹ thuật nhỏ để làm tăng tốc độ load trang web của chúng ta nhanh hơn. Đó là “Render Blocking CSS”

1. Render Blocking CSS là gì?

Render Blocking Css gồm một số kỹ thuật nhỏ như: nén kích thước hình ảnh, gom file css, để những thuộc tính css cần thiết. Những kỹ thuật này sẽ làm tốc độ load trang tăng lên một cách đáng kể, nhanh chóng.
Lưu ý: các mã css trong thẻ style chúng ta sẽ đưa vào trong một file css và liên kết nó vào trang web thông qua thẻ link. Và thẻ link này nên được đặt trên thẻ body.

2. Nén kích thước hình ảnh

Sử dụng công cụ: TinyJPG (tinyjpg.com) đối với hình ảnh có đuôi là jpg và TinyPNG (tinypng.com) với hình ảnh có đuôi là PNG.
Đây là hình ảnh trước và sau khi được nén lại
Before alt text
After alt text
Như ta đã thấy, trước và sau khi nén hình ảnh thì chất lượng hình ảnh không hề bị giảm đi nhưng dung lượng đã giảm đi 51% so với kích thước ban đầu. Với một trang web có quy mô lớn thì số lượng hình ảnh là khá cao. Và khi chúng ta nén các hình ảnh lại thì dung lượng được giảm đi là rất lớn.

3. Gom file CSS

  • Chất lượng các trang web ngày được cải tiến mạnh mẽ. Nhiều kỹ thuật được đưa vào, và chúng ta không thể bỏ qua đó là kỹ thuật Responsive. Với mỗi kích thước màn hình khác nhau thì cách thể hiện của trang web cũng khác nhau. Vì thế nên khi thiết kế CSS thì mỗi kích thước màn hình sẽ có file css tương ứng. Khi nhúng các file CSS này vào trang web thông qua thẻ link thì số lượng stylesheet nhiều. Ta nên gom các file này lại với nhau thành một file để trang web không stylesheet nhiều lần.
  • Sử dụng Google Font Chúng ta nên nhúng font bằng Google Font. Ưu điểm của Google Font là rất nhanh và đảm bảo. Là host của Google nên tốc độ rất nhanh, ổn định và giảm băng thông cho host. Vào trang web: http://www.google.com/fonts để chọn font mình thích. Có rất nhiều nha.

Lưu ý: Chúng ta không nên nhúng quá nhiều font, vì nhúng font nghĩa là người dùng phải tải font về, nhúng các font nặng chắc chắn sẽ làm tăng thời gian tải trang. Mặc khác, một trang web mà có quá nhiều font thì sẽ gây khó chịu cho người đọc và thật sự không phải là một trang web chuyên nghiệp
Ví dụ minh họa
Chúng ta đang chọn font Oswald
Khi chỉ chọn font với kích thước 300 tốc độ load trang là 13.
alt text
Khi chọn hai kích thước 300 và 400 thời gian load trang tăng lên gấp hai lần
alt text
Khi chọn cả ba kích thước thời gian load trang tăng lên gấp 3 lần
alt text

  • Thêm điều kiện vào thẻ link
    Chúng ta nên để thêm điều kiện cho thẻ link như điều kiện về media screen, min-width. Để xác định loại mà hình, loại thiết bị, kích thước trước khi tải về để giảm số lượng request
    Đối với media screen: Kích thước màn hình có nhiều loại như: 320, 480, 600, 800,…. Khi chúng ta quy định điều kiện về kích thước màn hình thì đối với kích thước màn hình nào sẽ tải về file CSS tương ứng mak không cần phải tải các file khác. Tốc độ load trang nhanh.

    Có thể sử dụng công cụ webpagetest để kiểm tra.

    4. Để những thuộc tính CSS cần thiết trong file html

    5. Script Load CSS

    Chèn đoạn script để chỉ định sau khi load xong file CSS mới load file JS. Trang web hiển thị chỉ cần file index.html và file CSS là đủ. Vì vậy nên để file CSS load trước sau đó mới tới file JS thì tốc độ load trang sẽ tăng lên khá nhiều

    <head>
    ...
    <script>
      function loadCSS( href, before, media ){ ... }
      loadCSS( "path/to/mystylesheet.css" );
    </script>
    <noscript><link href="path/to/mystylesheet.css"
                rel="stylesheet"></noscript>
    ...
    </head>
    

    Link hàm loadCS: https://github.com/filamentgroup/loadCSS/blob/master/loadCSS.js

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

KawaiNT

3 bài viết.
7 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
17 9
Web Performance là gì ? Chất lượng cuộc sống ngày một nâng cao và hiện đại hơn. Công nghệ cũng ngày càng phát triển hơn trước như cơ khí, điện tử,...
KawaiNT viết 2 năm trước
17 9
White
4 6
Một kỹ thuật không thể thiếu trong quá trình cải tiến tốc độ load trang đó là Render Block Javascript. Đây là thành phần quan trọng thứ 2 sau CSS....
KawaiNT viết 2 năm trước
4 6
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
3 bài viết.
7 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!