Awesome

<h1 align="center"> <br> <img src="https://raw.githubusercontent.com/thedaviddias/Front-End-Checklist/master/data/images/logo-front-end-checklist.jpg" alt="Front-End Checklist" width="130"> <br> <br> Front-End Checklist <br> </h1> <h4 align="center">Front-End Checklist adalah daftar lengkap seluruh elemen yang anda butuhkan untuk pengujian sebelum publikasi website / halaman HTML ke produksi</h4> <p align="center"> <a href="http://makeapullrequest.com"> <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square" alt="PRs Welcome"> </a> <a href="https://github.com/thedaviddias/Front-End-Checklist/graphs/contributors"> <img src="https://img.shields.io/github/contributors/thedaviddias/Front-End-Checklist.svg?style=flat-square" alt="Contributors"> </a> <a href="https://github.com/thedaviddias/Front-End-Checklist/"> <img src="https://img.shields.io/badge/Front‑End_Checklist-followed-brightgreen.svg?style=flat-square" alt="Front‑End_Checklist followed"> </a> <a href="https://creativecommons.org/publicdomain/zero/1.0/"> <img src="https://img.shields.io/badge/license-CC0-green.svg?style=flat-square" alt="CC0"> </a> </p> <p align="center"> <a href="#how-to-use">Cara Penggunaan</a> • <a href="#contributing">Kontribusi</a> • <a href="https://frontendchecklist.io">Situs Web</a> • <a href="https://www.producthunt.com/posts/front-end-checklist">Product Hunt</a> </p> <p align="center"> <span>Checklist Lainnya:</span> <br> <a href="https://github.com/thedaviddias/Front-End-Performance-Checklist#---------front-end-performance-checklist-">🎮 Front-End Performance Checklist</a> • <a href="https://github.com/thedaviddias/Front-End-Design-Checklist#front-end-design-checklist">💎 Front-End Design Checklist</a> </p>

Berdasarkan pengalaman tahunan para pengembang Front-End, dengan tambahan-tambahan dari beberapa checklist open-source lainnya.

Daftar Isi

Head
HTML
Webfonts
CSS
Gambar
JavaScript
Keamanan
Kinerja
Aksesibilitas
SEO
Terjemahan

Cara penggunaan?

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

Head

Catatan: Anda dapat menemukan seluruh list yang ada di dalam <head> dokumen HTML.

Meta tag

Doctype: Doctype adalah HTML5 dan terletak di kepala (head) seluruh halaman HTML

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

📖 Determining the character encoding - HTML5 W3C

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>

📖 Title - HTML - MDN

🛠 SERP Snippet Generator

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">

📖 Meta Description - HTML - MDN

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">

🛠 Favicon Generator

🛠 RealFaviconGenerator

📖 Favicon Cheat Sheet

📖 Favicons, Touch Icons, Tile Icons, etc. Which Do You Need? - CSS Tricks

📖 PNG favicons - caniuse

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">

📖 Configuring Web Applications

📖 Supported Meta Tags

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>

📖 Browser configuration schema reference

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">

📖 Use canonical URLs - Search Console Help - Google Support

📖 5 common mistakes with rel=canonical - Google Webmaster Blog

HTML tags

Language attribute: Atribut lang situs 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">

📖 dir - HTML - MDN

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" />

📖 x-default - Google

Conditional comments: Komentar bersyarat tersedia untuk IE jika dibutuhkan

📖 About conditional comments (Internet Explorer) - MSDN - Microsoft

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).

Social meta

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:width dan og:image:height akan 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

⬆ back to top

HTML

Best Practices

HTML5 Semantic Elements: Elemen semantik HTML5 digunakan dengan sesuai (header, section, footer, main...).

📖 HTML Reference

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 atribut rel="noopener" untuk menghindari tab nabbing (eksploitasi tab). Jika anda memerlukan bantuan Firefox versi yang lebih lawas, gunakan rel="noopener noreferrer".

📖 About rel=noopener

Clean up comments: Kode yang tidak diperlukan perlu untuk dihapus sebelum dikirimkan pada halaman produksi.

HTML testing

W3C compliant: Seluruh halaman perlu diuji dengan validator W3C untuk mengidentifikasi kemungkinan masalah pada kode HTML.

🛠 W3C validator

HTML Lint: Saya menggunakan alat untuk membantu saya menganalisis isu apapun yang ada pada kode HTML saya.

🛠 Dirty markup

🛠 webhint

Link checker: Tidak ada link yang rusak di halaman, menjamin bahwa anda tidak memiliki error 404.

🛠 W3C Link Checker

Adblockers test: Situs web anda menampilkan konten dengan benar saat adblocker diaktifkan (Anda dapat menyediakan pesan yang mendukung orang-orang untuk menonaktifkan adblocker mereka)

📖 Use AdBlocking in your Dev Environment

⬆ back to top

Webfonts

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

📖 WOFF - Web Open Font Format - Caniuse.

📖 WOFF 2.0 - Web Open Font Format - Caniuse.

📖 TTF/OTF - TrueType and OpenType font support

📖 Using @font-face - CSS-Tricks

Webfont size: Ukuran webfont tidak melebihi 2 MB (termasuk seluruh varian)
Webfont loader: Mengontrol perilaku pemuatan dengan sebuah pemuat font

🛠 Typekit Web Font Loader

⬆ back to top

CSS

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

🛠 Autoprefixer CSS online

Kinerja

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.

📖 loadCSS dengan filament group

📖 Contoh preload CSS menggunakan loadCSS

Unused CSS: Hapus CSS yang tidak terpakai.

🛠 UnCSS Online

🛠 PurifyCSS

🛠 PurgeCSS

🛠 Chrome DevTools Coverage

Pengujian CSS

Stylelint: Seluruh file CSS or SCSS files tanpa error apapun.

🛠 stylelint, CSS linter

📖 Panduan Sass

Responsive web design: Seluruh halaman telah diuji pada poin-poin berikut: 320px, 768px, 1024px (dapat lebih / berbeda sesuai dengan analisis anda)

Responsive Checker -

🛠 Am I Responsive?

🛠 Mobile Friendly Test

🛠 Responsive Website Design Tester

🛠 Responsinator

🛠 XRespond

CSS Validator: CSS telah diuji dan error terkait telah diperbaiki.

🛠 CSS Validator

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.

Pixel Perfect - Chrome Extension

Reading direction: Seluruh halaman perlu diuji untuk bahasa LTR dan RTL jika mereka diperlukan.

📖 Building RTL-Aware Web Apps & Websites: Part 1 - Mozilla Hacks

📖 Building RTL-Aware Web Apps & Websites: Part 2 - Mozilla Hacks

⬆ kembali ke atas

Gambar

Catatan: Untuk pemahaman optimasi gambar secara menyeluruh, lihat ebook gratis dari Addy Osmani Essential Image Optimization.

Best practices

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.

📖 How to Build Responsive Images with srcset

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 width dan height pada <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.

📖 Alt-texts: The Ultimate Guide

Lazy loading: Gambar lazyloaded (pengganti tanpa skrip selalu disediakan).

🛠 Native lazy loading polyfill

⬆ kembali ke atas

JavaScript

Best practices

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).

📖 Minify Resources (HTML, CSS, and JavaScript)

JavaScript security:

📖 Panduan untuk Mengembangkan Aplikasi Aman Menggunakan JavaScript

noscript tag: 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 async atau ditangguhkan menggunakan atribut defer.

📖 Remove Render-Blocking JavaScript

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.

📖 Anda mungkin tidak memerlukan jQuery

📖 Vanilla JavaScript untuk membangun aplikasi web yang handal

Modernizr: Jika anda memerlukan beberapa fitur yang dapat di-custom secara khusus anda dapat menggunakan Modernizr untuk menambahkan class dalam tag <html>.

🛠 Customize your Modernizr

Pengujian JavaScript

ESLint: Tidak ada error yang ditandai oleh ESLint (berdasarkan konfigurasi atau aturan baku).

📖 ESLint - The pluggable linting utility for JavaScript and JSX

⬆ kembali ke atas

Keamanan

Pindai and periksa situs web anda

securityheaders.io

Observatory by Mozilla

Best practices

HTTPS: HTTPS digunakan untuk setiap halaman dan untuk seluruh konten eksternal (plugin, gambar...).

🛠 Let's Encrypt - Free SSL/TLS Certificates

🛠 Free SSL Server Test

📖 Strict Transport Security

HTTP Strict Transport Security (HSTS): HTTP header diset 'Strict-Transport-Security'

🛠 Check HSTS preload status and eligibility

📖 HTTP Strict Transport Security Cheat Sheet - OWASP

📖 Transport Layer Protection Cheat Sheet - OWASP

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 Request Forgery (CSRF) Prevention Cheat Sheet - OWASP

Cross Site Scripting (XSS): Halaman atau situs web anda bebas dari segala kemungkinan isu XSS.

📖 XSS (Cross Site Scripting) Prevention Cheat Sheet - OWASP

📖 DOM based XSS Prevention Cheat Sheet - OWASP

Content Type Options: Mencegah Google Chrome dan Internet Explorer dari percobaan mime-sniff tipe konten dari respon yang dideklarasikan oleh server.

📖 X-Content-Type-Options - Scott Helme

X-Frame-Options (XFO): Melindungi pengunjung anda dari serangan clickjacking (pembajakan berbasis click).

📖 X-Frame-Options - Scott Helme

📖 RFC7034 - HTTP Header Field X-Frame-Options

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)

📖 Content Security Policy - An Introduction - Scott Helme

📖 CSP Cheat Sheet - Scott Helme

📖 CSP Cheat Sheet - OWASP

📖 Content Security Policy Reference

⬆ back to top

Kinerja

Best practices

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

🛠 Website Page Analysis

🛠 WebPageTest

📖 Size Limit: Make the Web lighter

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.

📖 Cookie specification: RFC 6265

📖 Cookies

🛠 Browser Cookie Limits

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.

🛠 Simple sharing buttons generator

Mempersiapkan request yang akan datang

📖 Explanation of the following techniques

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 menggunakan preload.

<link rel="preload" href="app.js">

📖 Perbedaan antara prefetch dan preload

Pengujian Kinerja

Google PageSpeed: Seluruh halaman telah diuji (tidak hanya beranda) dan mendapatkan skor setidaknya 90/100.

🛠 Google PageSpeed

🛠 Test your mobile speed with Google

🛠 WebPagetest - Website Performance and Optimization Test

🛠 GTmetrix - Website speed and performance optimization

🛠 Speedrank - Improve the performance of your website

⬆ kembali ke atas

Aksesibilitas

Catatan: Anda dapat menonton playlist A11ycasts with Rob Dodson 📹

Best practices

Progressive enhancement: Fungsi utama seperti navigasi dan pencarian harus bekerja tanpa JavaScript yang aktif.

📖 Enable / Disable JavaScript in Chrome Developer Tools

Color contrast: Kontras warna setidaknya harus melewati WCAG AA (AAA untuk mobile)

🛠 Contrast ratio

Judul

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).

📹 Why headings and landmarks are so important -- A11ycasts #18

Semantik

Specific HTML5 input types are used: Hal ini penting khususnya untuk perangkat mobile yang menunjukkan keypad terkustomisasi dan widget untuk ukuran yang berbeda.

📖 Mobile Input Types

Form

Label: Label diasosiasikan dengan setiap elemen input. Jikalau label tidak dapat ditampilkan, gunakan aria-label

📖 Using the aria-label attribute - MDN

Menguji Aksesibilitas

Accessibility standards testing: Gunakan WAVE tool untuk menguji jika halaman anda tunduk pada standar aksibilitas.

🛠 Wave testing

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.

📹 Managing Focus - A11ycasts #22

⬆ kembali ke atas

SEO

Google Analytics: Google Analytics dipasang dan dikonfigurasi dengan benar.

🛠 Google Analytics

🛠 GA Checker (and others)

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.

🛠 Search Console

Headings logic: Teks judul membantu anda memahami konten di halaman saat ini

🛠 Tota11y, tab Headings

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).

🛠 Sitemap generator

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

📖 Panduan Sitemap - Bantuan Google

Pagination link tags: Menyediakan rel="prev" dan rel="next" untuk mengindikasikan halaman yang dipaginasi.

🛠 Alat uji (rel="prev/next") Paginasi

📖 Panduan Paginasi - Bantuan Google

<!-- 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">

⬆ kembali ke atas

Terjemahan

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

Front-End Checklist Badge

Jika anda ingin menunjukkan bahwa anda telah mengikuti aturan dari Front-End Checklist, letakkan badge ini di file README anda.

➔

[![Front‑End_Checklist followed](https://img.shields.io/badge/Front‑End_Checklist-followed-brightgreen.svg)](https://github.com/thedaviddias/Front-End-Checklist/)

⬆ kembali ke atas

Kontribusi

Open-issue atau pull-request untuk mengindikasikan perubahan atau penambahan.

Panduan

Repositori Front-End Checklist terdiri dari dua branch (cabang repositori):

1. `master`

Branch ini terdiri dari file README.md yang secara otomatis direfleksikan pada situs web Front-End Checklist

2. `develop`

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.

Bantuan

Jika kamu mempunya pertanyaan atau saran, jangan ragu untuk menggunakan Gitter atau Twitter:

Penggubah Utama

David Dias

Kontributor

Proyek ini ada berkat semua orang yang berkontribusi. [Kontribusi]. <a href="https://github.com/thedaviddias/Front-End-Checklist/graphs/contributors"><img src="https://opencollective.com/front-end-checklist/contributors.svg?width=890" /></a>

Pendukung

Terima kasih untuk semua pendukung/patron kami! 🙏 [Menjadi Patron]

Lisensi

⬆ kembali ke atas

Awesome

Daftar Isi

Cara penggunaan?

Head

Meta tag

HTML tags

Social meta

HTML

Best Practices

HTML testing

Webfonts

CSS

Kinerja

Pengujian CSS

Gambar

Best practices

JavaScript

Best practices

Pengujian JavaScript

Keamanan

Pindai and periksa situs web anda

Best practices

Kinerja

Best practices

Mempersiapkan request yang akan datang

Pengujian Kinerja

Aksesibilitas

Best practices

Judul

Semantik

Form

Menguji Aksesibilitas

SEO

Terjemahan

Front-End Checklist Badge

Kontribusi

Panduan

1. master

2. develop

Bantuan

Penggubah Utama

Kontributor

Pendukung

Sponsors

Lisensi

1. `master`

2. `develop`