如果您對這份清單有興趣,可以到譯者我寫的 front-end climbing 看看。
前端開發者清單 是一份詳細的清單,用來檢查你的網站或網頁公布前所有應該完成的項目。 這份清單基於我多年的前端工程師工作經驗,以及其他公開的清單資源製作。
在 Product Hunt 上投票與推薦,協助我們將 Front-End Checklist 分享出去
前端開發者清單中的所有項目皆來是大多數專案的需求,針對你的專案時,還是會有某些項目用不到、可以忽略(例如,在行政用途的網頁 APP 中,你可能不需要 RSS 的訂閱功能)。我們依照可以調動的靈活性區分為三個等級:
代表這是個推薦項目,但在特定的情況下可以忽略。
代表這是高度推薦項目,在非常少數的特定情況下可以忽略。其中某些項目,如果忽略了會使效能或 SEO 結果(指搜尋引擎上的排名)很糟。
代表這是任何情況下都不能忽略的項目。忽略可能在你的網頁、網頁親和力或 SEO 上造成功能失常。這些項目的測試優先度最高。
某些資源有標示符號,協助你瞭解在清單中找到的內容或協助的類型:
- 📖: 文檔或文章
- 🛠: 網路工具 / 測試工具
- 📹: 媒體或影片內容
補充: 這有一份列表可以找到 HTML 檔案中
<head>
裡面可能含有的所有東西。
<!-- Doctype HTML5 -->
<!doctype html>
接下來三個 mata 標籤(Charset、X-UA Compatible 和 Viewport)需要先講解。
<!-- 為文件設定字符編碼 -->
<meta charset="utf-8">
<!-- 教導 Internet Explorer 使用最新的渲染引擎 -->
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Viewport 用在響應式網頁設計 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 檔案標題 -->
<title>Page Title less than 65 characters</title>
<!-- Meta Description -->
<meta name="description" content="Description of the page less than 150 characters">
- Favicons:
每一個 favicon 都需要創立且被正確展示。如果你只有一個
favicon.ico
,可以將它放在網頁最底層的檔案。通常你不需要對他加以修改。無論如何,這依舊是個好例子,可以跟下方的例子互相呼應。現在比起.icon
比較推薦 PNG 的檔案格式。(大小最少需要: 32x32px)
<!-- 一般的 favicon -->
<link rel="icon" type="image/x-icon" href="https://example.com/favicon.ico">
<!-- 推薦使用的 favicon 檔案格式 -->
<link rel="icon" type="image/png" href="https://example.com/favicon.png">
- Apple Touch Icon (蘋果手機觸控按鈕):
Apple Touch favicon 已設置 Apple Touch Icon。(200x200px 以上的 apple 按鈕圖檔便能支援大部分你所需螢幕的尺寸)
<!-- 蘋果手機觸控按鈕 -->
<link rel="apple-touch-icon" href="/custom-icon.png">
📖 搞懂網頁應用程式
<!-- Microsoft Titles -->
<meta name="msapplication-config" content="browserconfig.xml" />
browserconfig.xml 檔案中 xml 最小設定值如下:
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="small.png"/>
<square150x150logo src="medium.png"/>
<wide310x150logo src="wide.png"/>
<square310x310logo src="large.png"/>
</tile>
</msapplication>
</browserconfig>
<!-- 協助避免重複內容的問題 -->
<link rel="canonical" href="http://example.com/2017/09/a-new-article-to-red.html">
<html lang="en">
<html dir="rtl">
(註: right to left 或 left to right 的簡寫)
<link rel="alternate" href="https://es.example.com/" hreflang="es">
📖 關於 conditional comments (Internet Explorer) - MSDN - Microsoft
-
CSS Critical (最小 CSS 合集):
CSS critical 將使用在頁面顯示部分的核心 CSS 收集起來,在主要的CSS被呼叫之前就先渲染。它以放置於
<style></style>
間的形式嵌在檔案中(單行形式、最小化)。
Facebook OG 及 Twitter Cards 針對所有網頁都高度推薦。關於其他社交媒體的標籤,當你有特別想要確保的社交媒體的顯示功能再考慮。
- Facebook Open Graph (FB 開放圖形):
所有 Facebook Open Graph 都有測試過且沒有遺漏掉或出現失敗的訊息。圖檔最小需要 600x315px,推薦大小 1200x630px。
補充: 利用 og:image:width 及 og:image:height 的方式指定圖片尺寸,者可以協助爬蟲直接渲染圖片,不需要再異步載入並處理它。
<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">
<!-- Next tags are optional but recommended -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
- 📖 網頁大師的分享指南
- 📖 Best Practices - Sharing
- 🛠 利用Facebook OG testing測試你的網頁
<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">
- HTML5 Semantic Elements (HTML5 語意元素):
HTML5 Semantic Elements 被適當使用(header, section, footer, main...)。
📖 HTML 參考
-
Error pages (錯誤頁面):
404 錯誤頁面跟存在 5xx 錯誤的情況需要它自己的 CSS 程式碼(不要從當前的服務向外呼叫)。
-
Noopener:
注意,當你有外部連結且使用
target="_blank"
時,在連結加上rel="noopener"
,可以避免 tab nabbing(開啟新 tab 時造成原頁面效能低落)。若你要支援舊版 Firefox,使用rel="noopener noreferrer"
。
🛠 W3C 檢測器
🛠 髒亂程式碼修飾器
補充: 使用 webfonts 可能會導致 Flash Of Unstyled Text / Flash Of Invisible Text - 考慮使用後備字體和/或利用 webfont 加載器來控制行為。
- Responsive Web Design (網站響應式設計):
網站有使用響應式設計。
- CSS Print (CSS 列印):
每個頁面都正確設置列印樣式。
- Preprocessors (預處理器):
你的頁面有使用 CSS 預處理器 (推薦 Sass)。
- Unique ID (ID 獨特性):
使用ID的時候確保個別頁面裡沒有重複。
- Reset CSS (初始化 CSS):
確保 CSS reset (reset, normalize or reboot)被使用*(如果你使用 CSS 框架,例如 Bootstrap 或 Foundation,Normalize 已經包含在裡面)*。
- 📖 Reset.css
- 📖 Normalize.css
- 📖 Reboot
<div id="js-slider" class="my-slider">
<!-- Or -->
<div id="id-used-by-cms" class="js-slider my-slider">
-
CSS embed or line (CSS 的嵌入):
除非特別情況(例如: slider, CSS critical 的 background-image),避免使用 CSS embed 或 inline。
-
Vendor prefixes (前置語言產生器):
已經使用了 CSS 的 vendor prefixes,且依照瀏覽器支援狀況自動生成相對應的 CSS 前置語言。
- Concatenation (並列):
已經將所有 CSS 檔案合併成一個*(不適用 HTTP/2)*
- Minification (最小化):
已將所有 CSS 檔案壓縮。
- Non-blocking (不阻塞):
CSS 檔案需要 non-blocking,避免還在抓取 DOM 時就載入。
🛠 CSS 檢測器
- Desktop Browsers (桌上瀏覽器):
所有頁面都經過所有桌上瀏覽器的測試(Safari, Firefox, Chrome, Internet Explorer, EDGE...)。
- Mobile Browsers (手機瀏覽器):
所有頁面都經過所有手機瀏覽器的測試(Native browser, Chrome, Safari...)。
- OS:
所有頁面都經過所有作業系統的測試(Windows, Android, iOS, Mac...)。
補充: 點擊Addy Osmani 的免費電子書**Essential Image Optimization**,完整理解圖片(image)的優化
- 🛠 Imagemin
- 🛠 使用 ImageOptim免費優化你的圖片
- Retina (視網膜螢幕):
提供 x2、x3 的圖檔,用來支援視網膜螢幕等級的顯示。
- Sprite (雪碧圖):
小圖片都放在 sprite file 中 (一種將相關小圖排列在一起的圖檔),以 icon 為例,他們可以集中放在一個 SVG sprite image。
- Width and Height (寬與高):
如果你已經知道圖片渲染後的尺寸,在
<img>
中直接設定width
與height
的屬性(可以忽略 CSS 的尺寸設定)。 - Alternative text (補充文字):
所有
<img>
都有一個 Alternative text,用文字敘述圖片的內容。(註:在無障礙網頁中尤其重要)
- Lazy loading (懶加載):
照片有設置好 lazyload (總是設置 noscript fallback)。 ⬆ back to top
- JavaScript Inline(JS 被寫入):
沒有任何 JavaScript 程式碼被寫到 HTML 的程式碼中
- Concatenation (並列):
JavaScript 檔案已經優化。
- Minification (最小化):
JavaScript 檔案已經壓縮(可以在檔名最後加上
.min
)。
- JavaScript security (JS 安全性):
- 🛠 網站頁面分析
- 📖 大小限制器: 讓網站更輕點
🛠 W3C 檢測器
-
Lazy loading (懶加載):
讓圖片、腳本跟 CSS 都進行 lazy load,提升當前瀏覽的網頁的反應速度(細節在它們個別的章節中)。
-
Cookie size (cookie 大小): 如果你有使用 cookie,確保 cookie 大小不要超過 4096 bytes,且在你的網域內別超過20個。
- Third party components (第三方組件):
可能的話,以靜態的組件取代第三方 iframe 或依賴外部 JS 的組件(如共享按鈕),進而限制呼叫外部 APIs 的次數並保護使用者的行動隱私。
📖 下方技術的解釋
<link rel="dns-prefetch" href="https://example.com">
<link rel="preconnect" href="https://example.com">
<link rel="prefetch" href="image.png">
<link rel="preload" href="app.js">
補充: 你可以看這份清單 A11ycasts with Rob Dodson 📹
🛠 對比值
- Role banner:
<header>
hasrole="banner"
. - Role navigation:
<nav>
hasrole="navigation"
. - Role main:
<main>
hasrole="main"
.
🛠 Wave 測試
- Keyboard navigation (鍵盤導覽):
測試看看,在你的網站只使用鍵盤按照順序瀏覽,確保所有互動元素都可以點選、使用。
- Screen-reader (螢幕閱讀器):
所有頁面都使用 screen-reader 測試過 (VoiceOver、ChromeVox、NVDA 或 Lynx)。
- Focus style (專注風格):
如果 focus 無法使用,它會被 CSS 中的視覺部分取代。
- Google Analytics (Google 分析):
確認 Google Analytics 已經安裝且確實的架構好。
- Headings logic (標題邏輯):
Headings 有助於理解這個頁面的內容。
- sitemap.xml:
確認有 sitemap.xml 且已經提交給 Google Search Console (Google 搜尋引擎管理者,即之前的 Google 頁面管理者工具)。
- robots.txt:
Robots.txt 不會破壞網頁。
- 🛠 利用 Google Robots 測試工具測試你的robots.txt。
- 📖 介紹 Structured Data - Search - Google Developers
- 🛠 利用 Structured Data Testing Tool 測試你的網頁
- 🛠 Complete list of vocabularies that can be used as structured data. Schema.org Full Heirarchy
The Front-End Checklist is also available in other languages. Thanks for all translators and their awesome work!
- 🇯🇵 Japanese: miya0001/Front-End-Checklist
- 🇪🇸 Spanish: eoasakura/Front-End-Checklist-ES
- 🇨🇳 Chinese: JohnsenZhou/Front-End-Checklist
- 🇰🇷 Korean: kesuskim/Front-End-Checklist
- 🇧🇷 Portuguese: jcezarms/Front-End-Checklist
- 🇻🇳 Vietnamese: euclid1990/Front-End-Checklist
- 🇹🇼 Traditional Chinese: EngineLin/Front-End-Checklist
如果你希望向別人展示你的網站通過這份前端開發者清單,將這個勛章放進你的 README 文件中!
[![Front‑End_Checklist followed](https://img.shields.io/badge/Front‑End_Checklist-followed-brightgreen.svg)](https://github.com/thedaviddias/Front-End-Checklist/)
Open an issue or a pull request to suggest changes or additions.
The Front-End Checklist repository consists of two branches:
This branch consists of the README.md
file that is automatically reflected on the Front-End Checklist website.
This branch will be used to make some significant changes to the structure, content if needed. It is preferable to use the master branch to fix small errors or add a new item.
Check out all the super awesome contributors.
如果你有任何問題或建議,別客氣,使用 Gitter 或 Twitter 讓我知道: