5 dicas de HTML para criar um site gratuito de carregamento rápido

Propaganda

Minhas HyperText Markup euas habilidades de angústia (HTML) estão enferrujadas por certo, mas talvez isso me qualifique para este artigo. De volta ao dia em que Amigos ainda estava na TV e a AOL enviava montanhas-russas e mini-frisbees diariamente, eu estava criando sites para carregar em modems dial-up. Com o passar do tempo, tive a coragem de pensar que ainda existem muitas pessoas com conexões sem banda larga (dial-up) e continuei a criar sites com base nisso.

Finalmente desisti web design e desenvolvimento Quer aprender Web Design? 7 canais do YouTube para você começarO YouTube possui milhares de vídeos e canais para iniciantes em web design. Aqui, examinamos alguns dos melhores para começar. consulte Mais informação quando a qualidade do conteúdo começou a ser empurrada para o lado pela quantidade de conteúdo. Sites em Flash, muitas imagens, pop-ups, pop-unders, controles deslizantes etc. Confie no seu conteúdo de qualidade e você não precisa desse cotão. Confie no seu conteúdo e você pode tornar seu site incrivelmente rápido.

Com um site hospedado em um serviço gratuito, é mais rápido definitivamente Melhor. Por quê? Como "gratuito" tende a atrair muitas pessoas e o servidor precisa distribuir sua página, além de milhares de páginas de outras pessoas que não são otimizadas. É como tentar passar por um comboio de Kenworths puxando troncos com seus porcos Jimmy haulin. Mas se você tem um Porsche pequeno, fica muito mais fácil fazer isso.

Aqui estão algumas dicas para cortar a gordura, em nenhuma ordem específica.

1. Use tabelas com moderação

As mesas são um problema. No começo, eles eram usados ​​para organizar o design e colocar o conteúdo no formato de tabela. À medida que os layouts de design ficaram mais complexos, as tabelas ficaram maiores e mais aninhadas, e isso sempre significa uma diminuição no tempo de carregamento.

Cascendente Style SO CSS surgiu e realmente ajudou o problema de usar tabelas para o layout. Infelizmente, os fabricantes de navegadores não conseguiram entender a idéia de padrões - e ainda não conseguem. O que parecia ótimo no CSS no Firefox parecia o café da manhã de um cachorro no IE e possivelmente nem era renderizado no Safari. Não me inicie IE5 em um Mac. Ainda estou em terapia por causa disso.

Use apenas tabelas para o layout do conteúdo que deve estar em um formato tabular Tableizer: Gerar tabela HTML a partir da planilha do Excel consulte Mais informação - como uma lista de preços ou estatísticas de hóquei. Isso reduz o número de tabelas e a profundidade do aninhamento, o que significa tempos de carregamento mais rápidos. Aprendendo CSS Os 5 principais sites para aprender CSS online consulte Mais informação fará uma grande diferença, se você precisar de um layout sofisticado.

2. Use HTML para criar cores

Sim, sou canadense, então é uma cor com um 'u' para mim. Sei que o HTML é centrado na América, portanto o atributo é "cor". Aprenda o seu códigos de cores hexidecimais e use-os para animar o conteúdo em vez de imagens.

Tente adicionar o atributo color aos seus elementos HTML para incrementá-lo. Isso funciona especialmente bem em tabelas ou na tag body, como:

Se você fosse um navegador, seria mais rápido ao carregar 7 caracteres simples de #FF00FF ou uma imagem de 10 × 10 pixels da cor fuschia alguns milhares de vezes? Essa é uma pergunta retórica, você na fila de trás. Abaixe sua mão.

3. Link para scripts / folhas de estilo

Se você usa um certo JavaScript (JS) ou CSS repetidamente em todo o site, pense em criar seu próprio arquivo e chamá-lo, em vez de colocá-lo em todas as páginas. Como um navegador tende a armazenar em cache um arquivo e chamá-lo primeiro antes de verificar com o servidor, seu navegador já terá esse script ou CSS pronto para uso. Isso significa menos HyperText Ttransferência Pchamadas rotocol (HTTP), o que significa uma página de carregamento mais rápida.

Como chamar um JavaScript externo:

–>

Por que coloquei essas tags de comentário na chamada para o JavaScript? Porque nem todo navegador está configurado para ler scripts. A adição das tags de comentário faz com que os navegadores com scripts desativados apenas pulem sobre ela, em vez de enviar mensagens de erro irritantes.

Como chamar uma folha de estilos em cascata externa:

É simples assim. O atributo href é onde você define o local da sua folha de estilos. O restante dos atributos informa ao navegador o que é esse arquivo, para que ele saiba o que fazer com ele.

Alguns desenvolvedores podem usar o @importar método para chamar uma folha de estilo. No Internet Explorer, é como ter seu na parte inferior do arquivo, fazendo com que ele carregue a página inteira e ENTÃO renderize os estilos nela. Não é bom.

4. Combine seus scripts comumente usados ​​em um arquivo

Muitos desenvolvedores da Web usarão os mesmos scripts repetidamente. Talvez haja um script de relógio e um script de calendário e talvez algum tipo de script de efeito especial que eles usem em todas as páginas. Em vez de ter 3 arquivos separados, com 3 chamadas HTTP separadas, coloque os scripts em um arquivo e chame-o uma vez. Isso reduz suas chamadas HTTP em 66% e também é armazenado em cache. Você acelera o demônio, você! Antes de levantar a mão novamente, sim, você pode fazer o mesmo com arquivos CSS.

5. Não use HTML para alterar o tamanho de suas imagens

Se você deseja usar uma imagem de 1000 × 1000 pixels em sua página da Web, mas deseja que ela tenha apenas 250 × 250 pixels, altere-a em um editor de imagens. Algumas pessoas 'encolherão' a ​​imagem usando HTML como este:

Se a imagem de 1000 × 1000 pixels tiver 2 MB de tamanho, redimensioná-la com HTML não diminui o tamanho do arquivo! De fato, pode levar mais tempo para carregar, porque agora o navegador precisa colocar 10 libras de cocô em uma sacola de 2 libras, por assim dizer. Não é uma tarefa fácil.

Espero que essas dicas o ajudem. Dê-me um recado nos comentários, se você os usar ou tiver outras idéias de otimização de HTML para compartilhar.