Những checklist cần biết ở frontend

Bài đăng này đã không được cập nhật trong 6 năm

Mình xin list ra những điều cần kiểm tra về mặt frontend trước đưa website ra sản phẩm

Trong thẻ Head:

Meta tag

Doctype: nên có thể doctype trên top của trang

 <!-- Doctype HTML5 -->
<!doctype html>

Charset : nên mô tả charset một cách chính xác.

<!-- Set character encoding for the document -->
<meta charset="utf-8">

X-UA-Compatible: nên có thẻ meta X-UA-Compatible

<!-- Instruct Internet Explorer to use its latest rendering engine -->
<meta http-equiv="x-ua-compatible" content="ie=edge">

Viewport: viewport phải được mô tả chính xác.

<!-- Viewport for responsive web design -->
<meta name="viewport" content="width=device-width, initial-scale=1">

Title: Title nên được dùng ở tất cả các page để phục vụ cho SEO (về mặt SEO, google tính toán cả độ rộng các kí tự, và đoạn title nền được cắt vào khoảng 472 and 482 pixels. Nên trung bình số lượng kí tự nên là 55)

<!-- Document Title -->
<title>Page Title less than 65 characters</title>

Description: thể meta description nên là phân biệt, độc nhất và có độ dài trung bình nhỏ hơn 150 kí tự.

<!-- Meta Description -->
<meta name="description" content="Description of the page less than 150 characters">

Favicons: Mỗi favicon nên được cài đặt để hiển thị chính xác. Ngày nay PNG được tiến cử hơn (32x32 px) Apple Touch Icon: nên có apple touch icon (200x200px) Canonical: Dùng thêm rel="canonical" trong link để tránh trùng lặp nội dung

<!-- Helps prevent duplicate content issues -->
<link rel="canonical" href="http://example.com/2017/09/a-new-article-to-red.html">

HTML tags

Language tag: mô tả ngôn ngữ của website

<html lang="en">

Direction tag: Mô tả hướng của đoạn văn trên website.

<html dir="rtl">

Alternate language: Xác định link website cho ngôn ngữ thay thế.

<link rel="alternate" href="https://es.example.com/" hreflang="es">

RSS feed: Nếu website của bạn là blog thì nên thêm link RSS. CSS order: Tất cả CSS nên được load trước bất cứ file javascript nào trong head (trừ trường hợp JS được load bất đồng bộ).

Social meta

Facebook Open Graph: Image nên là 600 x 315 pixels, 1200 x 630 pixels được tiến cử.

<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">

Twitter Card:

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="https://example.com/page.html">
<meta name="twitter:title" content="Content Title">
<meta name="twitter:description" content="Content description less than 200 characters">
<meta name="twitter:image" content="https://example.com/image.jpg">

HTML

Best practices

HTML5 Semantic Elements: HTML5 Semantic Elements nên được dùng một cách chính xác. (header, section, footer, main ...) Error pages: Các trang lỗi 404 và 500 nên tồn tại, và được CSS một chút cho đẹp. Clean up comments: Các comment không cần thiết cần được remove khỏi page trước khi lên production.

HTML testing

W3C compliant: Tất cả các page cần được test với W3C validator, để xác định các lỗi tiềm ẩn về format https://validator.w3.org/ HTML Lint: Dùng tool để phân tính các vấn đề trong html code, đặc biệt là các lỗi viết ẩu https://dirtymarkup.com/ Desktop Browsers: Website nên được test với tất cả các browser hiện hành ( Safari, Firefox, Chrome, Internet Explorer, EDGE...). Mobile Browsers: Website nên được test với tất cả các browser mobile hiện hành. Link checker: Dùng tool check tất cả các link trên page, để đảm bảo không có cái nào bị 404 https://validator.w3.org/checklink Adblockers test: Kiểm trả website có hiện thị chính xác nếu có adblocker bị enabled. Nên check và hiện tin nhắn khuyến khích người dùng disable adblocker Pixel perfect: Dùng tool này để check độ chính xác của website dựa trên template ban đầu. https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi?hl=en

Webfonts

Webfont format: WOFF, WOFF2 và TTF được hỗ trợ trong tất cả browser Webfont size: Webfont size không nên vượt quá 2 MB (bao gồm tất cả các biến thể)

CSS

Responsive Web Design CSS Print Unique ID: cần check id là unique trên trang Reset CSS: nên có reset css trước khi style JS prefix: tất cả class và id được dùng bởi các file javascript nên có tiền tố js- CSS embed or line: nên tránh css trong page hoặc ngay tại element Stylelint: dùng tool để check các file css hoặc scss để đảm bảo không có lỗi. https://stylelint.io/ https://sass-guidelin.es/ https://jigsaw.w3.org/css-validator/ Responsive web design: tất cả các page nên được check theo các phân đoạn : 320px, 768px, 1024px (có thể nhiều hơn tùy vào phân tích xu hướng người dùng).

Images

Optimization: tất cả các ảnh nên được optimized trước khi render trên browser, WebP format nên được dùng trên page lưu lượng lớn như homepage https://github.com/imagemin/imagemin Retina: nên có ảnh images x2 or 3x để support display retina Sprite: các icon nhỏ nên là sprite file. Alternative text: Có text thay thế trong trường hợp link image bị hỏng. Lazy loading: Các image dung lượng cao nên được lazy load

Mình xin kết thúc tạm thời ở đây. Còn một vài ý mình sẽ viết tiếp vào phần sau. Cảm ơn các bạn đã đọc