Otimizando o código do site JS e CSS online - um guia detalhado

Ouça este artigo

Otimização de código JS e CSS do site, é um dos aspectos mais significativos da otimização técnica de sites. A razão para isso é a liberação de mais recursos do site, devido à redução de chamadas de banco de dados e melhoria na legibilidade da própria estrutura do código.

Como regra, a otimização de código JavaScript e CSS aumenta significativamente a velocidade de resposta do site. Assim, o site funciona mais rápido e carrega a parte do servidor com menos seriedade.

O conteúdo do artigo:

• Código JS e CSS - o que é?
• Otimizando o código JS e CSS - por que você precisa otimizar scripts e estilos?
• Módulo Gzip para Apache, Nginx e Node.js
• Otimize o Javascript com minificação
• Otimização de CSS para uso de fontes da web
• Usando a opção de download de fonte apropriada
• Otimização de código on-line
• Minimize JS e CSS com plug-ins CMS Wordpress

Código do site JS e CSS - o que é?

JavaScript e CSS são linguagens de programação comuns, cada uma trazendo certa funcionalidade para o site. Graças ao uso das principais linguagens de programação web HTML, JS, CSS, consegue-se uma interação ideal do usuário com o site.

JavaScript é uma linguagem de programação comum. Permite criar vários scripts. A maioria desses scripts é executada no navegador do usuário. JavaScript melhora a interação do usuário com o site. Trazendo um determinado conjunto de informações usando mini-aplicativos (scripts) no site. A visualização e a saída dos scripts JS ocorrem conectando o último no código HTML da página. Quase todos os sites utilizam JS (JavaScript) em sua composição.

CSS - refere-se a uma das principais linguagens de programação do site. CSS (arquivo de estilo) - carrega informações sobre a aparência de quase todos os elementos do site. Da cor e localização à notória animação de um determinado elemento da página.

Otimização do código JS e CSS - por que é necessário?

JS e CSS - por si só, eles têm um código bastante grande e pesado, com muitos supérfluos. É difícil para um navegador ler uma enorme tela de códigos em uma fração de segundo. Assim, o carregamento da página e de todo o site como um todo fica mais lento. A otimização desses arquivos visa reduzir o tamanho do código, eliminando tudo o que é supérfluo. Isso se aplica á:

• Personagens não utilizados e extras;
• espaços;
• Linhas de código inacabadas e não funcionais.

O processo em si é semelhante à compactação de um arquivo normal. O peso e o tamanho deste último tornam-se muito menores. Mas, no entanto, o código torna-se completamente ilegível para os humanos. Mas os robôs e navegadores de pesquisa ignoram perfeitamente e entendem toda a estrutura do arquivo. O tempo gasto na rodada é reduzido várias vezes. Graças a esta compressão, a velocidade de download aumenta e a resposta geral melhora.

Módulo Gzip para Apache, Nginx e Node.js

O Gzip é uma tecnologia incrível que foi criada em uma época em que a Internet não era tão rápida quanto hoje. Os arquivadores eram uma tecnologia popular (desde então, sua popularidade diminuiu, pois as unidades flash USB podem fornecer até 1 TB de armazenamento).

A ideia era usar arquivadores para o tráfego da web na internet (semelhante à criação de arquivos de sites), então o gzip foi projetado para compactar arquivos em servidores da web compactando arquivos estáticos (texto) para 99% de seu tamanho original. Como o JavaScript é um arquivo de texto, o gzip pode ser usado para compactar arquivos JavaScript, bem como reduzir o tempo de carregamento da página.

Otimize o Javascript com minificação

A otimização é um tipo especial de minificação do JavaScript. Esses minimizadores não apenas removem espaços, vírgulas, comentários desnecessários, etc., mas também ajudam a evitar "código morto":

• Compilador de fechamento do Google
• UglifyJS
• Minificador Microsoft AJAX

Otimização de CSS para uso de fontes da web

Google Fonts e criadores de fontes semelhantes revolucionaram as fontes da web, mas algumas linhas de código de fonte podem consumir centenas de kilobytes de largura de banda.

1. Baixe apenas as fontes necessárias: remova as fontes não utilizadas e verifique se novas fontes são necessárias.
2. Baixe apenas os pesos e estilos necessários: a maioria dos fabricantes de fontes pode restringir os downloads a determinados conjuntos de caracteres (por exemplo, apenas latinos), pesos (espessura) e itálico (inclinação). Os navegadores podem renderizar estilos ausentes automaticamente, embora os resultados possam ser ruins.
3. Limite o número de caracteres necessários: fontes raramente usadas podem ser limitadas a determinados caracteres. Por exemplo, o título "CSS Tutorial" no Open Sans pode ser definido adicionando o parâmetro & text= à string de consulta do Google Fonts: fonts.googleapis.com/css? family=Open+Sans&text=CStuorial
4. Considere as fontes variáveis: As fontes variáveis definem uma ampla variedade de estilos, pesos e itálicos usando a interpolação vetorial. O arquivo de fonte é um pouco maior, mas você só precisa de um, não de vários. A fonte recursiva demonstra a flexibilidade das fontes variáveis.
5. Baixe fontes do seu servidor local. Fontes auto-hospedadas são mais eficientes. São necessárias menos pesquisas de DNS e você pode limitar o carregamento do WOFF2, que é compatível com todos os navegadores modernos. Navegadores mais antigos (IE) podem reverter para a fonte do sistema operacional.
6. Considere as fontes do sistema operacional: essa fonte da Web de 500K pode parecer ótima, mas alguém notará se você mudar para o domínio público Helvetica, Arial, Georgia ou Verdana? As fontes seguras para o sistema operacional ou seguras para a Web são uma maneira fácil de melhorar a produtividade.

Usando a opção de download de fonte apropriada

As fontes da Web podem levar alguns segundos para carregar e processar. Você precisa:

1. Mostrar um flash de texto sem estilo (FOUT): a primeira fonte alternativa disponível é usada primeiro, mas é substituída quando a fonte da web estiver pronta.
2. Mostrar flash de texto invisível (FOIT): O texto não é exibido até que a fonte da web esteja pronta. Este é o processo padrão em navegadores modernos, que normalmente esperam três segundos antes de reverter para uma fonte alternativa.
   Nenhum dos dois é perfeito.

A propriedade CSS font-display e a configuração Google Font & display= podem escolher uma alternativa:

• auto: Comportamento padrão do navegador (geralmente FOIT).
• bloco: Efetivamente FOIT. O texto fica invisível por até três segundos. Não há substituição de fonte, mas o texto pode aparecer depois de um tempo.
• swap: Efetivamente FOUT. O primeiro fallback é usado até que a fonte da web esteja disponível. O texto é imediatamente legível, mas o efeito de substituição da fonte pode ser irritante. O Font Style Matcher pode ser usado para definir um fallback de tamanho semelhante.
• fallback: um compromisso entre FOIT e FOUT. O texto fica invisível por um curto período de tempo (geralmente 100 ms), então o primeiro fallback é usado até que a fonte da web esteja disponível.
• opcional: Semelhante ao fallback, exceto que não há substituição de fonte. A fonte web só será utilizada se estiver disponível no período inicial. A exibição da primeira página provavelmente exibirá a fonte alternativa, enquanto as exibições de página subsequentes usarão a fonte da Web baixada e armazenada em cache.

O uso de swap, backup ou opcional pode fornecer um aumento de desempenho perceptível.

Otimização de código JS e CSS online

Na Internet, há um número bastante grande de serviços online. Que em alguns minutos, são capazes de fazer todo o trabalho de rotina de compressão de arquivos de estilo e JavaScript. Todos eles têm seus próprios algoritmos para trabalhar com código. No contexto de tal diversidade, dois serviços mais significativos podem ser distinguidos. Seu limite de compactação efetivo é muito maior do que as ferramentas on-line concorrentes semelhantes. Vamos dar uma olhada nessas duas ferramentas da web:

cssresizer.com
Eficiência de compressão do 84% em comparação com concorrentes próximos. A validade do código é preservada, mesmo com compressão significativa. Dessa forma, você pode obter um ótimo código otimizado. Trabalhar com esta ferramenta é intuitivo e existem vários métodos de compressão:

• Máximo;
• rápido;
• Descompressão;

Você pode compactar por:

• URL - endereço;
• Carregamento de arquivo;
• Entrada direta de código;

Refresh-sf.com

Outra interface web igualmente poderosa para minificar JavaScript, CSS e HTML. A ferramenta usa UglifyJS 2, Clean-CSS e HTML Minifier para funcionar. A eficiência de compressão neste caso chega a 85%, sem violações visíveis da validade do código. A compactação pode ser feita inserindo o código diretamente na janela de ferramentas.

Minimize JS e CSS com plug-ins CMS Wordpress

Como todos sabemos, tem uma distribuição significativa em todo o mundo. De acordo com os dados de 2018, este cms ocupa uma posição de liderança. Considere alguns plugins de otimização populares especificamente para WordPress:

Plug-in de otimização automática

Plugin de otimização de HTML, JS e CSS. É um dos plugins mais populares para acelerar sites no CMS Wordpress. Possui uma interface de configuração simples e funcional. O processo de compressão acontece em tempo real.

• Otimização (HTML, JS, CSS) e configuração de CDN.
• Removendo emojis, fontes do Google, strings de consulta de recursos estáticos.
• Capacidade de otimizar imagens.

Webcraftic Clearfy Plugin

Não tão antigo quanto o plugin anterior. Mas também é procurado e popular entre concorrentes semelhantes. Webcraftic Clearfy - tem uma interface de configuração bastante complexa. Consiste em uma combinação combinada de plugins, para o melhor resultado.

As páginas de configurações são divididas em seções de menu. Assim, é possível otimizar partes específicas do site, por exemplo, HTML. O que este plugin pode fazer?

• Otimização (imagens, JS, CSS, HTML e scripts);
• Transliteração cirílica e remoção de duplicatas. Trabalhando com atributos alternativos e criando o robots.txt adequado. Trabalhando com cabeçalhos de servidor e suas respostas.
• Removendo widgets não reclamados do WordPress.
• Ocultando a versão do WordPress e removendo variáveis de consulta de consultas estáticas. Ocultando o login do autor e a página de login do administrador.
• Remoção global ou limpeza de comentários. Salve o controle nos comentários.
• Configurando o pulso do WordPress e o painel de administração superior.
• Controle sobre os componentes do plug-in.

Em conclusão, uma certa conclusão pode ser tirada. Com base no exposto, compactar js e css não é uma coisa tão difícil. Graças a essas ações, a velocidade de resposta do seu projeto aumentará significativamente.

Lendo este artigo:

• Otimização de desempenho da página da web
• Otimizando CSS para velocidade do site - 9 maneiras

Obrigado por ler: AJUDANTE DE SEO | NICOLA.TOP