Melhore a velocidade do site: abordagem moderna para otimização SEO

Você já teve a experiência de ir a um site e esperar pacientemente para sempre que ele carrega? Provavelmente não, porque ninguém espera para sempre Para um site carregar. Acabamos de fechar a guia do navegador e seguir em frente. O tempo é importante.

Quando se trata de chamar a atenção do usuário, temos apenas uma breve janela de oportunidade. De acordo com Ilya Grigorik, em seu “Velocidade, desempenho e percepção humana” palestra, você só tem um segundo. Um segundo!

Depois desse primeiro segundoocorre uma mudança de contexto mental. Na mente do usuário, faz tanto tempo que eles começam a pensar em outras coisas.

E depois de cerca de 10 segundoso usuário já está entediado e provavelmente fechará a guia do navegador e continuará com o dia deles. O que abordarei neste guia é um processo para otimizar o desempenho do seu site.

Vou usar meu próprio site como exemplo.

Benchmarking inicial

A primeira coisa a fazer é testar o desempenho atual do site. Isso nos ajudará a ver questões relacionadas ao desempenho da web, além de nos ajudar a priorizar nossos esforços. Uma excelente ferramenta para o desempenho do front-end de benchmarking é a ferramenta de análise de desempenho do Google, PagesPeed Insights. Ele verificará seu site e oferece uma pontuação baseada em um conjunto de diretrizes de desempenho e práticas recomendadas.

Aqui está o primeiro resultado que obtive para o celular: E para o desktop: Os desenvolvedores do Google têm outro teste útil disponível, chamado Teste para dispositivos móveis. Esta ferramenta mostrará áreas em potencial para melhorias. Para este teste, está tudo bem no meu site:

Melhorando o desempenho

Existem duas abordagens gerais para melhorar o desempenho do site com o uso de ferramentas de desenvolvedor.

• Você pode usar ferramentas online
• Você pode usar ferramentas de desenvolvimento da web de código aberto em sua máquina

A primeira abordagem é direta: pegue todos os seus arquivos e use as ferramentas on -line para fazer o que precisar (fiapos, minimizar, concatenar etc.). Feito. Bem … não exatamente.

E se você tiver 50 arquivos para minificar? Ou 200? E se você mudar seu código?

Você vai repetir essa tarefa repetidamente? É por isso que abordarei a segunda abordagem, porque é mais flexível e escalável. No entanto, é uma abordagem mais complicada, especialmente no início.

Usaremos Goleum corredor de tarefas JavaScript (semelhante ao Grunt), que fará todo o trabalho por nós. (Se você não souber o que são ferramentas de desenvolvedor como Gulp, Grunt, Bower e Yeoman, verifique meu blog onde eu dou uma breve introdução sobre eles.) Para melhorar a velocidade e o desempenho do site, é isso que faremos:

1. Configurar Gulp
2. Minificar os arquivos CSS e JavaScript
3. Concatenar os arquivos CSS e os arquivos JavaScript
4. Lint Nosso código JavaScript para verificar se há erros e problemas
5. Otimize as imagens
6. Minificar os documentos HTML

Configurando gulp

A primeira coisa a fazer é configurar um ambiente de trabalho de projeto. Tudo o que fiz foi pegar todos os arquivos do meu site e movê -los para uma pasta chamada src no meu computador. A propósito, você precisará de um nó (e NPM) instalado para poder usar o Gulp da maneira que vou descrever.

Veja como instalar o Node.js. Primeiro, precisamos instalar o Gulp globalmente para que seja acessível em qualquer lugar do nosso computador. Basta abrir seu prompt de terminal/comando e digitar:

npm install --global gulp 

Em seguida, vá para a pasta do projeto e instale -a em suas dependências de desenvolvimento.

npm install --save-dev gulp 

Depois disso, você verá uma nova pasta que será criada automaticamente para você chamado node_modules.

É aí que o Gulp e todos os seus outros módulos de nós para o projeto serão armazenados. Há apenas mais um passo a ser executado antes de executar o Gulp: precisamos configurar um arquivo de configuração para que o Gulp saiba quais tarefas executar em nossos arquivos. E isso é tão fácil quanto criar um arquivo chamado gulpfile.js na sua pasta raiz com qualquer editor de texto ou editor de código -fonte.

Aqui está o conteúdo inicial de gulpfile.js:

var gulp = require('gulp'); gulp.task('default', function () {}); 

No momento, não está fazendo nada, mas você ainda pode executá -lo. Basta digitar:

gulp 

E você deve obter uma saída como esta:

[14:12:14] Starting 'default'... [14:12:14] Finished 'default' after 72 ?s 

Agora que temos o Gulp pronto para ir, o próximo passo é criar as tarefas Gulp para realizar todo o trabalho por nós.

Minificando arquivos CSS e JS

Ok, vamos fazer algumas coisas com Gulp!

Primeira tarefa: minimando nossos arquivos CSS e JS. O processo de minificação, o que faz basicamente, é retirar todos os espaços brancos, guias, devoluções de carruagem, novas linhas, comentários e outros caracteres desnecessários de nossos arquivos. Para JavaScript, ele também alterará os nomes de objetos para os mais curtos.

A minificação é realizada para obter um tamanho de arquivo muito pequeno, enquanto ainda preservando todas as nossas regras de estilo e funcionalidade JS. Para minimizar nossos arquivos, precisaremos instalar módulos de nó que nos ajudem com a tarefa. Vamos instalar o Gulp-Minify-CSS Pacote, que minimizará nossos arquivos CSS.

Então vamos usar o Gulp-uplify Pacote para nossos arquivos JavaScript.

npm install --save-dev gulp-minify-css npm install --save-dev gulp-uglify 

Agora que temos nossos módulos necessários, temos que criar a tarefa para cada um. Nós podemos realmente fazer tudo dentro do nosso padrão tarefa, mas prefiro fazer uma tarefa separada para cada tipo de arquivo. Dessa forma, manteremos nosso código mais limpo, mais fácil de ler e manter e, se quisermos, podemos executar a tarefa para o CSS ou os arquivos JS separadamente.

Vamos adicionar nosso Minify-CSS e Gulp-uplify módulos para o topo do nosso gulpfile.js.

var minifycss = require('gulp-minify-css'); var uglify = require('gulp-uglify'); 

Vamos criar algumas tarefas. É isso que eles farão:

1. Leia todos os arquivos .css e .js
2. Minificar o código -fonte dos arquivos
3. Exportar a saída para outra pasta chamada dist

// CSS minification task gulp.task('css', function() { return gulp.src('src/css/*.css') .pipe(minifycss()) .pipe(gulp.dest('dist/css')); }); // JS minification task gulp.task('js', function() { return gulp.src('src/js/*.js') .pipe(uglify()) .pipe(gulp.dest('dist/js')); }); 

Todos os arquivos processados ​​entrarão dentro do dist pasta após a execução das tarefas. Emitindo o gulp comando novamente em seu prompt de terminal/comando criará o dist pasta, com o CSS e JS Pastas dentro que conterão nossos arquivos minificados.

Concatenando os arquivos CSS e JS

Enviar o fio apenas alguns arquivos em vez de um monte deles torna todo o processo de carregar uma página muito mais rápida. Então, o que faremos a seguir é mesclar todos os nossos arquivos CSS em um arquivo .css e todos os nossos arquivos JS em um arquivo .js. E para isso, usaremos os módulos Gulp-Concat-CSS e Gulp-Concat.

$ npm install --save-dev gulp-concat-css $ npm install --save-dev gulp-concat 

Estamos usando módulos diferentes porque Gulp-Concat-CSS é mais apropriado para arquivos CSS, pois ele faz a rebase dos URLs automaticamente.

O Gulp é um sistema de construção baseado em fluxo; portanto, se você deseja aplicar outro processo depois disso, continue com a tubulação. Ambos os módulos requerem um argumento de string com o nome do arquivo concatenado. Nesse caso, estou usando semeano.min.css e semeano.min.js. (Na verdade, não estou usando nenhum JS no meu site, mas farei isso apenas por causa do tutorial.) Primeiro, vamos adicionar nossas dependências no topo:

var concatcss = require('gulp-concat-css'); var concat = require('gulp-concat'); 

Em seguida, a tubulação adicional para as tarefas:

// CSS concatenation + minification task gulp.task('css', function() { return gulp.src('src/css/*.css') .pipe(concatcss('semeano.min.css')) .pipe(minifycss()) .pipe(gulp.dest('dist/css')); }); // JS concatenation + minification task gulp.task('js', function() { return gulp.src('src/js/*.js') .pipe(uglify()) .pipe(concat('semeano.min.js')) .pipe(gulp.dest('dist/js')); }); 

Arquivos JS de linha

O revestimento não ajuda a reduzir o tamanho dos arquivos, mas ajudará a detectar erros e possíveis problemas em nosso código JavaScript.

E se o esticássemos, os erros de JavaScript podem levar a funcionalidade quebrada ou de baixo desempenho e, posteriormente, uma má experiência do usuário. Portanto, linar seu código é uma obrigação, na minha opinião. Jshint é um garfo de outra ferramenta semelhante chamada JSLint.

Então, por que usar o jshint? Basicamente, tudo se resume ao que você prefere. (Se você quiser saber o motivo por trás do Jshint Fork, leia este artigo.) Vamos instalar o jshint:

npm install --save-dev gulp-jshint 

Adicione a dependência:

var jshint = require('gulp-jshint'); 

Precisamos canalizar o processo de linha de código antes de animar nosso código -fonte, ou será difícil depurar se o JSHINT colocar um erro:

// JS linting + minification + concatenation task gulp.task('js', function() { return gulp.src('src/js/*.js') .pipe(jshint()).pipe(jshint.reporter("default")) .pipe(uglify()) .pipe(concat('semeano.min.js')) .pipe(gulp.dest('dist/js')); }); 

O reporter Método é o que produzirá os avisos no prompt de terminal/comando.

Estamos usando o repórter padrão, mas você pode alterá -lo para um diferente.

Otimizando imagens

Quando executamos insights do PageSpeed, ele verificará se as imagens que estamos usando são maiores do que precisam. Podemos retirar todos os metadados das imagens, o que reduzirá o tamanho do arquivo um pouco. Para otimizar as imagens, usaremos gulp-imagemin Para imagens rasters (por exemplo,

Jpg, png e gif) e Gulp-svgmin para arquivos SVG, respectivamente.

$ npm install --save-dev gulp-imagemin $ npm install --save-dev gulp-svgmin 

Aqui estão as tarefas para minimizar imagens e arquivos SVG. Eu acho que é muito auto-explicativo agora:

var imagemin = require('gulp-imagemin'), svgmin = require('gulp-svgmin'); ... // Image optimization task gulp.task('img', function () { return gulp.src('src/img/*.*') .pipe(imagemin()) .pipe(gulp.dest('dist/img')); }); // SVG optimization task gulp.task('svg', function () { return gulp.src('src/svg/*.svg') .pipe(svgmin()) .pipe(gulp.dest('dist/svg')); }); 

No meu caso, isso não fez uma grande diferença na imagem, apenas salvou 543 bytes:

gulp-imagemin: Minified 1 image (saved 543 B - 0.2%) 

Mas lembrei -me de que a imagem era a questão principal nos testes: Isso está acontecendo porque estou usando a mesma imagem para desktop e celular.

Tudo estava bem nos testes de desktop, mas no celular, já que estou usando a imagem original e redimensioná -la, estou desperdiçar Muitos pixels. A solução para isso é ter tamanhos de imagem diferentes para cada ponto de interrupção da mídia. Dessa forma, se você precisar de uma imagem de 200x200px, o navegador baixará apenas esse tamanho, economizando largura de banda ao longo do fio.

Minificando HTML

Minificar nossos arquivos HTML também é importante, e aqui é onde você provavelmente verá a maior economia no tamanho do arquivo. Para minimizar nossos documentos HTML, usaremos o Gulp-Minify-Html.

Além disso, para fazer as alterações nos recursos automaticamente, a partir dos arquivos no src pasta para o dist Pasta, precisamos instalar Gulp-useref.

npm install --save-dev gulp-minify-html $ npm install --save-dev gulp-useref 

Aqui está a tarefa:

var minifyhtml = require('gulp-minify-html'), useref = require('gulp-useref'); ... // Switch URIs to dist files + minify HTML task gulp.task('html', function () { return gulp.src('src/*.html') .pipe(useref()).pipe(minifyhtml()) .pipe(gulp.dest('dist')); }); 

Esta tarefa requer uma pequena alteração nos arquivos HTML (neste caso, há apenas um, o index.html). Precisamos adicionar um comentário especial para o Gulp-useref módulo referenciando um bloco em arquivos de recursos (html5reset-1.6.1.css e semeano.css) isso resultará em um único arquivo (semeano.min.css) após a concatenação e a minificação.

Dessa forma, o index.html no dist Pasta terá apenas uma tag de link:

Observação: Agora que temos todas essas tarefas declaradas que precisamos chamá -las.

Basta adicionar as tarefas criadas ao padrão Dependências de tarefas, ou seja, uma variedade de nomes de tarefas como o segundo argumento:

// Default task gulp.task('default', ['css', 'js', 'img', 'svg', 'html'], function () {}); 

O que isso basicamente significa é que antes de executar o padrão Tarefa, Gulp precisa executar todas essas tarefas primeiro.

Conclusão

Após essas mudanças, podemos ver algumas melhorias na pontuação. Parece uma pequena mudança (apenas 12%), mas após a minificação de nossos arquivos, estamos enviando 33% menos KBs em comparação com antes.

Isso é algo! E não demorou muito tempo para alcançar. Aqui estão algumas outras coisas que podem ajudar a melhorar a velocidade de carregamento de suas páginas da web:

Em guias futuros, compartilharei mais dicas e estratégias e estratégias de otimização de desempenho do site, como fazer alterações na estrutura de nossa marcação HTML, outras soluções para otimizar a entrega de conteúdo e até algumas configurações de servidor que nos darão esse aumento de velocidade final! Sinta -se à vontade para compartilhar este guia no Twitter e no Facebook, se isso foi útil para você. Além disso, se Você tem idéias e dicas para melhorar a velocidade do siteCompartilhe -os nos comentários.

Conteúdo relacionado

Pedro Semeano é um desenvolvedor da Web de pilha completa freelancer com sede em Portugal. Conecte -se a ele em seu site, semeano.me, bem como em Twitter e Girub.