Primeiras aulas do curso Performance Web I: otimizando o front-end

Performance Web I: otimizando o front-end

Economizando bytes - Porque otimizar o front-end?

Olá, seja bem-vindo ao nosso curso de Otimizações de Performance na Web. Meu nome é Sérgio Lopes e sou instrutor aqui na Alura e na Caelum. Eu trabalho bastante com front-end há muitos anos e sou especializado em performance.

Talvez você já tenha até visto algumas das minhas palestras sobre isso, em vários eventos, falando do tema de performance. Performance, claro, é bastante importante, certo?

Todo mundo quer o site o mais rápido possível, porque isso deixa os usuários mais satisfeitos. Os usuários mais satisfeitos ficam mais felizes com a minha marca, compram mais na minha loja, voltam mais no meu site e falam melhor do meu site para as pessoas.

Então queremos um site mais rápido. Nesse curso, vamos tratar então, sobre otimizações de performance nas nossas páginas HTML e nos nossos sites.

A primeira pergunta que as pessoas me fazem é: “Sérgio, mas que tipo de otimizações? Por que esse curso está na categoria de ‘front-end’?” Por quê? Geralmente temos os sites que envolvemos as duas pontas: o front-end e o back-end.

O back-end é onde desenvolvemos as coisas no servidor, onde você vai escrever o seu código Java, PHP, .NET e tal. E o front-end é onde fica HTML, CSS, JavaScript e tudo mais.

Nesse curso, vamos focar em performance de front-end. O que eu quero dizer com isso? Eu não vou falar, por exemplo, de performance de banco de dados e não vou falar como escrever o melhor código PHP ou coisas do tipo.

Vamos falar em como melhorar a performance do ponto de vista do HTML, do CSS e do JavaScript. O que é muito bacana, porque isso se aplica a todos os tipos de cenários, todos tipos de aplicativos web e todos tipos de sites.

Não interessa se você faz PHP, NET ou Java. Você vai escrever em HTML, CSS e JavaScript. Não só isso. Não só esse curso apela para todo mundo que trabalha web, independentemente do back-end, como também, vários estudos mostram que a performance final para o usuário, aquela performance que conta quando ele abre no navegador ou no celular, no 3G dele - aquela performance que o usuário sente, geralmente é muito mais culpa do front-end do que do back-end.

O que eu quero dizer com isso? A não ser que você esteja fazendo alguma coisa muito grave no back-end, do tipo alguma busca no banco de dados extremamente demorada, geralmente, na prática, o gargalo maior de performance na maior parte dos sites reais, acaba sendo em técnicas de front-end. “Como assim, Sérgio?”

Coisas que você faz para carregar o seu CSS, como você faz para carregar o seu JavaScript ou como que você cria as suas imagens e disponibiliza as suas imagens. Tudo isso acaba afetando, na prática, no mundo real, muito as páginas web. Independentemente do back-end que você estiver trabalhando.

Então é bacana darmos uma discutida um pouco nisso e é esse o foco desse curso e também, do curso número 2, de performance em front-end que continua depois dele.

“Sérgio, o que vamos fazer aqui então?” O nosso projeto vai ser desenvolver o site da Alura. Na verdade, o site da Alura já está desenvolvido. Essa é a versão atual, hoje, enquanto eu estou abrindo e criando o curso.

Claro, o site vai ser mudado. Talvez a versão que você abra não seja exatamente igual à essa, mas eu vou dar os arquivos iniciais para você. A ideia é que esse site da Alura já foi desenvolvido e já foi codificado, mas essa é uma versão não otimizada.

E o nosso trabalho ao longo desse curso é descobrir os gargalos de performance nessa página, analisar esses gargalos, ver o impacto deles, resolvê-los e corrigi-los para melhorar essa página.

Então o nosso site vai ficar mais rápido do que ele é hoje. Visualmente, interativamente, é exatamente a mesma coisa: você vai abrir o site no começo e no fim. É o mesmo site, só que um muito mais rápido que o outro.

Ao longo do curso, vamos analisar tudo isso daí e ver várias técnicas diferentes para poder melhorar a performance. Então, vamos lá! Vamos começar a estudar.

Economizando bytes - Minificação

Uma coisa que mapeia diretamente com a performance do site, e meio que instintivamente já sabemos, é o tamanho. O tamanho do site, o tamanho dos arquivos que você vai ter que baixar.

O tamanho do CSS, do HTML, do JavaScript e das imagens, esse tipo de coisa. Então, uma primeira coisa que podemos fazer para otimizar o nosso site é diminuir o tamanho dos nossos arquivos.

Primeiro, vamos dar uma olhada em como estão os nossos arquivos hoje. Esse aqui é o projeto que tínhamos baixado. Eu vou na pasta “site” e tem o site todo ali dentro. Se eu quiser, eu posso até dar uma olhada no tamanho total aqui.

Eu vou dar um “Obter informações” aqui no meu Mac. Ele está me dizendo que esse site todo tem 1.7MB. Posso até ver detalhadamente o porquê e o que é cada uma dessas coisas.

Por exemplo: só de CSS, eu tenho 51KB. Só de JavaScript, vamos ver, eu tenho 273KB. Imagens e assim por diante. Então, o que podemos fazer primeiro é tentar diminuir esses tamanhos.

Claro, tem o jeito óbvio, que seria: eu saio cortando funcionalidades na minha página. Por exemplo: eu tenho aqui um monte de CSS que fazem várias coisas, eu posso fazer menos coisas, eu tenho menos código.

Mas vamos assumir que você não vai querer cortar coisas do seu site, você quer o seu site completo. Como, mesmo assim, otimizá-lo? Você quer diminuir esse tamanho. O que precisamos pensar é no tipo de dado que eu estou mandando para o navegador e no tipo de dado que seria desnecessário eu mandar para o navegador. Ou seja, eu quero mandar menos coisas.

Então se pegarmos o nosso código-fonte - vou olhar aqui, por exemplo, o CSS. É um CSS normal, que estamos acostumados a escrever. Tem os seletores, as propriedades, os valores e assim por diante. Tem também alguns comentários, é interessante para podermos compreender esse código. Mas pense só: esses comentários são importantes para o navegador renderizar a sua página?

Não. Esses comentários são para desenvolvedor, para nós entendermos o que esse código está fazendo. Imagine que para executar a página no navegador, esse comentário é totalmente desnecessário, assim como esse outro aqui debaixo.

Não só isso. Será que eu preciso apertar a tecla “Enter” aqui para deixar o código organizado? Não! Aliás, se for pensar, para o navegador mesmo, se você colocar tudo na mesma linha, começa a tirar esses espaços todos aqui. Vai tirando e assim por diante. Tudo isso daqui é CSS válido.

Na verdade, deixamos o código organizado porque queremos que o código fique legível para nós, humanos, escrevermos. Mas para o computador, tanto faz. Então imagine as teclas “Espaço”, “Tab” e “Enter”, não estamos dando no nosso código, além dos comentários que são desnecessários na hora de executar. Isso, nós podemos remover e diminuir o tamanho dos nossos arquivos.

Aí você fala: “Sérgio, não! Mas espere. Eu vou ficar aqui, removendo na mão essas coisas?” Não! Temos ferramentas que fazem esse tipo de coisa para nós. Talvez você já tenha até visto esse tipo de procedimento antes na sua vida. Isso aqui é o que chamamos de Minificar. Então queremos minificar o nosso CSS, por exemplo, minificar o nosso JavaScript. Vou te mostrar como vamos fazer isso.

Primeiro, eu vou “googlar” aqui de um jeito fácil. Vou procurar por “minify css e js”. Vou achar um site qualquer, peguei aqui o primeiro resultado. Eu quero mostrar para você o que significa uma ferramenta de minificação, se você nunca viu uma na vida.

Vou pegar esse mesmo arquivo CSS que eu tinha mostrado e vou selecionar o conteúdo dele. Copiei e vou vir nesse site qualquer aqui, pode ser qualquer um outro. Vou colar o meu CSS e vou clicar aqui no botão CSS.

O que ele me devolve? Olhe só, olhe esse código aqui. Isso aqui é o tal do código minificado. Ele até fala para mim o quanto ele economizou aqui. Dê uma olhada: eu mandei para ele 1.02KB e ele me devolveu 725 bytes.

Ou seja, economizou o quê? Quase 20%? Quase 30% do nosso tamanho. Imagine isso para todos os nossos arquivos. De cara, só por colocar esse código no minificador, você economiza 30%, vamos dizer, de todos os arquivos que você escreveu.

Posso fazer a mesma coisa com o meu código JavaScript. Dê uma olhada: vou procurar aqui um código JavaScript qualquer. Vou pegar aqui esse código. Imagine que eu tenho essa funcionalidade. Vou selecionar e vou vir aqui no site. Dei um “reset” ali. Vou jogar o código JavaScript. Cliquei no botão e está lá, ele me deu o código JavaScript todo minificado.

Inclusive, não sei você já reparou isso, mas quando usamos algumas ferramentas, por exemplo aqui no meu site, eu tenho o JQuery. Então eu baixei o JQuery uma vez na vida. Repare que ele está até relativamente grande, 259KB.

Não sei se você já reparou quando você vai baixar uma ferramenta dessa, por exemplo um framework como o JQuery, ele te dá algumas opções de download. Ele te dá a opção de - quer ver? Vamos abrir o site do JQuery.

A hora que eu for baixar o JQuery, ele pergunta assim para mim: “Olhe, você quer o JQuery na versão comprimida ou descomprimida?” Está vendo? Olhe só: comprimida ou descomprimida? O que significa isso?

Significa - vou até abrir os dois para podermos ver. Significa a primeira versão descomprimida – deixe-me jogar no navegador. Descomprimido significa aquele código gigante, todo arrumado, cheio de comentários e tudo mais.

A comprimida, eu vou jogar aqui. Repare: é um código “linguição” em uma linha só, que você fala: “Sérgio, pelo amor de Deus, não consigo ler isso daí!” Mas não é para você ler, é para o navegador ler.

E o navegador lendo, ele vai conseguir entender isso do mesmo jeito que o outro código. Vou usar isso daqui em produção. Você fala: “Sérgio, mas dá diferença?” Olhe só aqui, no caso do JQuery - vamos dar uma olhada. Eu tinha colocado 259KB.

Vou jogar agora esse arquivo novo que eu baixei. Repare a diferença: 86KB. Então uma coisa que você já pode fazer é apagar aquelas bibliotecas que você tinha baixado sem minificar. Vou até renomear aqui para ficar do jeito que estava antes e vou usar a versão minificada. Então, o que eu faço? Eu baixo os frameworks minificados e minifico os demais arquivos usando uma ferramenta, como essa aqui do site.

Se você ainda der uma olhada aqui no site, você vai ver que além do JavaScript e do CSS, também é possível minificar o HTML. Para pensar também: se você abre o nosso HTML – deixe-me voltar para o projeto. Eu vou abrir aqui o HTML.

É a mesma coisa: você também pode ter escrito eventualmente comentários, espaços e coisas que podem ser removidas. Então vamos querer fazer também essa minificação do HTML. Fazer o teste, lá?

Vou colar aqui o HTML e vou clicar no botão. Ele me deu a mesma coisa. Na verdade, aqui, esse site que eu peguei - vou dar um “reset”. Eu preciso configurar o tipo de remoção de coisas que eu quero no meu HTML. Por exemplo: eu quero pegar esse código HTML aqui, eu quero que ele remova os comentários e eu quero que ele também tire os espaços em branco.

E eu quero também - tem um monte de coisa, que ele tira até as aspas dos atributos que são desnecessários. Vou rodar com essas opções e jogar aqui. Repare a diferença agora. Eu tenho aqui, agora o meu HTML “linguição” em um negócio só. Olhe a diferença, que bacana! De 37KB para 31KB, então eu economizei 6KB só nesse HTML.

Então, a ideia é que vamos querer fazer isso bastante.

Economizando bytes - Automação com Gulp

Você fala: “Sérgio, mas eu vou precisar ficar abrindo o site? Abrir aqui e colar meu código?” Não, a ideia é tentarmos automatizar isso de alguma forma. Essas ferramentas que eu usei online aqui, estão - até você pode ver o nome delas aqui, por exemplo, ele se chama Uglify JS, o que minifica o JavaScript. Eu posso instalar e usar isso na minha máquina.

Então eu quero mostrar para você como fazer isso. O Uglify, por exemplo, é uma ferramenta do Node. Então para eu usar isto, eu vou primeiro instalar com “npm install uglifyjs”. Eu vou passar aqui o “-g”, que significa que é global, e ele vai instalar globalmente. Ele vai baixar isso daqui e vai me permitir usar o comando “uglifyjs” na linha de comando. E aí, o que eu posso fazer?

Eu posso passar para ele qual o nome do meu arquivo, então eu vou pegar aqui um arquivo JavaScript qualquer, por exemplo aquele da busca, que tínhamos testado. E ele faz toda a minificação e cospe para mim, aqui no terminal - não é tão útil cuspir no terminal, mas tudo bem - todo esse código minificado. A ideia é que eu posso rodar isso para vários dos meus arquivos.

Você fala assim: “Sérgio, está bom. Eu posso rodar o Uglify, a mesma coisa para o CSS e tal, mas onde eu vou salvar esse arquivo? Será que a ideia é eu pegar tudo isso que eu tinha minificado aqui, todo aquele HTML minificado, pegar isso e substituir no meu arquivo fonte?” Não sei se é uma boa ideia. O arquivo fonte - a ideia é que eu, o desenvolvedor, use para poder dar manutenção no meu site para poder entender o código.

E está fácil de entender esse código, agora? Olhe esse HTML. Impossível! Então como eu faço? Eu quero minificar por questões de otimização, mas não quero estragar o meu código original. Na prática, o que acabamos fazendo é não minificar as coisas no nosso código fonte. Nós criamos uma outra pasta, que duplicamos o conteúdo. Imagine o seguinte: estou no meu projeto e eu tenho essa pasta "site" com todo o meu código fonte.

Não vou fazer as minificações aqui dentro, se não, vou estragar o meu site original, o meu conteúdo original. Eu vou copiar isso daqui para uma outra pasta. Aqui ele gerou cópia do site, mas pode ser qualquer outra coisa. Pode ser, por exemplo: essa aqui é a pasta que vai para a produção, ou muito comum, as pessoas chamarem de “dist”. “Dist”, de distribuição. Então eu vou distribuir esta pasta para o meu servidor, que esta sim, vai ser a pasta otimizada.

Então, qual é a ideia? A ideia é que eu vou nesta pasta “dist” - se eu olhasse aqui, essa pasta “dist” tem uma cópia de tudo. Aqui sim, eu vou pegar o meu HTML, por exemplo, e vou – deixe-me colocar aqui o HTML - e vou colocar aquele HTML minificado, sem estragar o meu HTML original. Mesma coisa na hora que você for fazer aquela minificação na linha de comando - eu tinha mostrado para você o Uglify.

Eu quero pegar o Uglify com “/busca.js”, na pasta “site/”, original. Só que eu quero jogar o conteúdo disso na “/busca.js” da “dist”. Podemos fazer isso de forma bem fácil: eu venho aqui, uso o “-o”, que significa “output” ou saída. E eu falo para ele o seguinte: “Uglify, pegue esse arquivo aqui, que eu tinha escrito originalmente, minifique ele e jogue nesse arquivo final”. Aperto a tecla “Enter” aqui.

Podemos agora conferir: na pasta “dist”, “js “ e “busca.js”. Esse aqui está minificado em uma única linha. “Então está bom, Sérgio, eu entendi que vou minificar eles. Posso usar as ferramentas locais e vou evitar mexer no meu arquivo original, mas tem um último ponto aqui: eu vou precisar ficar rodando isso, arquivo por arquivo?”

Então agora vamos ver o próximo. Agora o outro é, não sei, muito trabalhoso. “Eu vou precisar rodar isso para cada CSS, para cada JavaScript, para cada HTML e assim por diante?” Não, a ideia é tentarmos automatizar isso. Mas tem um ponto: esse curso não é um curso de automatização de “front-end”. Temos um curso disso, específico no Alura, que é o curso de Gulp ou o curso de Grunt.

Você pode ver isso depois, com calma. Aqui eu quero focar nas performances, nos ganhos de performance, principalmente nas próximas aulas, na análise dessa performance e o impacto que isso tem para o usuário.

O que eu quero dizer com isso? Que eu não vou perder tempo mostrando para você como é que funciona o Gulp. Se você quiser, veja o curso de Gulp. Mas eu já trouxe pronto para nós um “gulpfile.js”, que já vem um monte de coisinhas. Por exemplo: se você nunca viu o Gulp na vida, não tem problema, mas só para você ter uma ideia: chute o que isso aqui faz.

Essa é uma tarefa de minificar o JavaScript, que pega todos os JavaScript do “site/”, roda o Uglify, e salva na pasta “dist/”. É isso que eu estou fazendo. Então eu tenho uma automatização para aquele comando dos Uglify. Mesma coisa para o CSS e a mesma coisa para o HTML. Nem se preocupe muito com esse código, depois eu vou deixar o link para você fazer o curso de Gulp, se você tiver interesse.

Mas a ideia é eu te mostrar como é que você roda isso na prática. Primeira coisa é o seguinte: precisamos instalar o Gulp no nosso projeto e todos esses plugins que ele precisa. Você vai rodar o comando “npm install” na pasta do seu projeto, o “project” do performance-web. Terminou a instalação. Para eu poder rodar o Gulp, uma última coisa que eu tenho que fazer é instalar o “gulp-cli -g” globalmente na minha máquina, assim eu vou ter o comando Gulp disponível.

Esse aqui é rapidinho porque é um só. Pronto! Agora eu posso rodar o Gulp na linha de comando. E eu posso rodar o Gulp com as tarefas que eu já tinha deixado preparadas. Por exemplo: eu quero mostrar para você como eu posso usar o Gulp para minificar todos os JavaScript da minha página. Vou rodar “minify-js”. Então eu venho aqui e escrevo: “gulp minify-js” e aperto a tecla “Enter”.

Ele vai usar o meu “gulpfile” e vai dizer que rodou. Vamos conferir se ele rodou mesmo? Lembre-se: eu não estou destruindo as coisas da pasta “site”, essa é minha pasta original. A ideia é eu ir na pasta “dist” e minificar os arquivos dessa pasta. Estou conferindo aqui e estou te mostrando que sim, todos os arquivos JavaScript da pasta “dist” estão minificados agora.

Vou fazer a mesma coisa com o meu CSS. Repare que o CSS não está minificado. Eu vou rodar agora. Eu tenho aqui um “gulp minify-css”. Apertei a tecla “Enter” aqui e ele vai minificar os meus arquivos. Vamos conferir. Olhe só: tenho aqui um monte de arquivos CSS minificados. Repare: tudo em uma linha só, sem comentários, todas aquelas coisas que tínhamos falado.

Podemos até dar uma conferida nos tamanhos disso, o antes e o depois. Vou abrir a pasta “site”, “assets”. Vou abrir uma outra janela, onde eu vou pegar também a pasta “dist”, porque eu quero te mostrar na pasta “dist” e “assets”, qual é a diferença. Vou pegar a pasta CSS, do antes e o depois. Repare: eu tenho aqui em cima o antes e aqui embaixo o depois. Então o arquivo que tinha 1KB, agora ficou com 725.

O arquivo que tinha 545, conteúdo, ficou com 362, e assim por diante. Posso até dar uma olhada no todo, então vou pegar o CSS. A pasta inteira tinha 51KB, como tínhamos visto e agora, a minha pasta inteira possui 41 KB. 10K a menos, para rodar um comandinho que eu coloquei no meu Gulp. Muito bom. Um último ponto é: eu minifiquei o CSS, minifiquei o JavaScript, mas o meu HTML eu tinha minificado na mão, lembra?

Eu tinha copiado e colado do site. Se eu quiser minificar pelo Gulp? Eu deixei preparado também um “minify-html”. Que não vai dar para vermos direito aqui, porque ele vai fazer quase a mesma coisa, mas ele também faz a minificação. Uma coisa que eu deixei são os comentários. Você pode remover os comentários se quiser, é só passar um parâmetro a mais. Mas, ele minificou aqui o meu HTML também.

Sérgio, eu quero rodar essas três coisas. Eu deixei aqui um atalho, que é o seguinte: se você rodar o “gulp minify”, ele vai minificar as três coisas: JavaScript, CSS e HTML e vai escrever tudo na pasta “dist”. Se você quiser tirar a prova dos nove, volte ali, apague a pasta “dist” de novo e copie o site para pasta “dist”. Então, agora eu tenho um “dist” sem minificar e eu rodo o “gulp minify”. Vamos ver que ele vai minificar tudo.

Minificou HTML, minificou aqui. Vamos ver o CSS. Minificou o JavaScript. Então é isso, minifique os seus projetos. Eu fiz aqui na nossa aula com o Gulp porque é uma das ferramentas mais famosas atualmente no “front-end”. Mas tem um monte de ferramentas possíveis para minificação, inclusive para você fazer no “Server-side”, se você quiser.

Por exemplo, você fala: “Sérgio, eu trabalho com PHP e eu não quero trabalhar com o Gulp em ‘build time’!”. Então procure por “php minify css” que você acha um projeto de uma pessoa que fez um minificador de CSS e JavaScript em PHP. Se você entende de PHP, você vai ver que isso daqui é um código PHP muito simples para você usar para minificar no seu “back-end” em PHP. Então aqui, a minha ideia foi te mostrar que minificar é uma coisa bacana, relativamente fácil de fazer.

Você configura as suas ferramentas uma vez. Pode fazer em Node, pode fazer em PHP, pode fazer Java, pode fazer em .NET, com um Gulp ou um Grunt da vida. A ideia é: dê uma procurada nas ferramentas que mais te adequam. Se você não tiver nenhuma ideia, use o Gulp, que é o mais interessante hoje em dia para o mercado de “front-end”.

Mas o ponto é: faça isso, que rapidamente você vai ter site. Por exemplo: vimos aqui ganhos de 20% e 30%, só porque você rodou o comando de minificação. Vamos continuar daqui a pouco.

Sobre o curso Performance Web I: otimizando o front-end

O curso Performance Web I: otimizando o front-end possui 230 minutos de vídeos, em um total de 83 atividades. Gostou? Conheça nossos outros cursos de Automação e Performance em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda Automação e Performance acessando integralmente esse e outros cursos, comece hoje!

Plus

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$85
à vista R$1.020
Matricule-se

Pro

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$120
à vista R$1.440
Matricule-se
Conheça os Planos para Empresas

Acesso completo
durante 1 ano

Estude 24h/dia
onde e quando quiser

Novos cursos
todas as semanas