Tổng quan Web Performance P1
front-end
3
Web
23
White

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

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ử, điện lạnh, may mặc,…. Một ngành công nghệ mà chúng ta không thể không nhắc đến chính là công nghệ thông tin. Với tốc độ phát triển chóng mặt, chất lượng hơn hẳn trước rất nhiều cả về nội dung bên trong và hình thức bên ngoài.

Thế kỉ 21 là thế kỉ bùng nổ sự phát triển mạnh mẽ của Internet, các công ty lớn nhỏ, văn phòng, các ngành nghề hầu như đều sử dụng Internet. Trong giờ làm việc thì thao tác với các dữ liệu, trang web; giờ giải lao mọi người lại sử dụng điện thoại để giải trí: chơi game, mua đồ trên mạng, nghe nhạc, đọc tin tức,…. Số lượng sử dụng ứng dụng lớn, yều cầu ngày một cao hơn. Vậy đâu là giải pháp để các trang web đáp ứng được nhu cầu của người dùng.

Nhiểu Developer luôn luôn cố gắng, học hỏi để tìm được những giải pháp tốt nhất nhằm nâng cao chất lượng trang web. Một trang web làm sao tốc độ tải nhanh nhất. Chất lượng hình ảnh tốt nhất, phóng to hay thu nhỏ phông chữ hay kích thước ảnh không bị vỡ. Giải pháp Web Performance sẽ đáp ứng được những mong muốn mãnh liệt đó.

Web Performance là những giải pháp nhằm tăng tốc độ load của trang web. Resize ảnh kích thước nhỏ nhất có thể. Vậy muốn trang web load nhanh nhất, ổn định nhất chúng ta nên sử dụng Web Performance.

Tại sao chúng ta phải thực hiện các giải pháp Web Performance

Giúp load trang web nhanh hơn
Chất lượng trang web tốt hơn
Khi người dùng truy cập vào trang web của bạn để tìm kiếm thông tin mà trang web load quá lâu, chờ đợi và chờ đợi, và người dùng sẽ bực bội và không thể chờ đợi thời gian quá lâu và điều tất nhiên họ sẽ chuyển qua vào một trang khác, load nhanh hơn, nhanh chóng tìm được thông tin họ đang tìm kiếm, trang web bạn đã thất bại ngay ở bước đầu tiên. Ngoài tốc độ load trang, chất lượng hình ảnh cũng rất quan trọng. Màu sắc đẹp, chất lượng ảnh tốt sẽ là một ưu điểm lớn, tạo cảm giác thân thiện thoải mái khi thao tác với trang web. Hãy là một trang web ổn định và chất lượng.

Một số giải pháp trong Web Performance

  1. Thu gọn các HTTP Requests
    Giảm thiểu số lượng request từ http gởi về server

  2. Sử dụng các mạng phân phối nội dung
    Chúng ta nên sử dụng CDN của google cho các Framework như Bootstrap, Foundation, Jquery,... thay vì để trên server

  3. Tránh để trống các thẻ src và href
    Tránh không để trống các thuộc tính trong thẻ src hoặc href

  4. Sử dụng điều khiển cache ở header
    Xác định thời gian hết hạn của Cache

  5. Sử dụng thành phần nén nội dung gzip
    Sử dụng Gzip để nén các Components như CSS và Javascript file.
    https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/optimize-encoding-and-transfer

  6. Đặt các stylesheets ở đầu trang
    Đặt các thẻ StyleSheet trong thẻ head

  7. Đặt các script ở cuối trang
    Đặt các thẻ Script trước thẻ đóng body

  8. Tránh các biểu thức CSS
    background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
    Các biểu thức CSS mạnh mẽ nhưng nguy hiểm và làm chậm quá trình load trang web

  9. Đặt css và javascipt ở bên ngoài
    Không nên để code CSS và Javascript trong file html. Chúng ta nên viết file riêng cho chúng

  10. Giảm DNS Lookups
    Giảm thiếu số lần tìm kiếm IP trên DNS. Ví dụ: ta không nên để hình ảnh trên nhiều server, khi đó số lần Lookups sẽ tăng lên rất nhiều

  11. Làm nhỏ dung lượng các file css & javascript
    Nén các file Javascript và CSS

  12. Tránh các redirects
    Tránh chuyển hướng

  13. Xóa bỏ các đoạn script trùng lặp
    Xóa bỏ các đoạn script trùng lặp

  14. Cấu hình ETags
    ETag là một chuỗi có mục đích duy nhất là xác định phiên bản cụ thể của một thành phần.
    HTTP/1.1 200 OK
    Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
    ETag: "10c24bc-4ab-457e1c1f"
    Content-Length: 12195

    Trình duyệt xác thực một thành phần thì trình duyệt đó sẽ sử dụng khóa If-None-Match để đẩy ETag về lại máy chủ gốc
    GET /i/yahoo.gif HTTP/1.1
    Host: us.yimg.com
    If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT
    If-None-Match: "10c24bc-4ab-457e1c1f"
    HTTP/1.1 304 Not Modified

  15. Sử dụng ajax với khả năng cache nội dung

  16. Sử dụng GET với ajax

  17. Giảm số lượng các DOM

  18. Không sử dụng 404s

  19. Giảm kích thước cookie

  20. Sử dụng các tên miền không cookie (cookie-free)

  21. Tránh Filter (css)

  22. Không thay đổi kích thước ảnh
    Với mỗi kích thước màn hình khác nhau, chúng ta nên có hình ảnh tương ứng. Không nên co dãn hình ảnh, như thế chất lượng ảnh sẽ không cao

  23. Make favicon.ico Small and Cacheable

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
5 4
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...
KawaiNT viết 2 năm trước
5 4
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
Bài viết liên quan
White
14 0
Jade là một template engine cho Node.js, nó khá đơn giản và biên dịch thành HTML và cực kì hữu ích cho FE developer (Ảnh) (Link) Lấy cảm hứng t...
thanh0beo viết hơn 2 năm trước
14 0
White
1 0
Giới thiệu Google Polymer Cái tên Polymer dường như còn mới với chúng ta, hôm nay, mình xin làm một bài hướng dẫn sơ về nó. Số là hồi đó có làm qu...
Võ Hoài Nam viết 2 năm trước
1 0
{{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á!