Front-End Checklist adalah daftar lengkap seluruh elemen yang anda butuhkan untuk pengujian sebelum publikasi website / halaman HTML ke produksi
Cara Penggunaan • Kontribusi • Situs Web • Product Hunt
Checklist Lainnya:
🎮 Front-End Performance Checklist • 💎 Front-End Design Checklist
Berdasarkan pengalaman tahunan para pengembang Front-End, dengan tambahan-tambahan dari beberapa checklist open-source lainnya.
Seluruh item dalam Front-End Checklist dibutuhkan pada mayoritas proyek, namun beberapa elemen dapat diabaikan atau tidak esensial (contoh: dalam kasus dari sebuah aplikasi web administrasi, anda mungkin tidak membutuhkan RSS feed). Kami memilih untuk menggunakan 3 level fleksibilitas:
: Direkomendasikan tetapi dapat diabaikan pada beberapa keadaan khusus
: Sangat direkomendasikan namun dapat diabaikan pada beberapa keadaan khusus. Beberapa elemen, jika diabaikan, dapat berdampak buruk dalam hal kinerja atau SEO.
: Tidak dapat diabaikan dengan alasan apapun. Anda mungkin dapat mengakibatkan disfungsi pada sebuah laman, masalah aksesibilitas atau SEO. Prioritas pengujian diutamakan pada elemen ini.
Beberapa sumber memiliki emotikon yang dapat membantu anda untuk memahami tipe konten / membantu anda menemukan checklist:
- 📖: dokumentasi or artikel
- 🛠: online tool / testing tool
- 📹: media or konten video
Anda dapat berkontribusi pada Front-End Checklist App, penjelasan selengkapnya terkait proyek baca CONTRIBUTING.md file
Catatan: Anda dapat menemukan seluruh list yang ada di dalam
<head>dokumen HTML.
- Doctype: Doctype adalah HTML5 dan terletak di kepala (head) seluruh halaman HTML
<!doctype html> <!-- HTML5 -->Kedua meta tag (Charset dan Viewport) perlu didahulukan pada bagian kepala (head).
- Charset: Charset (UTF-8) dideklarasikan dengan benar.
<!-- Set character encoding for the document -->
<meta charset="utf-8">- Viewport: Viewport dideklarasikan dengan benar.
<!-- Viewport for responsive web design -->
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">- Title: Judul (title) digunakan pada semua halaman (SEO: Google mengkalkulasi lebar pixel dari karakter yang digunakan di judul, dan dipotong antara 472 dan 482 pixel. Limit rata-rata karakter berkisar 55 karakter.
<!-- Document Title -->
<title>Page Title less than 55 characters</title>-
Description:
A meta description is provided, it is unique and doesn't possess more than 150 characters. -
Description:
Deskripsi meta disediakan, unik dan tidak memiliki lebih dari 150 karakter
<!-- Meta Description -->
<meta name="description" content="Description of the page less than 150 characters">- Favicons: Setiap favicon telah dibuat dan ditampilkan dengan benar. Jika anda hanya memiliki sebuah
favicon.ico, letakkan pada root situs anda. Biasanya anda tidak membutuhkan markup apapun. Namun, mengkoneksikan hal itu dengan contoh di bawah dapat menjadi latihan yang baik. Saat ini, form PNG direkomendasikan dibanding format.ico(berdimensi: 32x32px).
<!-- Standard favicon -->
<link rel="icon" type="image/x-icon" href="https://example.com/favicon.ico">
<!-- Recommended favicon format -->
<link rel="icon" type="image/png" href="https://example.com/favicon.png">- Apple Web App Meta: Meta-tag Apple tersedia.
<!-- Apple Touch Icon (at least 200x200px) -->
<link rel="apple-touch-icon" href="/custom-icon.png">
<!-- To run web application in full-screen -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- Status Bar Style (see Supported Meta Tags below for available values) -->
<!-- Has no effect unless you have the previous meta tag -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">- Windows Tiles: Windows tiles (ubin) tersedia dan terhubung.
<!-- Microsoft Tiles -->
<meta name="msapplication-config" content="browserconfig.xml" />Markup xml minimum yang dibutuhkan untuk file browserconfig.xml adalah sebagai berikut:
<?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>- Canonical: Gunakan
rel="canonical"untuk menghindari duplikasi konten
<!-- Helps prevent duplicate content issues -->
<link rel="canonical" href="http://example.com/2017/09/a-new-article-to-read.html">- Language attribute: Atribut
langsitus web anda ditentukan dan terkait dengan bahasa halaman saat ini.
<html lang="en">- Direction attribute: Arah pembacaan ditentukan pada tag HTML (dapat digunakan pada tagl HTML lainnya)
<html dir="rtl">- Alternate language: Tag (penanda) bahasa dari situs web anda ditentukan dan terkait dengan bahasa halaman saat ini.
<link rel="alternate" href="https://es.example.com/" hreflang="es">- x-default: Tag bahasa situs web anda untuk halaman internasional
<link rel="alternate" href="https://example.com/" hreflang="x-default" />- Conditional comments: Komentar bersyarat tersedia untuk IE jika dibutuhkan
-
RSS feed:
Jika proyek anda adalah sebuah blog atau mempunyai artikel, link RSS telah disediakan -
CSS Critical:
CSS critical mengumpulkan seluruh CSS yang digunakan untuk merender bagian halaman yang terlihat. Hal itu disematkan sembelum CSS dasar dipanggil dan di antara <style></style>dalam satu baris (yang diperkecil).
- 🛠 Critical by Addy Osmani on GitHub mengotomatiskan ini.
- CSS order: Seluruh file CSS dimuat sebelum file JavaScript apapun di bagian
<head>. (Kecuali dalam kasus di mana kadang-kadang file JS dimuat secara asinkron pada bagian atas halaman anda).
Visualisasikan dan hasilkan secara otomatis meta tag social kami dengan Meta Tags
Facebook OG dan Twitter Cards sangat direkomendasikan untuk situs web apapun. Social media lain dapat dipertimbangkan jika kamu menarget audiensi khusus dan ingin memastikan tampilannya
- Facebook Open Graph: Seluruh Facebook Open Graph (OG) diuji dan tidak ada yang hilang atau berisi informasi yang salah. Gambar sedikitnya berukuran 600 x 315 pixel, walau demikian 1200 x 630 pixel lebih disarankan
Catatan: Menggunakan
og:image:widthdanog:image:heightakan menspesifikasikan dimensi gambar pada crawler sehingga dapat merender gambar secara langsung tanpa harus mengunduh secara asinkron dan memprosesnya.
<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">
- 📖 A Guide to Sharing for Webmasters
- 📖 Best Practices - Sharing
- 🛠 Uji halaman anda dengan Facebook OG testing
- 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">
- 📖 Getting started with cards — Twitter Developers
- 🛠 Uji halaman anda dengan Twitter card validator
- HTML5 Semantic Elements: Elemen semantik HTML5 digunakan dengan sesuai (header, section, footer, main...).
-
Error pages:
Halaman error 404 dan 5xx tersedia. Ingatlah bahwa halaman error 5xx butuh untuk diintegrasikan dengan file CSSnya (tidak ada panggilan keluar di server pada kondisi ini) -
Noopener:
Seandainya anda menggunakan link eksternal target="_blank", link anda harus mempunyai atributrel="noopener"untuk menghindari tab nabbing (eksploitasi tab). Jika anda memerlukan bantuan Firefox versi yang lebih lawas, gunakanrel="noopener noreferrer".
- Clean up comments: Kode yang tidak diperlukan perlu untuk dihapus sebelum dikirimkan pada halaman produksi.
- W3C compliant: Seluruh halaman perlu diuji dengan validator W3C untuk mengidentifikasi kemungkinan masalah pada kode HTML.
- HTML Lint: Saya menggunakan alat untuk membantu saya menganalisis isu apapun yang ada pada kode HTML saya.
- 🛠 webhint
- Link checker: Tidak ada link yang rusak di halaman, menjamin bahwa anda tidak memiliki error 404.
- Adblockers test: Situs web anda menampilkan konten dengan benar saat adblocker diaktifkan (Anda dapat menyediakan pesan yang mendukung orang-orang untuk menonaktifkan adblocker mereka)
Catatan: Menggunakan font web dapat menyebabkan flash dari teks yang tidak berstyle/ flash dari teks yang tidak terlihat - pertimbangkan untuk menggunakan font dan/atau memanfaatkan pemuat font untuk mengontrol perilaku font
- Webfont format: WOFF, WOFF2 dan TTF didukung oleh semua browser moderen
-
Webfont size:
Ukuran webfont tidak melebihi 2 MB (termasuk seluruh varian) -
Webfont loader:
Mengontrol perilaku pemuatan dengan sebuah pemuat font
Catatan: Take a look at CSS guidelines and Sass Guidelines followed by most Front-End developers. If you have a doubt about CSS properties, you can visit CSS Reference. There is also a short Code Guide for consistency.
Catatan: Lihat Panduan CSS dan Panduan Sass yang diikuti oleh kebanyakan pengembang Front-End. Jika anda mempunyai keraguan tentang properti CSS, anda dapat melihat Referensi CSS. Di sana juga tersedia sebuah Panduan Singkat Code untuk konsistensi.
- Responsive Web Design: Situs web menggunakan desain web responsif
- CSS Print: Sebuah stylesheet cetak disediakan dan benar untuk setiap halaman
- Preprocessors: Proyek anda menggunakan CSS preprocessor (e.g Sass, Less, Stylus).
- Unique ID: Jika ID digunakan, mereka unik untuk setiap halaman
- Reset CSS: CSS reset (reset, normalize atau reboot) digunakan dan termutakhirkan. (Jika anda menggunakan framework CSS seperti Bootstrap atau Foundation, fungsi Normalize sudah termasuk di dalamnya.)
- 📖 Reset.css
- 📖 Normalize.css
- 📖 Reboot
- JS prefixes: Semua class (atau id- digunakan dalam file JavaScript) dimulai dengan js- dan tidak diberi style ke dalam file CSS
<div id="js-slider" class="my-slider">
<!-- Or -->
<div id="id-used-by-cms" class="js-slider my-slider">-
Embedded atau inline CSS:
Dengan alasan apapun hindari menerapkan CSS dalam tag <style>atau menggunakan CSS inline: gunakan hanya untuk alasan yang valid (contoh: background-image untuk slider, critical CSS). -
Vendor prefixes:
Awalan CSS digunakan dan digenerate sesuai dengan browser yang mendukung
- Concatenation: File CSS dirangkai dalam satu file (tidak untuk HTTP/2).
- Minification: Seluruh file CSS diperkecil
- Non-blocking: File CSS harus dalam kondisi 'non-blocking' untuk menghindari DOM memakan waktu memuat yang lebih banyak.
- Unused CSS: Hapus CSS yang tidak terpakai.
- Stylelint: Seluruh file CSS or SCSS files tanpa error apapun.
- Responsive web design: Seluruh halaman telah diuji pada poin-poin berikut: 320px, 768px, 1024px (dapat lebih / berbeda sesuai dengan analisis anda)
Responsive Checker -
- CSS Validator: CSS telah diuji dan error terkait telah diperbaiki.
-
Desktop Browsers:
Seluruh halaman telah diuji pada semua browser desktop terkini(Safari, Firefox, Chrome, Internet Explorer, EDGE...). -
Mobile Browsers:
Seluruh halaman telah diuji pada semua mobile browser terkini (Native browser, Chrome, Safari...). -
OS:
Seluruh halaman telah diuji pada OS terkini (Windows, Android, iOS, Mac...). -
Design fidelity:
Tergantung pada proyek dan kualitas materi kreatif, anda mungkin diminta menyesuaikan desain semirip mungkin. Anda dapat menggunakan beberapa alat untuk membandingkan materi kreatif dengan kode implementasi dan memastikan konsistensinya.
- Reading direction: Seluruh halaman perlu diuji untuk bahasa LTR dan RTL jika mereka diperlukan.
Catatan: Untuk pemahaman optimasi gambar secara menyeluruh, lihat ebook gratis dari Addy Osmani Essential Image Optimization.
- Optimization: Semua gambar dioptimalkan untuk dirender dalam browser. Format WebP dapat digunakan pada kondisi halaman yang sangat diperlukan (seperti halaman home).
- 🛠 Imagemin
- 🛠 Gunakan ImageOptim untuk mengoptimasi gambar anda secara gratis
- 🛠 Gunakan KeyCDN Image Processing untuk mengoptimasi gambar secara real-time
- 🛠 Gunakan Kraken.io alternatif yang memukau untuk optimasi png dan jpg. Hingga 1mb per file untuk paket gratis.
- 🛠 TinyPNG optimasi losslessly gambar png, apng (animated png) dan jpg. Versi gratis dan berbayar tersedia.
- 🛠 ZorroSVG Kompresi jpg-sejenis untuk gambar transparan menggunakan svg masking.
- 🛠 SVGO tool berabasi Nodejs untuk optimasi grafik file SVG.
- 🛠 SVGOMG GUI berbasis web dari SVGO untuk optimasi svg secara online.
- Picture/Srcset: Kamu menggunakan gambar/srcset untuk menyediakan gambar yang paling sesuai untuk viewport user terkini.
- Retina: Anda menyediakan layout gambar 2x atau 3x, mendukung tampilan retina.
- Sprite: Gambar kecil dalam sebuah file sprite(dalam kasus ini ikon, mereka ada dalam gambar sprite SVG).
- Width and Height: Set atribut
widthdanheightpada<img>jika gambar akhir yang dirender tidak diketahui (dapat diabaikan untuk ukuran CSS). - Alternative text: Semua
<img>mempunyai teks alternatif yang mendeskripsikan gambar secara visual.
- Lazy loading: Gambar lazyloaded (pengganti tanpa skrip selalu disediakan).
- JavaScript Inline: Anda tidak mempunyai kode inline JavaScript (bercampur dengan kode HTML).
- Concatenation: File JavaScript disambungkan.
- Minification: File JavaScript diperkecil (anda dapat menambahkan akhiran
.min).
- JavaScript security:
-
noscripttag: Gunakan tag <noscript>di body HTML jika tipe script pada halaman tidak didukung atau jika fitur scripting pada saat ini dimatikan pada browser. Hal ini akan membantu dari sisi client saat merender aplikasi yang berat seperti React.js, lihat contoh.
<noscript>
You need to enable JavaScript to run this app.
</noscript>- Non-blocking: File JavaScript dimuat secara asinkron menggunakan
asyncatau ditangguhkan menggunakan atributdefer.
- Optimized and updated JS libraries: Seluruh library JavaScript yang digunakan dalam proyek anda diperlukan (Vanilla Javascript untuk fungsionalitas sederhana), diperbarui ke versi terakhir dan tidak membanjiri JavaScript dengan method yang tidak dibutuhkan.
- Modernizr: Jika anda memerlukan beberapa fitur yang dapat di-custom secara khusus anda dapat menggunakan Modernizr untuk menambahkan class dalam tag
<html>.
- ESLint: Tidak ada error yang ditandai oleh ESLint (berdasarkan konfigurasi atau aturan baku).
- HTTPS: HTTPS digunakan untuk setiap halaman dan untuk seluruh konten eksternal (plugin, gambar...).
- HTTP Strict Transport Security (HSTS): HTTP header diset 'Strict-Transport-Security'
- Cross Site Request Forgery (CSRF): Anda dapat memastikan bahwa request yang dibuat untuk sisi server sah dan berasal dari situs web anda / app untuk menghindari penyerangan CSRF.
- Cross Site Scripting (XSS): Halaman atau situs web anda bebas dari segala kemungkinan isu XSS.
- Content Type Options: Mencegah Google Chrome dan Internet Explorer dari percobaan mime-sniff tipe konten dari respon yang dideklarasikan oleh server.
- X-Frame-Options (XFO): Melindungi pengunjung anda dari serangan clickjacking (pembajakan berbasis click).
- Content Security Policy: Mendefenisikan bagaimana konten dimuat dalam website anda dan di bagian mana diizinkan untuk dimuat. Dapat juga digunakan untuk melindungi melawan serangan (clickjacking)
- Tujuan yang ingin dicapai: Halaman anda harus mencapai sasaran ini:
- First Meaningful Paint di bawah 1 detik
- Time To Interactive di bawah 5 detik untuk konfigurasi "rata-rata" (Gadget Android seharga $200 pada jaringan 3G yang lambat dengan 400ms RTT dan 400kbps kecepatan transfer) dan kunjungan ulang di bawah 2 detik
- Ukuran file kritikal di bawah 170kb
-
Minified HTML:
HTML anda diperkecil. -
Lazy loading:
Gambar, script dan CSS perlu 'lazy loaded' untuk meningkatkan waktu respons pada halaman saat ini (Lihat detail di bagiannya masing-masing) -
Cookie size:
Jika kamu menggunakkan cookie pastikan cookie tidak melebihi 4096 bytes dan domain name anda tidak mempunyai lebih dari 20 cookie.
- Third party components: Iframe atau komponen pihak ketiga yang mengandalkan JS eksternal (seperti tombol berbagi) dapat digantikan dengan komponent statis ketika dimungkinkan, sehingga membatasi pemanggilan ke APIs eksternal dan menjaga aktivitas user anda tetap private.
- DNS resolution: DNS dari layanan pihak ketiga yang mungkin dibutuhkan diselesaikan terlebih dahulu selama waktu idle menggunakan
dns-prefetch
<link rel="dns-prefetch" href="https://example.com">- Preconnection: DNS lookup, TCP handshake dan TLS negotiation dengan layanan yang akan segera dibutuhkan diselesaikan terlebih dahulu selama waktu idle menggunakan
preconnect.
<link rel="preconnect" href="https://example.com">- Prefetching: Resources (sumber daya) yang akan dibutuhkan (cth: lazy loaded images) di-request terlebih dahlulu selama waktu idel menggunakan
prefetch.
<link rel="prefetch" href="image.png">- Preloading: Resources (sumber daya) yang dibutuhkan pada halaman saat ini (cth: script yang ditempatkan pada akhir
<body>) didahulukan menggunakanpreload.
<link rel="preload" href="app.js">- Google PageSpeed: Seluruh halaman telah diuji (tidak hanya beranda) dan mendapatkan skor setidaknya 90/100.
Catatan: Anda dapat menonton playlist A11ycasts with Rob Dodson 📹
- Progressive enhancement: Fungsi utama seperti navigasi dan pencarian harus bekerja tanpa JavaScript yang aktif.
- Color contrast: Kontras warna setidaknya harus melewati WCAG AA (AAA untuk mobile)
- H1: Seluruh halaman mempunyai H1 yang bukan merupakan judul dari website
- Headings: Heading harus digunakan dengan layak dan dalam urutan yang tepat (H1 ke H6).
- Specific HTML5 input types are used: Hal ini penting khususnya untuk perangkat mobile yang menunjukkan keypad terkustomisasi dan widget untuk ukuran yang berbeda.
- Label: Label diasosiasikan dengan setiap elemen input. Jikalau label tidak dapat ditampilkan, gunakan
aria-label
- Accessibility standards testing: Gunakan WAVE tool untuk menguji jika halaman anda tunduk pada standar aksibilitas.
-
Keyboard navigation:
Uji situs web anda hanya menggunakan keyboard dalam urutan yang tak terlihat sebelumnya. Semua elemen interaktif dapat dijangkau dan digunakan. -
Screen-reader:
Semua halaman diuji dalam screen-reader (VoicerOver, ChromeVox, NVDA atau Lynx) -
Focus style:
Jika fokus dinonaktifkan, akan digantikan dengan status yang terlihat di CSS.
- Google Analytics: Google Analytics dipasang dan dikonfigurasi dengan benar.
- Search Console: Konsol pencarian dipasang dan dikonfigurasi dengan benar. Fungsionalitas itu ditawarkan secara gratis oleh Google untuk membantu anda memonitor, memelihara, dan troubleshoot kehadiran situs web anda pada pencarian Google.
- Headings logic: Teks judul membantu anda memahami konten di halaman saat ini
- sitemap.xml: A sitemap.xml exists and was submitted to Google Search Console (previously Google Webmaster Tools). Sitemap.xml eksis dan dikirim ke konsol pencarian Google (sebelumnya Google Webmaster Tools).
- robots.txt: Robots.txt tidak memblok halaman-halaman situs web.
- 📖 The robots.txt file
- 🛠 Uji robots.txt anda dengan Google Robots Testing Tool
- Structured Data: Halaman menggunakan data terstruktur diuji dan tanpa error. Data terstruktur membantu crawler(fungsi perambah) memahami konten pada halaman saat ini.
- 📖 Pengantar Data Terstruktur - Search - Google Developers
- 📖 JSON-LD
- 📖 Microdata
- 🛠 Uji halaman anda dengan Rich Restults Test
- 🛠 Daftar lengkap kosakata yang dapat digunakan sebagai data terstruktur. Schema.org Full Hierarchy
- Sitemap HTML: HTML sitemap disediakan dan dapat diakses melalui link di-footer dari situs web anda
- Pagination link tags: Menyediakan
rel="prev"danrel="next"untuk mengindikasikan halaman yang dipaginasi.
<!-- Example: Pagination link tags for page 2 of a paginated list -->
<link rel="prev" href="https://example.com/?page=1">
<link rel="next" href="https://example.com/?page=3">Front-End Checklist juga tersedia dalam bahasa lain. Terima kasih kepada semua penerjemah dan pekerjaan mereka yang luar biasa!
- 🇯🇵 Jepang: miya0001/Front-End-Checklist
- 🇪🇸 Spanyol: eoasakura/Front-End-Checklist-ES
- 🇨🇳 Mandarin: JohnsenZhou/Front-End-Checklist
- 🇰🇷 Korea: kesuskim/Front-End-Checklist
- 🇧🇷 Portugis: jcezarms/Front-End-Checklist
- 🇻🇳 Vietnam: euclid1990/Front-End-Checklist
- 🇹🇼 Mandarin Tradisional: EngineLin/Front-End-Checklist
- 🇫🇷 Prancis: ynizon/Front-End-Checklist
- 🇷🇺 Rusia: ungear/Front-End-Checklist
- 🇹🇷 Turki: eraycetinay/Front-End-Checklist
- 🇩🇪 Jerman: xfuture603/Front-End-Checklist
- 🇵🇱 Polandia: mbiesiad/Front-End-Checklist
- 🇮🇩 Indonesia: nniinnoo/Front-End-Checklist
Jika anda ingin menunjukkan bahwa anda telah mengikuti aturan dari Front-End Checklist, letakkan badge ini di file README anda.
➔
[](https://github.com/thedaviddias/Front-End-Checklist/)Open-issue atau pull-request untuk mengindikasikan perubahan atau penambahan.
Repositori Front-End Checklist terdiri dari dua branch (cabang repositori):
Branch ini terdiri dari file README.md yang secara otomatis direfleksikan pada situs web Front-End Checklist
Branch ini akan digunakan untuk membuat perubahan yang signifikan pada struktur, konten jika dibutuhkan. Direkomendasikan untuk menggunakan branch master untuk memperbaiki error kecil atau menambahkan item baru.
Jika kamu mempunya pertanyaan atau saran, jangan ragu untuk menggunakan Gitter atau Twitter:
Proyek ini ada berkat semua orang yang berkontribusi. [Kontribusi].
Terima kasih untuk semua pendukung/patron kami! 🙏 [Menjadi Patron]
Dukung proyek ini dengan menjadi sponsor. Logo anda kan dimunculkan di sini dengan link ke situs web anda. [Menjadi Patron]
