Front-End Checklist
A Front-End Checklist é uma lista exaustiva de todos elementos que você precisa ter / testar antes de lançar seu site / página HTML em produção.
Baseada em anos de experiência de desenvolvedores Front-End, com as adições provenientes de outras checklists open-source.
Índice
Como usar?
Todos itens na Front-End Checklist são necessários na maioria dos projetos, mas alguns elementos podem ser omitidos ou não são tão essenciais (no caso da administração de um aplicativo web, você pode não precisar de um feed RSS por exemplo). Nós escolhemos três níveis de flexibilidade:
significa que o item é recomendado mas pode ser omitido em algumas situações em particular.
significa que o item é altamente recomendado e pode eventualmente ser omitido em alguns casos realmente particulares. Alguns elementos, se omitidos, podem ter más repercussões em termos de performance ou SEO.
significa que o item não pode ser omitido por qualquer razão. Você pode causar uma disfunção na sua página ou ter problemas com acessibilidade ou SEO. A prioridade dos testes precisa estar nestes elementos primeiro.
Alguns recursos possuem um emoticon para ajudar você a entender qual tipo de conteúdo / ajuda você pode encontrar na checklist:
📖 : documentação ou artigo🛠 : ferramenta online / ferramenta de teste📹 : mídia ou conteúdo em vídeo
Você pode contribuir no App Front-End Checklist lendo o arquivo README_APP que explica tudo sobe o projeto.
Head
Notas: Você pode acessar uma lista com tudo que poderia ser encontrado na
<head>de um document HTML.
Meta tag
- Doctype:
<!doctype html> <!-- HTML5 -->As próximas 3 meta tags (Charset, X-UA Compatible e Viewport) precisam vir primeiro no head.
- Charset:
<!-- Determine o encoding de caracteres para o document -->
<meta charset="utf-8">- X-UA-Compatible:
<!-- Instrua o Internet Explorer a usar seu mais recente engine de renderização -->
<meta http-equiv="x-ua-compatible" content="ie=edge">- Viewport:
<!-- Viewport para web design responsivo -->
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">- Title:
<!-- Título do Document -->
<title>Título de Página menor que 55 caracteres</title>- Descrição:
<!-- Meta Descrição -->
<meta name="description" content="Descrição da página com menos de 150 caracteres">- Favicons:
favicon.ico, ponha-o na raiz do seu site. Normalmente você não precisa usar nenhum markup. Entretanto, ainda é uma boa prática linkar ele usando o exemplo abaixo. Atualmente, o formato PNG é recomendado ao invés do formato.ico(dimensões: 32x32px).
<!-- Favicon padrão -->
<link rel="icon" type="image/x-icon" href="https://exemplo.com/favicon.ico">
<!-- Formato favicon recomendado -->
<link rel="icon" type="image/png" href="https://exemplo.com/favicon.png">- Apple Web App Meta:
<!-- Apple Touch Icon (pelo menos 200x200px) -->
<link rel="apple-touch-icon" href="/custom-icon.png">
<!-- Para rodar a aplicação web em tela cheia -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- Estilo da Barra de Status (veja as Meta Tags suportadas abaixo para valores disponíveis) -->
<!-- Não tem efeito nenhum se você não tiver a meta tag anterior -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">- Windows Tiles:
<!-- Microsoft Tiles -->
<meta name="msapplication-config" content="browserconfig.xml" />O markup xml mínimo necessário para o arquivo browserconfig.xml é como segue:
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="pequeno.png"/>
<square150x150logo src="medio.png"/>
<wide310x150logo src="largo.png"/>
<square310x310logo src="grande.png"/>
</tile>
</msapplication>
</browserconfig>- Canonical:
rel="canonical"para evitar conteúdo duplicado.
<!-- Ajuda a evitar problemas com conteúdo duplicado -->
<link rel="canonical" href="http://exemplo.com/2017/09/um-novo-artigo-para-ler.html">Tags HTML
- Atributo de linguagem:
<!-- Indicamos o idioma definido para a página atual -->
<html lang="pt-br">- Atributo de direção:
<html>(Pode ser usada em outra tag HTML).
<!-- Indicamos a direção de leitura (rtl é sigla para right to left, isto é, da direita para a esquerda) -->
<html dir="rtl">- Idioma alternativo:
<!-- Indicamos o idioma alternativo definido para a página atual -->
<link rel="alternate" href="https://es.exemplo.com/" hreflang="es">- Comentários condicionais:
-
RSS feed:
-
CSS Crítico:
<style></style>numa linha única (minificado).
🛠 Critical por Addy Osmani no Github automatiza isso.
- Ordem CSS:
<head>(Exceto no caso onde, algumas vezes, arquivos JS são carregados assíncronamente no topo da página).
Social meta
Facebook OG e Twitter Cards são, para qualquer website, altamente recomendados. As outras tags de mídia social podem ser consideradas se seu público-alvo tem uma presença em particular nelas, e você quer se assegurar de exibí-las.
- Facebook Open Graph:
Notas: Usar
og:image:widtheog:image:heightvai especificar as dimensões da imagens para o crawler para que ele renderize a imagem imediatamente sem ter que baixá-la e processá-la assíncronamente.
<meta property="og:type" content="website">
<meta property="og:url" content="https://exemplo.com/pagina.html">
<meta property="og:title" content="Título do Conteúdo">
<meta property="og:image" content="https://exemplo.com/imagem.jpg">
<meta property="og:description" content="Descrição Aqui">
<meta property="og:site_name" content="Nome do Site">
<meta property="og:locale" content="pt_BR">
<!-- As próximas tags são opcionais mas recomendadas -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
📖 Um Guia de Compartilhamento para Webmasters📖 Melhores Práticas - Compartilhamento🛠 Teste sua página com o Facebook OG testing
- Twitter Card:
<meta name="twitter:card" content="sumário">
<meta name="twitter:site" content="@conta_do_site">
<meta name="twitter:creator" content="@conta_individual">
<meta name="twitter:url" content="https://exemplo.com/pagina.html">
<meta name="twitter:title" content="Título do Conteúdo">
<meta name="twitter:description" content="Descrição de conteúdo com menos de caracteres">
<meta name="twitter:image" content="https://exemplo.com/imagem.jpg">
📖 Iniciando com cards — Twitter Developers🛠 Teste sua página com o Validador de Twitter cards
HTML
Melhores práticas
- Elementos Semânticos do HTML5:
-
Páginas de erro:
-
Noopener:
target="_blank", seu link deveria ter um atributorel="noopener"para prevenir tab nabbing. Se você precisa suportar versões mais antigas do Firefox, userel="noopener noreferrer".
- Retirando comentários:
Testando HTML
- W3C compliant:
- HTML Lint:
- Verificador de Link:
- Teste Bloqueadores de Publicidade:
Webfonts
Notas: Usar webfonts pode causar um flash de texto invisível ou sem estilização - cogite ter fontes reserva e/ou utilizar webfont loaders para controlar esse comportamento.
- Formato de webfont:
-
Tamanho de webfont:
-
Webfont loader:
CSS
Notas: Dê uma olhada em Guidelines CSS e Guidelines Sass seguidas pela maioria dos desenvolvedores Front-End. Se você tem alguma dúvida sobre propriedades CSS, você pode visitar a CSS Reference. Existe também um pequeno Guia de Código para consistência.
- Web Design Responsivo:
- CSS Print:
- Pré-processadores:
- ID Único:
- Reset CSS:
📖 Reset.css📖 Normalize.css📖 Reboot
- JS prefix:
<div id="js-slider" class="meu-slider">
<!-- ou -->
<div id="id-usado-pelo-cms" class="js-slider meu-slider">- CSS embutido ou inline:
<style>ou inline: apenas utilizado por razões válidas (ex: background-image para slider, CSS critical). - Vendor prefixes:
Performance
- Concatenação:
- Minificação:
- Non-blocking:
- CSS Inutilizado:
Validação CSS
- Stylelint:
-
Web design responsivo:
-
Validador CSS:
- Navegadores Desktop:
- Navegadores Mobile:
- SO:
- Fidelidade de design:
- Direção de leitura:
Imagens
Notas: Para um entendimento completo de otimização de imagem, veja o ebook grátis Essential Image Optimization, do Addy Osmani.
Melhores práticas
- Otimização:
🛠 Imagemin🛠 Use ImageOptim para otimizar suas imagens gratuitamente.🛠 Use Kraken.io como uma alternativa incrível para otimização tanto png quanto jpg. Até 1MB por arquivo no plano gratuito.🛠 TinyPNG otimize sem perdas imagens png, apng (png animado) e jpg. Versões gratuita e paga estão disponíveis.🛠 ZorroSVG compressão similar à do jpg para imagens transparentes usando mascaramento de svg.🛠 SVGO uma ferramenta baseada em Nodejs para otimização de arquivos de gráficos vetoriais SVG.🛠 SVGOMG uma versão GUI web do SVGO para otimização dos seus svgs online.
- Picture/Srcset:
- Retina:
- Sprite:
- Altura e Largura:
widtheheightem<img>se a imagem final renderizada é conhecida (pode ser omitido para CSS sizing). - Texto alternativo:
<img>têm um texto alternativo que descreve a imagem visualmente. - Lazy loading:
JavaScript
Melhores práticas
- JavaScript Inline:
- Concatenação:
- Minificação:
.min).
- Segurança JavaScript:
- Tag
noscript:<noscript>no body do HTML se um tipo de script na página não for suportado ou se scripting em geral está atualmente desabilitado no navegador. Isto ajudará em renderização client-side de aplicações pesadas como React.js, veja exemplos.
<noscript>
Você precisa habilitar JavaScript para rodar esta aplicação.
</noscript>- Non-blocking:
asyncou deferidos usando atributodefer.
- Bibliotecas JS Otimizadas e atualizadas:
- Modernizr:
<html>.
Validação JavaScript
- ESLint:
Segurança
Scaneie e cheque seu website
Melhores práticas
- HTTPS:
- HTTP Strict Transport Security (HSTS):
- Cross Site Request Forgery (CSRF):
- Cross Site Scripting (XSS):
- Content Type Options
- X-Frame-Options (XFO)
- Política de Segurança de Conteúdo
Performance
Melhores práticas
- Objetivos a alcançar:
- Primeira Pintura Significativa antes da marca de 1 segundo
- Tempo para Interação abaixo de 5 segundos para uma configuração "média" (um Android de ~R$700 numa rede 3G lenta com 400ms RTT e 400kbps de velocidade de transferência) e abaixo de 2 segundos para visitas repetidas
- Tamanho crítico de arquivos abaixo de 170Kb gzippado
- Minificado:
-
Lazy loading:
-
Tamanho dos Cookies:
- Componentes de terceiros:
Preparando requisições a caminho
- Resolução DNS:
dns-prefetch.
<link rel="dns-prefetch" href="https://exemplo.com">- Preconnection:
preconnect.
<link rel="preconnect" href="https://exemplo.com">- Prefetching:
prefetch.
<link rel="prefetch" href="image.png">- Preloading:
<body>) adiantadamente usandopreload.
<link rel="preload" href="app.js">Testes de Performance
- Google PageSpeed:
Acessibilidade
Notas: Você pode assistir a playlist A11ycasts com Rob Dodson
📹
Melhores práticas
- Melhoramento progressivo:
- Contraste de cor:
Cabeçalhos
- H1:
- Cabeçalhos:
Semântica
- Inputs HTML5 específicos são utilizados:
Formulários
- Label:
aria-label.
Testes de Acessibilidade
- Testando padrões de Acessibilidade:
- Navegação por Teclado:
- Screen-reader:
- Estilo de Foco:
SEO
- Google Analytics:
- Lógica de cabeçalhos:
- sitemap.xml:
- robots.txt:
📖 O arquivo robots.txt🛠 Teste seu robots.txt com o Google Robots Testing Tool
- Dados Estruturados:
📖 Introdução a Dados Estruturados - Search - Google Developers📖 RDFa - Dados Linkados no HTML📖 JSON-LD📖 Microdata🛠 Teste sua página com a Ferramenta de Teste de Dados Estruturados🛠 Lista completa de vocabulários que podem ser usados como dados estruturados. Schema.org Full Hierarchy
- Sitemap HTML:
- Tags para links de Paginação:
rel="prev"erel="next"para indicar conteúdo pagiado
<!-- Exemplo: Tags para links de paginação para a segunda página de uma lista paginada -->
<link rel="prev" href="https://exemplo.com/?page=1">
<link rel="next" href="https://exemplo.com/?page=3">Traduções
O Front-End Checklist também está disponível em outros idiomas. Obrigado a todos tradutores por seu incrível trabalho!
🇺🇸 Inglês: thedaviddias/Front-End-Checklist🇯🇵 Japonês: miya0001/Front-End-Checklist🇪🇸 Espanhol: eoasakura/Front-End-Checklist-ES🇨🇳 Chinês: JohnsenZhou/Front-End-Checklist🇰🇷 Coreano: kesuskim/Front-End-Checklist🇧🇷 Português: jcezarms/Front-End-Checklist🇻🇳 Vietnamita: euclid1990/Front-End-Checklist🇹🇼 Chinês Tradicional: EngineLin/Front-End-Checklist🇫🇷 Francês: ynizon/Front-End-Checklist🇷🇺 Russo: ungear/Front-End-Checklist🇹🇷 Turco: eraycetinay/Front-End-Checklist🇩🇪 Alemão: xfuture603/Front-End-Checklist
Badge da Front-End Checklist
Se você quer mostrar que está seguindo as regras do Front-End Checklist, ponha esta badge no seu arquivo README!
➔
[](https://github.com/thedaviddias/Front-End-Checklist/)Contribuindo
Abra uma issue ou uma pull request para sugerir mudanças ou adições.
Guia
O repositório original do Front-End Checklist consiste em duas branches:
1. master
Esta branch consiste no arquivo README.md que é automaticamente refletido no website Front-End Checklist.
2. develop
Esta branch será usada para fazer algumas mudanças significativas à estrutura, conteúdo se necessário. É preferível usar a branch master para arrumar erros pequenos ou adicionar um novo item.
Suporte
Se você tem alguma pergunta ou sugestão, não hesite em usar o Gitter ou Twitter:
Autor
Contribuidores
Este projeto existe graças a todas as pessoas que contribuem. [Contribute].
Apoiadores
Obrigado a todos os nossos apoiadores!
Patrocinadores
Suporte este projeto tornando-se um patrocinador. Seu logo irá aparecer aqui com um link pro seu website. [Torne-se um patrocinador]
