Construindo um site muito rápido a partir do zero

Eu adoro construir ferramentas para ajudar a resolver problemas. Eu também adoro programar. Graças à Web, as ferramentas que crio podem ser disponibilizadas para todos . Ainda melhor, é fácil construir um site que seja a ferramenta. Não é necessário fazer o download.

Neste artigo, exploro a criação de um site a partir do zero considerando UX, velocidade, celular, SEO e AMP.

O problema a resolver

Quando escrevo em francês, muitas vezes tropeço na conjugação de um verbo. Ao contrário do inglês, o francês tem regras divertidas. Termina com um “s” ou um “t”? Existem algumas regras de gramática que se esquece. Por exemplo, o verbo “finir” terminará com um “s” ou “t” no tempo presente, mas sem o tempo passado.

Meu instinto natural é o google “conjugaison finir” para encontrar a gramática correta. Há toneladas de sites lá fora, dê-lhe a resposta. No entanto, eles estão inchados com anúncios. Por exemplo, nouvelobs.com até acaba colocando um grande anúncio de vídeo que empurra a resposta abaixo da dobra. Quão frustrante!

Claro, existem soluções para isso. Eu poderia instalar um verificador de gramática. No entanto, mudo constantemente entre francês e inglês. Damas se confundem com isso o tempo todo corrigindo a linguagem errada. Eu, portanto, evito-os.

Estando no navegador, é muito rápido abrir uma nova guia e google “conjugaison finir”. Se houvesse um site limpo, super rápido e gratuito para me dar a resposta.

Depois de viver com esse dilema há alguns anos, decidi criar meu próprio site com conjugação de verbo francês. Eu também queria resolver problemas que vi com os sites existentes. Estes foram os requisitos que estabeleci para o site:

  1. Design eficiente sem anúncios ou características supérfluas
  2. Nome de domínio fácil de lembrar
  3. Rápido. Realmente, muito rápido. Abaixo de 1 segundo carregamento de página.
  4. Pesquisa integrada
  5. Mobile friendly
  6. Rápido a encontrar no Google

Este artigo documenta minha jornada de construção conjugaison.xyz . Eu vi isso como um bom exercício na construção de um site a partir do zero.

Escolhendo um nome de domínio

Escolher um domínio é sempre complicado. Em primeiro lugar, é sobre branding e para ser fácil lembrar. Em última análise, queria que meu nome de domínio contenha a palavra-chave que eu procuraria. Neste caso, “conjugaison”. Eu então adicionaria o próprio nome do verbo. Olhar para cima a conjugação do verbo “finir” renderia essa consulta de pesquisa “conjugaison finir”.

Infelizmente conjugaison.com já foi tirado (ou estacionado). Assim, foram variantes lógicas laconjugaison.com ou conjugaisonverbe.com . Eu tive que sair do domínio dot com.

Durante minha pesquisa, GoDaddy sugeriu uma alternativa: conjugaison.xyz por apenas 2 $ no primeiro ano. Eu gostei da extensão xyz ponto. Tinha um bom anel e era fácil de lembrar. E em 2 $ era uma pechincha.

E as considerações de SEO? Samuel Lavoie observa que, desde 2012, o Google não oferece pontos de SEO extra aos sites que contêm a palavra-chave. Na verdade eles penalizam sites com correspondência de domínio exato (EDM para breve) se o conteúdo for ruim. EDM é um tópico interessante. Brian Harnish escreveu um guia bastante esclarecedor sobre EDM . Em suma, Samuel acredita que existem 3 critérios que são usados ??para identificar um site de má qualidade: hífen no nome do domínio, uma correspondência de palavras-chave exatas e um nome de domínio funky. Muito ruim para mim, uma vez que conjugaison.xyz atinge 2 desses 3 critérios. O Google pode considerá-lo de má qualidade e diminuí-lo em rankings.

Em primeiro lugar, este site é para mim. Então não vou me preocupar com isso. Se eu um dia decidir competir pelo tráfego de conjugação de verbo francês, considerarei a alteração do nome de domínio. Por enquanto no entanto, conjugaison.xyz é realmente fácil de lembrar para os seres humanos. Quando falo com as pessoas sobre isso, eles se lembram facilmente disso.

Design simples e eficiente

A maioria desses sites faz mais do que a conjugação. Coisas como a definição de palavras, a palavra do dia, as palavras mais utilizadas e assim por diante. No meu caso, eu não me preocupava com isso. Meu site seria lá para fazer apenas uma coisa e para fazê-lo bem – conjugação de um verbo. Com isso em mente, preparei este quadro de arame com o mínimo.

Cabeçalho

O cabeçalho contém um link para a marca que também serve como link para a página inicial; a lista de todos os verbos. Há também uma caixa de pesquisa para encontrar rapidamente um verbo. Em última análise, gostaria que essa caixa de pesquisa usasse a busca do Google e dirigisse para a página correta. Mas esse é um tópico separado que abordarei no artigo de acompanhamento.

Conteúdo

O conteúdo da página contém a conjugação do verbo em questão. É isso aí. Sem barra lateral, sem anúncios, sem verbo do dia ou links para outros verbos.

Rodapé

Raramente alguém alcança o rodapé. É lugar de prática padrão para colocar o autor (e direitos autorais). Isso faz sentido.

desenhar

Bootstrap é bastante onipresente. Eu tenho usado isso há muitos anos e foi a estrutura CSS natural para eu usar. Eu decidi fazer o download apenas do essencial. O Bootstrap 3 possui uma ferramenta Customizer incorporada para baixar o que deseja.

O arquivo final CSS minificado foi 57kb e outros 24kb para o tema. Ok, não está tão mal. Além disso, o arquivo CSS minified não mudaria. Eu definitivamente poderia empurrar esses recursos para um CDN.

Aqui está o design final.

Como torná-lo rápido

A velocidade deve sempre ser considerada uma característica. Eu me esforço para nunca comprometer a velocidade. Eu acredito que um site que demora a carregar é uma falha. Parece que não sou o único. De acordo com um estudo de Akamai e gomez.com , as taxas de abandono aumentam dramaticamente para sites lentos. A maioria dos usuários espera que um site seja carregado em menos de 2 segundos. Vou tentar fazê-lo sob 1 segundo.

Quando um desenvolvedor pensa em um site rápido, diferentes tecnologias aparecem em suas mentes. Há linguagens de back-end: Java, python, nó JS, C #, ruby, PHP. Existem bancos de dados: MySQL, MS SQL, Mondo DB. Existem bibliotecas e estruturas de front-end: React, Angular, Vue, jQuery simples. Existem servidores de metal nu, VPS (servidores privados virtuais) e contêineres docker. Finalmente, também se considera usar um CDN (rede de entrega de conteúdo) para servir conteúdo estático, como imagens, arquivos JavaScript e CSS.

Back-end

Para conjugaison.xyz – um site puramente estático – a tecnologia back-end é mais uma questão de preferência e conhecimento pessoal. Ou Java, Node JS ou PHP teriam feito o trabalho. Escolhi o PHP porque já tenho experiência em criar sites e aplicativos usando LAMP (Linux Apache MySQL PHP).

Em março de 2017 , mudei de Rackspace para o Amazon Lightsail. Fiquei muito satisfeito com a qualidade e o preço do VPS. Eu tenho um servidor de 1GB de RAM que me custa um meere 10 USD por mês em que eu hospedo todos os meus projetos pessoais. Eu escolhi uma pilha LAMP alimentada por Bitnami. Bitnami LAMP é Ubuntu pré-configurado com Apache, MySQL e PHP. Ele também tem o PageSpeed para armazenar em cache recursos JS, CSS e imagem. Ele também inclui frameworks PHP populares como Codeigniter, Laravel ou Zend. O Bitnami LAMP está bem documentado e fácil de usar.

O HTTPS é crucial hoje em dia e graças ao Vamos criptografar, a instalação de um certificado SSL é fácil e completamente gratuita. Bitnami fornece um excelente Vamos criptografar como orientar .

A parte dianteira

No front-end eu decidi não usar nada – nenhum Javascript em tudo. Isso é correto, você leu certo. NO JAVASCRIPT . conjugaison.xyz consiste em páginas web estáticas. Eu, portanto, decidi explorar o quão longe eu conseguiria não carregar qualquer Javascript.

Neste ponto, eu considerei se eu deveria gerar páginas da web estáticas ou construir as páginas on-line usando o PHP.

Solução 1 – Páginas estáticas em CDN

Minha primeira tentativa foi criar uma página estática por verbo e empurrá-los para um CDN. Isso é mais de 2000 páginas web estáticas. Como experimentei com a construção de páginas estáticas, acertei o problema de que qualquer alteração de design ou qualquer correção de erro exigiria regenerar as páginas estáticas 2000+ e re-empurrá-las para o CDN. A atualização de páginas do 2000+ no CDN leva tempo. Mesmo com boas ferramentas CI (integração contínua), não há como superar o atraso na atualização dessas páginas.

A solução da página estática parecia realmente arcaica por dois motivos. Primeiro, seria muito ineficiente. Isso me lembrou os dias em que costumava usar arquivos FTP para o servidor. Hoje em dia, executar um git pull no servidor é muito mais eficiente – apenas as mudanças de busca.

Em segundo lugar, com arquivos estáticos, perderia o dinamismo de construir páginas on-line. Preferi essa opção muito mais do que páginas estáticas.

Você pode assumir que as páginas de construção ao longo do tempo são muito mais lentas que as páginas web estáticas. Bem, a resposta para isso é sim e não como mostro na próxima seção.

Solução 2 – HTML gerado pelo servidor

Minha segunda tentativa foi usar o PHP para gerar dinamicamente o HTML. Minha hipótese aqui foi que meu servidor poderia renderizar o HTML e enviá-lo rapidamente o suficiente. Meu público-alvo está geograficamente concentrado na costa leste da América do Norte, na província francófona de Québec. Meu servidor Amazon Lightsail está localizado em Ohio. Achei que o site carregaria rapidamente. Certamente, o tempo suficiente para o primeiro byte (TTFB) era 40ms. Isso é muito rápido. No geral, de Montreal, o documento HTML veio em menos de 200ms, às vezes muito mais rápido. Minha hipótese foi comprovada.

Não ter que se preocupar com os CDNs neste momento me deu a maior vantagem de poder picar em tempo real no site da prod. Fazer uma mudança no site simplesmente envolveu a atualização de um arquivo PHP no servidor e voilà!

Como nota lateral, nada supera o dinamismo ea velocidade de implantação de um idioma interpretado. No meu caso, eu simplesmente uso o git como meu CI. No servidor, eu lanço “git pull” e tudo está atualizado. A simplicidade é felicidade.

Claro, se o meu servidor for atingido com milhares de pedidos por segundo, essa é outra história. O CDN oferece a vantagem de não bater no servidor. Não acho que a conjugação do verbo francês seja tão popular. Então não vou me preocupar com isso.

Pesquisa integrada e experiência do usuário

Não ter que baixar, analisar, interpretar e executar o Javascript fez a página ainda mais rápida. Estamos tão acostumados a ter o Javascript carregado nas páginas hoje em dia. Com React, Vue ou Angular, não há como contorná-lo. Felizmente, o meu site não exige nada disso. É apenas HTML. Algo muito satisfatório voltando ao básico.

A única questão que tive foi sobre o formulário de pesquisa integrado.

 <form class = "search" action = "/ recherche" target = "_ top"> 
 <input name = "term" type = "text" placeholder = "Trouver un verbe" 
 value = "<? = isset ($ term)? $ termo: ''?> "/> 
 </ form>

Bem, uma vez que a apresentação de formulários é embutida em HTML (eu costumo esquecer que depois de anos usando jQuery e bibliotecas de Javascript). Pressionar enter apenas envia para o servidor. E já que minhas páginas são tão leves e carregam muito rápido, não há necessidade de AJAX do lado do cliente. Quando uma pesquisa é realizada, o navegador adiciona string de consulta ?term=miner e carrega a nova página do servidor. Por exemplo, escrevendo mineiro na caixa de pesquisa, carrega a página https://conjugaison.xyz/recherche?term=miner .

Melhorando a experiência do usuário de pesquisa

A pesquisa envolve cargas de duas páginas. O primeiro lista os resultados da pesquisa. O usuário então clica no verbo desejado para uma segunda carga de página. Isso poderia ser mais rápido? Por que não mostrar a conjugação completa do verbo de correspondência mais próximo abaixo dos resultados da pesquisa. Eu modifiquei o site para fazer exatamente isso. Agora você está garantido para ter uma conjugação de verbos após qualquer pesquisa, desde que encontremos uma correspondência. Além disso, o termo de pesquisa permanece quando você clica em outro verbo correspondente.

No back-end, a página de pesquisa /recherche simplesmente faz um redirecionamento para a página /verbe . Em nosso caso particular, este é o redirecionamento:

Ligar para https://conjugaison.xyz/recherche?term=miner .

Reroutes para https://conjugaison.xyz/verbe/miner?term=miner .

Eu gosto dessa solução. É como uma mistura de Google. Estou me sentindo sortudo com os resultados de pesquisa diretamente incorporados na página para evitar bater na página do navegador. Muito eficiente.

Abrir Pesquisa

Alguns anos atrás, o Chrome apresentou a pesquisa diretamente na barra de endereços do navegador. Lembro-me desse dia – foi um ah ha! momento. Ele eliminou uma caixa de entrada, melhorando assim a experiência do usuário. Em um ponto também, o autocompleto foi adicionado à barra de endereços mostrando buscas anteriores e endereços de sites visitados à medida que você digitou.

Recentemente, descobri outra coisa legal sobre a barra de endereços – pesquisa integrada no site. Abra uma nova guia do navegador e digite “conjugaison.xyz”. Observe o espaço e observe que uma barra vertical aparece. Qualquer coisa que você digitar depois chamará a pesquisa integrada no meu site.

Pesquisa de navegador integrada via Pesquisa Aberta

Isso é possível graças ao OpenSearch . OpenSearch “é uma coleção de tecnologias que permitem a publicação de resultados de pesquisa em um formato adequado para distribuição e agregação” ( OpenSearch na Wikipedia ). Os feeds RSS e Atom são parte disso. Então, é a pesquisa do navegador integrada.

Para ativar o OpenSearch no seu site, você precisa criar um documento de descrição do OpenSearch ; um arquivo XML que informa os mecanismos de pesquisa sobre o URL a ser chamado para executar a pesquisa. Aqui está o opensearch.xml no meu site .

 <OpenSearchDescription xmlns = "http://a9.com/-/spec/opensearch/1.1/" xmlns: moz = "http://www.mozilla.org/2006/browser/search/"> 
 <ShortName> conjugaison.xyz </ ShortName> 
 <Descrição> Conjugaison des verbes in English </ Description> 
 <InputEncoding> UTF-8 </ InputEncoding> 
 <Image width = "16" height = "16" 
 tipo = "imagem / ícone-x"> 
 https://conjugaison.xyz/favicon.ico </ Image> 
 <Url type = "text / html" method = "get" 
 template = "https://conjugaison.xyz/recherche?term={searchTerms}"> </ Url> 
 </ OpenSearchDescription>

A etiqueta Url informa ao navegador para procurar com um HTTP GET usando o URL especificado. Ele diz que o resultado será um documento HTML.

Além disso, você deve adicionar uma meta tag do link em seu documento HTML para informar os navegadores e permitir a descoberta automática do seu plugin de pesquisa .

 <link rel = "search" type = "application / opensearchdescription + xml" href = "/ opensearch.xml">

Rápido e amigável no celular

O Bootstrap é responsivo fora da caixa, portanto, o site já era móvel. A única mudança necessária foi impedir que a barra de navegação se colapsasse em telas estreitas. Com um pouco de CSS, consegui obter os seguintes resultados sensíveis em iPad e iPhone 4. Em uma tela muito estreita, a linha da marca está escondida na barra de navegação. A caixa de pesquisa cai abaixo da marca. Eu também encurtei o título para garantir que o conteúdo importante esteja acima da dobra.

E o desempenho no celular? Realizei testes adicionais usando a Auditoria de desempenho das Ferramentas do desenvolvedor. Ele mede o desempenho como seria experimentado em um dispositivo móvel típico e conexão 3G (o código emula o celular por aceleração da velocidade de conexão para 1,6Mbs , a velocidade média de conexão 3G).

Aqui está a auditoria:

Com uma pontuação de 98/100 e um tempo de 2.100 para interativo, é muito bom, mas duas vezes meu objetivo definido de 1 segundo? Análises adicionais apontam para uma coisa que desacelera a página: a fonte personalizada que estou usando. De acordo com a auditoria, perdemos 570ms carregando e pintando a fonte Courgette. Eu, portanto, execute um experimento removendo a fonte personalizada. Reiterei a auditoria:

Com uma pontuação perfeita de 100 e 790ms de tempo para interativo, isso é bastante substancial! Não carregar essa fonte personalizada corta-se mais de 1.200ms – duas vezes o que a auditoria informou!

Aguarde, vamos colocar algum contexto em torno disso …

Primeiro, a auditoria de desempenho emula um dispositivo móvel médio em execução no 3G. Isso exclui meu público-alvo em Québec que possui conexões recentes de iPhones e LTE. Em segundo lugar, mede a primeira carga e não conta para cargas subseqüentes, pelo que os recursos são armazenados em cache.

Este ponto é importante. O navegador irá armazenar em cache a fonte personalizada. Embora a primeira carga possa demorar 2 segundos, as cargas subseqüentes devem demorar menos de 1 segundo.

No final, decidi que a fonte personalizada era importante para o design de conjugaison.xyz . Eu, portanto, decidi manter Courgette sacrificando o primeiro tempo de carregamento.

SEO

SEO ou otimização de mecanismos de pesquisa é uma besta grande e peluda. Geralmente, consiste em duas partes: SEO no local versus SEO fora do site. O SEO no local trata de fazer um site de busca amigável. Pensa como sitemaps, robots.txt, dados estruturados, meta tags (título, descrição), palavras-chave e assim por diante …

O SEO fora do site é sobre a criação de links – obtendo outros sites apontando para o seu, a fim de criar autoridade, relevância e confiança .

Não abordarei SEO off-site neste artigo. Um dia, eu posso decidir competir pelo tráfego no entanto, por enquanto, conjugaison.xyz é para mim em primeiro lugar.

Voltando à minha lista de desejos, continua a haver uma coisa a olhar para: Pesquisa do Google. Eu quero ser capaz de google “conjugaison finir” e encontrar o meu site rapidamente. Como mencionei, existem muitos sites estabelecidos que competem pela palavra-chave “conjugaison”. No entanto, sei pela experiência que o Google considerará um nome de domínio como bastante único. Por isso, posso alterar minha consulta para “conjugaison.xyz finir” e, espero, a página correta do meu site aparecesse como um primeiro resultado. A seguir estão os aspectos relevantes de SEO no local em que trabalhei para atingir meu objetivo.

Palavras-chave

Os bots do motor de busca rastreiam páginas do site procurando por palavras-chave. O Indexer então tenta determinar a respeito do site e das páginas. No meu caso, é bastante simples – conjugação de um verbo. Portanto, cada uma das páginas de 2000+ eu segui este padrão de título: “[verbo] – Conjugaison du verbe [verbo]”. Além disso, eu crio o esquema de URL de forma lógica: conjugaison.xyz/verbe/[verbe].

Sitemap

A melhor prática é criar um arquivo sitemap.xml que contenha uma lista de suas páginas. Para conjugaison.xyz, escrevi um script PHP para gerar o sitemap.xml com as páginas 2000+. O arquivo sitemap.xml fica na raiz do meu site.

Sitelinks Searchbox

Já notou que alguns sites possuem uma caixa de pesquisa diretamente integrada no resultado de pesquisa do Google? É algo chamado Sitelinks Searchbox e bastante fácil de implementar se seu site já possui um mecanismo de pesquisa. Eu precisava apenas de fornecer a marcação adequada para informar a Google Search:

 <script type = "application / ld + json"> 
 { 
 " @context ": " http://schema.org ", 
 " @type ": "WebSite", 
 "url": " https://conjugaison.xyz ", 
 "Ação potencial": { 
 " @type ": "SearchAction", 
 "target": " https://conjugaison.xyz/recherche?term={search_term_string }", 
 "query-input": "nome obrigatório = search_term_string" 
 } 
 } 
 </ script>

Observe que o Google especificamente declara que a marcação do Sitelinks Searchbox deve aparecer apenas em uma página . No meu caso, é a página inicial – o índice de todos os verbos contidos no site.

O Google também fornece uma ferramenta estruturada de teste de dados para ajudá-lo a validar a marcação.

Registrando meu site com a Pesquisa do Google

Para aparecer no Google, o Google deve saber que você existe. O Google fornece uma ferramenta chamada Google Search Console (anteriormente conhecida como Ferramentas do Google para webmasters). Você pode adicionar sua propriedade na web, fornecer um sitemap e pedir ao Google que indexe seu site. O Google Search Console também avaliará seu site, mostrará as estatísticas e fornecerá dicas para otimizar seu site e torná-lo amigável para o mecanismo de busca. Para saber mais, a Kissmetrics tem um bom artigo sobre a Pesquisa do Google .

Eu adicionei conjugaison.xyz no Google Search Console, obtive o Google para indexar o site e depois tentei uma pesquisa no Google para “conjugaison.xyz”. O site apareceu nos resultados da pesquisa, sim! Então tentei procurar um verbo: “conjugaison.xyz finir”. Meu site não apareceu em nenhuma das primeiras páginas de resultados de pesquisa. Porcaria.

Pesquisa específica do site

Descobri então que você pode forçar o Google a pesquisar apenas um site usando este padrão: “site: conjugaison.xyz finir”. É chamado de pesquisa específica do site . Esse resultado de pesquisa me deu apenas um resultado – o da página inicial listando todos os verbos. A página de conjugação parece não estar no índice do Google.

Neste ponto, deixe-me dizer-lhe o mais importante sobre o SEO. É paciência. Você vê que o Google terá tempo para rastrear seu site e adicioná-lo aos resultados de pesquisa. Esperei 1, 2, 3 dias e ainda nada. Na semana seguinte, apenas alguns verbos apareceram. Mais uma semana depois, a magia aconteceu – o Google conseguiu me dar resultados consistentes quando eu estava procurando por um verbo no meu site. A pesquisa de pesquisa “site: conjugaison.xyz finir” finalmente me deu isso:

O Google ainda priorizou a página do verbo na página inicial como primeiro resultado. Bingo.

Empacotando

Estou muito satisfeito com conjugaison.xyz como uma ferramenta pessoal para ver a conjugação do verbo em francês. O site é rápido e a experiência do usuário para a pesquisa de verbo é muito eficiente no navegador, na Pesquisa do Google e no próprio site. Acho que alcancei meu objetivo.

Ainda melhor é o recurso assassino que descobri: a busca integrada do navegador graças à Pesquisa Aberta . Para pesquisar um verbo, basta abrir uma nova guia, digite “conjugaison.xyz” e espaço para entrar no modo de pesquisa. Conforme mostrado no seguinte vídeo, leva-me 5 segundos para pesquisar um verbo. A maioria desse tempo é eu digitando e movendo o mouse. A carga da pesquisa e do site leva menos de 1 segundo.

Agradecimentos especiais a Daniel Tousignant-Brodeur , Pierre-Luc Maheu , Alexis Philippe e Samuel Lavoie por ler rascunhos e dar feedback.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *