/frontend-performance

Mục lục

  1. HTML
  2. CSS
  3. Fonts
  4. Images
  5. JavaScript
  6. Server (in progress)
  7. JS Frameworks (in progress)

Giới thiệu

Hiệu suất là một chủ đề lớn, nhưng nó không chỉ là chủ đề của "back-end" hay "admin": nó cũng phụ thuộc vào Front-End.Danh sách kiểm tra hiệu suất Front-End là một danh sách đầy đủ về các yếu tố mà bạn cần kiểm tra hoặc ít nhất là phải biết đến nó, với tư cách là một lập trình viên Front-End và áp dụng vào dự án của bạn (cá nhân hay chuyên nghiệp).

Sử dụng nó như nào?

Đối với mỗi quy tắc, bạn sẽ có một đoạn giải thích vì sao quy tắc này quan trọng và làm sao để bạn có thể sửa nó. Để biết thêm thông tin sâu hơn, bạn nên tìm những link dẫn tới công cụ, các bài viết hoặc các tài liệu mà có thể hoàn thiện hơn checklist.

Tất cả những điều trong Danh sách kiểm tra hiệu suất Front-End* là yếu tố cần thiết để đạt được điểm số hiệu suất cao nhất nhưng bạn sẽ tìm thấy một chỉ số để giúp bạn cuối cùng ưu tiên một số quy tắc khác. Có 3 mức độ ưu tiên:

  • ![low][low] có nghĩa là mục đó có độ ưu tiên thấp.
  • ![Medium][medium] có nghĩa là mục đó có độ ưu tiên trung bình. Bạn không nên bỏ qua vấn đề ở mục đó.
  • ![High][high] có nghĩa là mục đó có độ ưu tiên cao. Bạn không thể tránh việc không tuân theo quy tắc đó và thực hiện các điều chỉnh được đề nghị.

Các công cụ đánh giá hiệu suất

Đây là danh sách các công cụ bạn có thể sử dụng để kiểm tra hoặc giám sát trang web hay ứng dụng của bạn:

Tài liệu tham khảo

HTML

![html]

  • Tối giản HTML: ![medium] Code HTML là tối giản, các comment, khoảng trắng và các dòng mới phải loại bỏ khỏi các file trên bản production.

    Tại sao:

    Xóa toàn bộ những khoảng trống, comment, và dòng trống không cần thiết sẽ giảm được kích thước HTML của bạn và tăng tốc thời gian tải trang của bạn và rõ ràng việc tải xuống cho user của bạn được giảm nhẹ hơn.

    Làm như nào:

    Hầu hết các framework đều có plugin tạo điều kiện cho việc tối giản hóa các trang web. Bạn có thể sử dụng một loạt các module NPM mà có thể làm công việc đó cho bạn một cách tự động.

  • Loại bỏ những comment không cần thiết: ![low] Đảm bảo rằng các comment được loại bỏ khỏi trang của bạn.

    Vì sao:

    Các comment không thực sự hữu dụng đối với người dùng và nên được loại bỏ khỏi những file trên production. Một trường hợp mà bạn muốn giữ lại các comments nguồn gốc cho một thư viện.

    Làm như nào:

    ⁃ Hầu hết là các comment có thể bị loại bỏ thông qua việc sử dụng plugin minify HTML.

  • Loại bỏ các thuộc tính không cần thiết: ![low] Các thuộc tính type như type="text/javascript" hoặc type="text/css" đã không còn bắt buộc nữa và sẽ bị xóa đi.

    <!-- Trước khi có HTML5 -->
<script type="text/javascript">
    // JavaScript code
</script>

<!-- Hiện nay -->
<script>
    // JavaScript code
</script>

    Vì sao:

    Các thuộc tính type đã không còn cần thiết vì HTML5 đã ngầm hiểu text/css và text/javascript như các giá trị mặc định. Phần code không được sử dụng nên được loại bỏ vì nó làm trang nặng hơn khi không được sử dụng bởi website hoặc ứng dụng của bạn.

    Làm như nào:

    ⁃ Chắc chắn là tất cả các thẻ <link> và <script> của bạn không có bất kì thuộc tính type nào.

  • Luôn luôn đặt các thẻ CSS trước các thẻ Javascript: ![high] Chắc chắn là phần CSS của bạn luôn được tải trước phần code Javascript.

    <!-- Not recommended -->
<script src="jquery.js"></script>
<script src="foo.js"></script>
<link rel="stylesheet" href="foo.css"/>

<!-- Recommended -->
<link rel="stylesheet" href="foo.css"/>
<script src="jquery.js"></script>
<script src="foo.js"></script>

    Vì sao:

    Việc đặt các thẻ CSS trước bất kì thẻ Javascript nào khiến việc tải xuống song song tốt hơn, giúp tăng tốc render của trình duyệt.

    Làm như nào:

    Đảm bảo là các thẻ <link> và <style> trong thẻ <head> của bạn luôn luôn đứng trước thẻ <script>.

  • Giảm thiểu số lượng jframe: ![high] Chỉ sử dụng iframe nếu bạn không có bất cứ một công nghệ khác. Cố gắng tránh việc sử dụng jframe nhiều nhất có thể.

[⬆ quay về đầu trang]

CSS

![css]

  • Giảm thiểu: ![high] Tất cả file CSS đều phải Giảm thiểu, các comment, khoảng trắng và các dòng mới phải được loại bỏ khỏi các file trong production.

    Vì sao:

    Khi các file CSS được Giảm thiểu, nội dung được tải nhanh hơn và tốn ít dữ liệu được gửi về cho client hơn. Điều quan trọng là phải luôn luôn giảm thiểu các file CSS trong bản production. Nó có lợi cho người dùng vì nó áp dụng cho bất kì doanh nghiệp nào muốn giảm thiểu chi phí băng thông và lượng tài nguyên sử dụng.

    Làm như nào:

    ⁃ Sử dụng các công cụ để Giảm thiểu các file của bạn tự động trước hoặc trong khi xây dựng hay phát triển sản phẩm của bạn.

  • sự liên hệ: ![medium] Các file CSS được ghép lại thành file duy nhất (Không phải lúc nào cũng phù hợp với HTTP/2).

    <!-- Not recommended -->
<link rel="stylesheet" href="foo.css"/>
<link rel="stylesheet" href="bar.css"/>

<!-- Recommended -->
<link rel="stylesheet" href="foobar.css"/>

    Vì sao:

    Nếu bạn còn đang sử dụng HTTP/1, bạn có thể vẫn cần phải ghép nối các files của mình lại, nó không còn đúng thực sự nếu server của bạn sử dụng HTTP/2 (việc kiểm tra lại nên được thực hiện).

    Làm như nào:

    ⁃ Sử dụng công cụ online hoặc bất kì một plugin nào đó trước hoặc trong khi xây dựng hoặc phát triển của bạn để ghép nối các file lại với nhau.
    ⁃ Đương nhiên là hãy chắc chắn việc ghép nối không phá vỡ project của bạn.

  • non-blocking: ![high] Các file CSS phải không bị khóa để ngăn việc DOM mất nhiều thời gian tải.

    <link rel="preload" href="global.min.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="global.min.css"></noscript>

    Vì sao:

    Các file CSS có thể khóa việc tải trang và trì hoãn việc render trang của bạn. Sử dụng preload có thể tải các file CSS trước khi trình duyệt bắt đầu hiển thị nội dung của trang.

    Làm như nào:

    ⁃ Bạn cần thêm thuộc tính rel với giá trị preload và thêm as="style" vào thành phần <link>.

  • Dộ dài của các class CSS: ![low]Dộ dài của các class có thể tác động (nhẹ) lên các file HTML và CSS của bạn.

    Vì sao:

    Ngay cả việc tác động lên hiệu suất cũng có thể bị tranh chấp, việc đưa ra quyết định đối với chiến lược đặt tên liên quan tới project của bạn có thể tác động đáng kể tới khả năng bảo trì của bảng các style. Nếu bạn sử dụng BEM, trong một vài trường hợp, bạn có thể kết thúc với các class có nhiều kí tự hơn cần thiết. Việc chọn name và namespace một cách khôn ngoan của bạn luôn là điều quan trọng.

    Làm như nào:

    Việc đặt một giới hạn số lượng các kí tự có thể khiến nhiều người thấy hứng thú nhưng chắc chắn là bạn đã phá vỡ website của bạn trong các component có thể giúp giảm thiểu số lượng class (và các khai báo) với độ dài class của bạn.

  • CSS Không sử dụng: ![medium] Xóa các selector CSS không sử dụng

    Vì sao:

    Loại bỏ các selector CSS không được sử dụng có thể giảm kích thước các file của bạn và tăng tốc độ load nội dung lên.

    Làm như nào:

    ⁃ ⚠️ Hãy luôn luôn kiểm tra nếu framework CSS bạn muốn sử dụng không chứa code chuẩn hóa/reset. Thỉnh thoảng bạn không cần mọi thứ đặt ở trong file reset/chuẩn hóa.

  • CSS nhúng hay inline: ![high] Tránh việc sử dụng CSS nhúng hoặc inline trong thẻ <body> (Not valid for HTTP/2)

    Vì sao:

    Một trong những lý do đầu tiên là vì nó là một cách hay để phân chia nội dung riêng biệt từ thiết kế. Nó cũng giúp bạn có khả năng bảo trì code dễ dành hơn và website của bạn luôn truy cập được. Nhưng liên quan tới vấn đề hiệu suất, nó khá đơn giản vì nó giúp giảm kích thước của file và thời gian tải trang HTML.

    Làm như nào:

    Luôn sử dụng stylesheet bên ngoài hoặc nhúng CSS vào thẻ <head> của bạn (và phải tuân theo các quy tắc tăng hiệu suất về CSS khác)

  • Phân tích các stylesheet phức tạp: ![high] Việc phân tích stylesheet của bạn có thể giúp bạn tìm thấy lỗi, dư thừa và các selector CSS bị lặp lại.

    Vì sao:

    Thông thường bạn có thể bị dư thừa hoặc lỗi xác thực trong CSS của mình, phân tích các file CSS của bạn và loại bỏ những phần phức tạp này có thể giúp bạn tăng tốc các file CSS (vì trình duyệt của bạn sẽ đọc chúng nhanh hơn)

    Làm như nào:

    CSS của bạn cần được tổ chức lại, sử dụng một bộ tiền xử lý CSS có thể giúp bạn. Một vài công cụ online được liệt kê bên dưới cũng giúp bạn phân tích và sửa lỗi code của bạn.

[⬆ quay lại đầu trang]

Fonts

![fonts]

  • Chặn Flash hoặc các text bị ẩn: ![medium] Tránh các loại text màu trong suốt trong quá trình Webfont được tải.

[⬆ quay lại đầu trang]

Images

![images]

  • Sử dụng các hình ảnh vector thay cho raster/bitmap: ![medium] Thay thế việc sử dụng hình ảnh vector cho các hình ảnh dạng bitmap (khi có thể).

    Vì sao:

    Các ảnh vector (SVG) có xu hướng nhỏ hơn các ảnh thông thường và SVG đã có khả năng responsive, co dãn một cách hoàn hảo. Các hình ảnh này hoàn toàn có thể tạo và chỉnh sửa bằng CSS.

[⬆ quay lại đầu trang]

JavaScript

![javascript]

  • Giảm thiểu JS: ![high] Tất cả các file Javascript đều phải tối giản, các comments, khoảng trắng và dòng trống đều phải được loại bỏ khỏi các file của production. (Vẫn hợp lệ nếu sử dụng HTTP/2).

    Vì sao:

    xóa toàn bộ các khoảng trống, comments và xuống dòng không cần thiết sẽ giảm được kích thước các file Javascript của bạn và tăng tốc tải trang và giảm nhẹ được dung lượng user tải về.

    Làm như nào:

    ⁃ Sử dụng các công cụ được đề xuất bên dưới để tối giản các file của bạn tự động trước hoặc trong khi bạn xây dựng hay phát triển.

  • Không có Javascript dạng Inline: ![medium] (Chỉ phù hợp các trang web) Tránh việc nhúng nhiều code Javascript ở giữa thẻ body của bạn. Nhóm code Javascript của bạn lại trong một file bên ngoài hoặc nằm cuối cùng của thẻ <head> hay đặt nó ở cuối trang (trước thẻ <body>).

    Vì sao:

    Việc đặt Javascript nhúng trực tiếp vào thẻ <body> của bạn có thể làm chậm trang vì nó phải tải trong khi DOM đang được xây dựng. Tùy chọn tốt nhất là sử dụng một file bên ngoài với async hay defer để không chặn DOM lại. Một cách khác là đặt các đoạn script trong thẻ <head> của bạn. Hầu hết thời gian để phân tích code hawojc các đoạn script nhỏ cần được tải trước khi DOM thực hiện tiến trình chính. Làm như nào: Đảm bảo là mọi file của bạn đề sử dụng async hoặc defer và đưa ra một quyết định tốt nhất cho việc bạn phải đưa code của mình vào thẻ <head>.

  • Non-blocking JavaScript: ![high] Các file Javascript được load bất đồng bộ sử dụng async hoặc ngưng lại bằng cách sử dụng thuộc tính defer.

    <!-- Defer Attribute -->
<script defer src="foo.js"></script>

<!-- Async Attribute -->
<script async src="foo.js"></script>

    Vì sao:

    Javascript chặn việc phân tích thông thường của tài liệu HTML, vì vậy khi trình phân tích tiếp cận thẻ <script> (đặc biệt là bên trong thẻ <head>), nó dừng lại để nạp và thực thi. Việc thêm async hoặc defer được đánh giá cao nếu các script của bạn được đặt trên cùng của trang nhưng ít giá trị hơn nếu nó chỉ nằm trước thẻ </body>. Nhưng thực tế thì tốt nhất vẫn nên sử dụng các thuộc tính này để tránh ảnh hưởng xấu nên hiệu suất.

    Làm như nào:

    ⁃ Thêm async (nếu script này không phụ thuộc vào script khác) hoặc defer (nếu script này phụ thuộc vào phần trên hoặc phụ thuộc vào script bất đồng bộ khác) như một thuộc tính đối với thẻ script của bạn ⁃ Nếu bạn có những đoạn script nhỏ, có thể sử dụng script dạng inline được đặt ở trên các script bất đồng bộ.

  • Tối ưu và nâng cấp thư viện Javascript: ![medium] Tất cả các thư viện Javascript được sử dụng trong project của bạn đều cần thiết (như Vanilla Javascript cho các tính năng đơn giản), việc nâng cấp chúng lên phiên bản mới nhất và không làm phần Javascript của bạn có quá nhiều phương thức không cần thiết.

    Vì sao:

    Hầu hết thời gian, các phiên bản mới đều được tối ưu hơn và sửa các lỗi bảo mật. Bạn nên sử dụng hầu hết phần code đã được tối ưu cho tốc độ tăng lên vào project của bạn và đảm bảo bạn sẽ không làm website hay ứng dụng bị chậm đi bởi các plugin quá hạn. Làm như nào: Nếu project của bạn sử dụng các package của NPM, npm-check là một thự viện rất tốt cho việc nâng cấp, cập nhật các thư viện khác của bạn. Greenkeeper có thể tự động tìm kiếm các thành phần phụ thuộc của bạn là đưa ra đề xuất cập nhật mỗi khi có phiên bản mới.

[⬆ quay lại đầu trang]

Server

![server-side]

  • Website của bạn đang sử dụng HTTPS: ![high]

    Vì sao:

    HTTPS không chỉ dành cho các website thương mại điện tử, mà còn đối với tất cả các trang web có trao đổi dữ liệu. Như việc chia sẻ dữ liệu bởi user hoặc chia sẻ dữ liệu tới các thực thể bên ngoài. Các trình duyệt hiện đại ngày nay giới hạn chức năng đối với các trang web không an toàn. Ví dụ như: vị trí địa lý, đẩy các thông báo và các service worker không hoạt động nếu sản phẩm của bạn không sử dụng HTTPS. Và ngày nay đã rất dễ dành để cài đặt một project với xác thực SSL so với trước kia (và nó còn miễn phí, cám ơn Let's Encrypt vì điều này).

  • Giảm thiểu các request HTTP: ![high] Luôn luôn đảm bảo mọi request file đều cần thiết cho website hay ứng dụng của bạn.
  • Sử dụng CDN để phân phối các asset của bạn: ![medium] Sử dụng một CDN để phân phối nội dụng của bạn nhanh hơn trên toàn thế giới.

  • Phân phối các file từ cùng một giao thức: ![high] Tránh việc trang web của bạn phân phối file đến từ nguồn sử dụng HTTP trên trang đang sử dụng HTTPS. Nếu website của bạn sử dụng HTTPS, các file bên ngoài nên được gọi từ cùng một giao thức.

  • Phân phối các file có thể truy cập: ![high] Tránh việc phân phối các file không thể truy cập (404).

  • Đặt các header cache HTTP đúng cách: ![high] Đặt các header HTTP để tránh việc xoay vòng giữa trình duyệt và server của bạn.
  • bật nén GZIP / Brotli: ![high] Sử dụng các phương thức nén như Gzip hay Brotli để giảm kích thước của các file Javascript. Với các file có kích thước nhỏ, user có thể tải về nhanh hơn, kết quả là cải thiện được hiệu năng.

[⬆ quay lại đầu trang]

Hiệu suất và các Framework JS

Angular

React

Vue

CMS với việc tăng hiệu suất

WordPress

Các bài viết

Plugin được đề xuất