Curso de Performance Web
0.0 (0 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
3 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Curso de Performance Web to your Wishlist.

Add to Wishlist

Curso de Performance Web

Aprenda a otimizar a performance de carregamento das suas páginas com várias técnicas de otimização.
New
0.0 (0 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
3 students enrolled
Last updated 8/2017
Portuguese
Current price: $10 Original price: $25 Discount: 60% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 1.5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Melhorar o carregamento de paginas web
  • Compactar arquivos HTML, CSS e JavaScript
  • Reduzir tamanho de imagens, arquivos de áudio e vídeo
  • Juntar varias imagens em uma só CSS Sprite
  • Configurar a expiração de arquivos com htaccess - Apache PHP
View Curriculum
Requirements
  • Para aproveitar o curso é necessário ser desenvolvedor web, esse curso aborda apenas o melhoramento de performance, ou seja o carregamento da pagina web, não tratando de desenvolvimento web.
  • Programadores com conhecimento em HTML, CSS e JS que queiram turbinar a performance de suas páginas web.
Description

Aprenda a otimizar a performance de carregamento das suas páginas com várias técnicas de otimização,  veja  diversas técnicas diferentes para cada arquivo para diminuir o tráfego de suas páginas e tornar suas páginas da Web mais rápidas em todos os dispositivos.

Fazer um site com boa performance é muitas vezes um desafio enorme para desenvolvedores, visto que hoje tudo se movimenta tão rápido, alguns segundos a mais de espera podem significar a desistência do visitante.

Who is the target audience?
  • Desenvolvedores web
Compare to Other Web Accessibility Courses
Curriculum For This Course
9 Lectures
01:33:55
+
Apresentação do Curso
9 Lectures 01:33:55

Vídeo de apresentação do curso de Performance Web. Aprenda a otimizar a performance de carregamento das suas páginas com várias técnicas de otimização,  veja  diversas técnicas diferentes para cada arquivo para diminuir o tráfego de suas páginas e tornar suas páginas da Web mais rápidas em todos os dispositivos.

Fazer um site com boa performance é muitas vezes um desafio enorme para desenvolvedores, visto que hoje tudo se movimenta tão rápido, alguns segundos a mais de espera podem significar a desistência do visitante.

Preview 09:01

Nessa vídeo aula vamos analisar um projeto  desenvolvido sem nenhum tipo de otimização, usaremos 2 ferramentas online e gratuitas que considero como as melhores para a análise da velocidade do carregamento das páginas.

PageSpeed Insights

O PageSpeed Insights é uma ferramenta disponibilizada pelo Google que analisa o conteúdo de uma página web e em seguida dá uma nota (de 0 a 100), chamado de PageSpeed Score, além de gerar sugestões para tornar suas páginas da Web mais rápidas em todos os dispositivos.

WebPageTest

O WebPageTest é uma ferramenta fantástica e muito completa para analisar a performance de websites, permite fazer testes em diferentes locais e navegadores, permite a comparação de sites, permite a gravação de vídeos  entre muitas outras ferramentas avançadas, gera gráficos e relatórios completos.

Preview 08:55

Nessa vídeo aula vamos aprender como utilizar duas ferramentas online e gratuitas capazes de reduzir e muito o tamanho dos seus arquivos de imagem, além de mostrar como reduzir o tamanho de imagens utilizando o programa Fireworks CS5.

TinyPNG

Otimiza suas imagens com um equilíbrio perfeito entre qualidade e tamanho do arquivo .

TinyPNG utiliza técnicas de compressão inteligentes para reduzir o tamanho dos seus arquivos de imagens JPG e PNG. Ao diminuir seletivamente o número de cores da imagem, menos bytes são necessárias para armazenar os dados. O efeito é quase invisível, mas faz uma diferença muito grande no tamanho do arquivo!

Kraken

O Kraken oferece vários modos de otimização, o modo selecionado deve depender de suas necessidades específicas, tais como o tipo de imagem que você está comprimindo e o resultado final que você espera obter para suas imagens.

Veja abaixo os modos de otimização oferecidos pelo Kraken

LOSSY - Com perdas

A otimização lossy normalmente produz uma economia de pelo menos 60% do peso inicial do arquivo com uma economia de 80% a 90%. O modo lossy foi projetado especificamente para produzir sempre imagens de excelente qualidade. Na maioria dos casos, você não será capaz de dizer se o resultado final foi otimizado a partir do original, mesmo após a inspeção.  É o modo recomendamos para a maioria dos usuários e para a maioria dos casos de uso.

LOSSLESS - Sem perdas

Este modo tenta reduzir o tamanho da imagem se possível sem alterar um único pixel, ou seja, nenhuma alteração visual na imagem é feita.

Expert - Especialista

O modo avançado é indicado para usuários que já estão familiarizados com processamento de imagem e otimização. Usando este modo, você pode definir diferentes níveis de qualidade para lossy otimização JPEG e PNG, preservar determinadas entradas nos metadados e automaticamente orientar o resultado final de suas imagens.

Como reduzir o tamanho de imagens
16:20

Nessa vídeo aula vamos aprender como utilizar e conhecer a técnica de CSS Sprite. O CSS sprite proporciona melhor performance ao site e menos requisições HTTP.

O CSS Sprite é a técnica de utilizar uma única imagem que contem várias imagens em posições diferentes dentro dela. Estas imagens apenas aparecerão através da propriedade do CSS background-position.

Um site com muitas imagens pode demorar muito tempo para carregar e gera várias requisições. Através do sprite menos imagens são usadas e ocorre a redução do número de pedidos ao servidor deixando o site muito mais rápido para abrir e carrega todas as imagens do CSS Sprite de uma única vez.

Como juntar várias imagens em uma só - CSS Sprite
16:25

Nessa vídeo aula vamos remover o iframe do Google Mapas do nosso projeto, reduzindo assim a grande quantidade de requisições que o iframe faz. Com isso aumentamos a performance do nosso projeto.

Removendo iframe do Google Maps
08:03

Nessa vídeo aula vamos remover os  iframes de vídeos do nosso projeto e analisar as requisições que os iframes fazem em nossa pagina.

Sabemos que ninguém gosta de navegar em um site lento, já utilizamos várias técnicas para aumentar a velocidade de carregamento do nosso projeto. Algumas destas técnicas diminuem o número de requisições e a quantidade de dados a serem baixados, enquanto outras apenas fazem com que tenhamos a sensação que carregou mais rápido, ajustando a forma com que os arquivos são baixados.

A utilização de iframes é muito comum hoje em dia, seja para adicionar um vídeo, um plugin social, entre muitas outras utilidades. Porém, apesar de importantes e muito utilizados, é importante você saber que esses iframes consomem muitos recursos no carregamento da página prejudicando e muito a performance em geral.

Removendo iframes de vídeos
10:07

Nessa vídeo aula vamos aprender como aproveitar o cache do navegador com htaccess. Aproveitar o cache do navegador consiste em definir uma data de validade nos cabeçalhos de HTTP para recursos estáticos, instruindo o navegador a carregar os recursos baixados anteriormente a partir do disco local e não através da rede.

Por que definir uma data de expiração para os arquivos?

A primeira vez em que um visitante entra na sua página, o navegador irá puxar as imagens, o Javascript, o arquivo de CSS, o Favicon, entre outros e mais o código HTML. Na segunda vez também. E na terceira. E cada um destes arquivos paralelos é uma requisição HTTP e seu servidor precisa se virar para entregar tudo em tempo hábil. O resultado? A performance sofre, o usuário reclama que o site está lento, o robô do Google classifica a página como “pesada” e seu ranking na busca sai prejudicado.

Como resolver? Com expire headers, ou datas de expiração.

Para realizar a configuração de expiração vamos usar o Apache Module mod_expires para saber mais sobre esse modulo acesse a documentação no link abaixo

http://httpd.apache.org/docs/current/mod/mod_expires.html

Como aproveitar o cache do navegador com htaccess
11:08

Nessa vídeo aula vamos aprender como fazer a compactação dos arquivos HTML, CSS e JavaScript para acelerar a performance do nosso site. A redução de recursos refere-se à eliminação de bytes desnecessários, como espaços extras, quebras de linha e recuos. A compactação de HTML, CSS e JavaScript pode acelerar o download, a análise e o tempo de execução.

Você pode reduzir seu HTML, CSS e Javascript online diretamente pelo site:

http://www.willpeavy.com/minifier

Compactação de arquivos HTML, CSS e Javascript
07:42

Nessa vídeo aula vamos aprender como eliminar JavaScript e CSS de bloqueio de renderização no conteúdo acima da borda, Esta regra é acionada quando o PageSpeed Insights detecta que uma página inclui processamento de folhas de estilo externas, que atrasa o conteúdo e causa esse bloqueio.

A forma mais simples de resolver este problema é colocar o conteúdo CSS e JavaScript diretamente no arquivo index, diminuindo assim o numero de requisições e obtendo a solução do problema.

Eliminar javascript e css de bloqueio de renderização no conteúdo acima da borda
06:14
About the Instructor
Ronaldo Aires da Silva
4.3 Average rating
45 Reviews
1,545 Students
2 Courses
Programador Web

Instrutor e desenvolvedor de Sistemas Web, produtor de vídeo aulas para o YouTube. Formando em Tecnologia em Sistemas para Internet pela IFMT. Apaixonado por desenvolvimento web, sempre aprendendo para compartilhar conhecimento.

Focado em compartilhar conhecimento ensinando de uma maneira simples fácil e eficiente desenvolvendo projetos e exemplos reais com as mais novas tecnologias e novas tendências.