# Tag: Performance > Posts do dpw marcados com a tag Performance. URL: https://dpw.dev/tag/performance/ ## Posts - [Como o Baseline ajuda a usar menos JavaScript](https://dpw.dev/javascript/baseline-menos-javascript/): Guia prático para auditar as dependências do package.json e descobrir o que a plataforma web já resolve nativamente, usando o Baseline como bússola. - [A grande expansão do CSS](https://dpw.dev/css/a-grande-expansao-do-css/): CSS agora faz nativamente o que Floating UI, GSAP, Framer Motion e react-select exigiam em JavaScript. Veja quanto isso economiza e o que ainda falta. - [Bem-vindo ao dpw 2026!](https://dpw.dev/miscelanea/dpw-2026/): O blog foi reconstruído do zero com Astro 5, MDX, SCSS com ITCSS e mais. Conheça a stack, as decisões técnicas e o que mudou nesta nova versão. - [6 maneiras erradas de usar useEffect de React](https://dpw.dev/react/6-maneiras-erradas-useeffect-react/): Evite 6 maneiras erradas de usar useEffect em React. Aprenda alternativas melhores e otimize seus componentes para melhor performance e legibilidade. Corrija! - [5 dicas para melhorar a performance CSS](https://dpw.dev/css/5-dicas-performance-css/): Otimize o desempenho do seu CSS com 5 técnicas comprovadas. Aprenda minificação, compressão, CSS crítico e remoção de código não utilizado. Acelere! - [prefers-reduced-data: como funciona a nova media query](https://dpw.dev/css/prefers-reduced-data/): Prefers-reduced-data: economize dados do usuário com CSS. Media query nativa para detectar preferência por menor consumo de dados móveis. Respeite! - [Em performance Web, o que é velocidade?](https://dpw.dev/ui-ux/performance-web-velocidade/): Performance web: entenda a importância da velocidade em sites. Impacto direto em UX, conversão, SEO e sucesso de negócios digitais. Otimize já! - [Deslocamento de Layout (Layout Shift) e Cumulative Layout Shift (CLS): guia completo](https://dpw.dev/ui-ux/deslocamento-layout-shift-cumulative-layout-shift-cls/): Guia completo sobre Cumulative Layout Shift (CLS). Aprenda a evitar deslocamentos indesejados de layout e melhorar drasticamente Core Web Vitals. Otimize! - [SVG inline... Com cache!](https://dpw.dev/html/inline-svg-cache/): Inline SVG e estratégias avançadas de cache. Otimize SVG inline com service workers, sprites SVG e técnicas de reutilização eficiente. Otimize agora! - [font-display: controle de exibição de fontes para ajuste em performance](https://dpw.dev/css/font-display-controle-de-exibicao-de-fontes-para-ajuste-em-performance/): Font-display: otimize carregamento de fontes web drasticamente. Controle exibição durante download e melhore performance com swap, fallback e optional. Use! - [Lazy loading nativo de imagens e iframes](https://dpw.dev/html/lazy-loading-nativo-imagem-iframe/): Lazy loading nativo para imagens e iframes HTML. Melhore drasticamente performance com carregamento sob demanda usando HTML puro. Sem JavaScript! - [Second Meaningful Content: a pior métrica de performance](https://dpw.dev/miscelanea/second-meaningful-content-performance-metrica/): Second Meaningful Content: a pior métrica de performance web. Entenda pintura de conteúdo significativo e real impacto em UX. Analise criticamente! - [Retrospectiva 2018](https://dpw.dev/miscelanea/retrospectiva-2018/): Relembre 2018 no dpw: breakpoints CSS, CSS Blocks da LinkedIn, otimização de estilos e novo tema do blog. Veja os artigos que marcaram o ano! - [Como encontrar CSS morto e otimizar estilos](https://dpw.dev/css/css-morto-otimizar-estilos/): Técnica simples para identificar e remover CSS morto em produção. Descubra como otimizar estilos e melhorar performance eliminando código legado. Limpe! - [CSS Blocks: introdução à API](https://dpw.dev/css/css-blocks-api-introducao/): Conheça CSS Blocks da LinkedIn: otimizador revolucionário que reescreve CSS para máxima performance. Introdução à API e casos de uso práticos. Otimize! - [LinkedIn anuncia CSS Blocks, o novo otimizador de CSS](https://dpw.dev/css/css-blocks-linkedin-otimizador-css/): Descubra CSS Blocks da LinkedIn: tecnologia que otimiza automaticamente seu CSS. Aprenda como reduzir drasticamente o tamanho dos arquivos CSS. Revolucionário! - [rel=noopener para benefícios de performance e segurança](https://dpw.dev/miscelanea/relnoopener-performance-seguranca/): Use rel=noopener para performance e segurança web. Proteja sites de vulnerabilidades sérias e melhore velocidade em links externos. Proteja-se! - [Retrospectiva 2016](https://dpw.dev/miscelanea/retrospectiva-2016/): Descubra os melhores artigos de 2016: Motion UI, JavaScript funcional, APIs RESTful e validação de formulários. Confira os destaques do ano! - [Desmistificando o CSS crítico "acima da borda"](https://dpw.dev/css/css-critico-acima-da-borda-desmistificando/): Análise crítica sobre CSS inline crítico acima da borda: vantagens, desvantagens e quando realmente usar. Otimização de páginas vs sites. Desmistifique! - [Accelerated Mobile Pages (AMP): 1 ano depois](https://dpw.dev/miscelanea/accelerated-mobile-pages-amp-1-ano-depois/): Análise do primeiro ano do projeto Google AMP na prática. Descubra estatísticas de adoção, impacto real na performance e resultados de publishers. Veja! - [Delegação de Evento (Event Delegation) em JavaScript puro](https://dpw.dev/javascript/delegacao-de-evento-event-delegation-javascript/): Domine Event Delegation em JavaScript puro sem jQuery. Aprenda a técnica essencial para melhorar performance e gerenciar eventos dinamicamente. - [Retrospectiva 2015](https://dpw.dev/miscelanea/retrospectiva-2015/): Retrospectiva 2015 do desenvolvimento para web. Relembre principais artigos, conquistas e momentos marcantes do ano no blog. Nostalgia pura! - [Accelerated Mobile Pages](https://dpw.dev/miscelanea/accelerated-mobile-pages-amp/): Entenda o projeto Google AMP para páginas móveis instantâneas. Conheça a tecnologia, limitações e como melhorar dramaticamente a performance mobile. - [Imagens responsivas com srcset e sizes](https://dpw.dev/css/imagens-responsivas-srcset-sizes/): Srcset e sizes: imagens responsivas baseadas em viewport HTML. Controle inteligente de resolução e densidade de pixels para performance otimizada! - [Melhore o tempo de carregamento com subconjuntos de fontes](https://dpw.dev/miscelanea/melhore-o-tempo-de-carregamento-com-subconjuntos-de-fontes/): Melhore carregamento com subconjuntos de fontes (font subsetting). Reduza drasticamente tamanho de webfonts incluindo apenas caracteres necessários. - [Prevenindo "layout thrashing" com FastDom](https://dpw.dev/javascript/prevenindo-layout-thrashing-fastdom/): Aprenda a prevenir layout thrashing com FastDOM. Otimize manipulações DOM evitando reflows forçados e melhorando drasticamente a performance! - [O que todo desenvolvedor front-end deve saber sobre renderização de páginas web](https://dpw.dev/miscelanea/desenvolvedor-frontend-renderizacao-paginas-web/): Entenda como navegadores renderizam páginas web. Guia essencial sobre DOM, CSSOM e otimização de performance que todo dev front-end precisa saber. - [Como criar a ilusão de páginas mais rápidas](https://dpw.dev/miscelanea/como-criar-a-ilusao-de-paginas-mais-rapidas/): Melhore a performance percebida do seu site. Técnicas comprovadas para criar ilusão de velocidade: indicadores, skeleton screens e lazy loading. - [Namespacing em JavaScript](https://dpw.dev/miscelanea/namespacing-em-javascript/): Namespacing em JavaScript: organize código e evite conflitos globais. Padrões de encapsulamento essenciais para projetos escaláveis e manuteníveis. Organize! - [dpw2014 - parte 2: desempenho / performance](https://dpw.dev/miscelanea/dpw2014-parte-2-desempenho-performance/): Guia completo sobre performance web no dpw2014 - Parte 2. Aprenda técnicas de otimização avançadas, front-end performance e melhores práticas. Otimize! - [Gulp](https://dpw.dev/javascript/gulp/): Gulp: automatize tarefas de desenvolvimento front-end. Configure build, minificação, otimização de assets e workflow eficiente com JavaScript. Automatize! - [Eventos JavaScript](https://dpw.dev/javascript/eventos-javascript/): Fundamentos de eventos JavaScript completamente explicados. Aprenda como funcionam, propagação, listeners e criar interatividade em aplicações web. Domine! - [Conhecimentos essenciais de JavaScript para quem já usa jQuery](https://dpw.dev/javascript/conhecimentos-essenciais-javascript-para-quem-ja-usa-jquery/): Descubra conhecimentos essenciais de JavaScript para quem usa jQuery. Aprenda querySelector, classList e manipulação DOM com vanilla JS moderno. Evolua! - [Imagens em web design responsivo: atributo srcset e elemento picture](https://dpw.dev/html/imagens-responsivas-srcset-picture/): Imagens responsivas com srcset e picture HTML. Sirva imagens perfeitamente otimizadas por dispositivo usando HTML nativo e art direction. Otimize! - [Equivalentes nativos de JavaScript para funções jQuery](https://dpw.dev/javascript/javascript-jquery-equivalentes-funcoes-nativos/): Equivalentes nativos JavaScript para substituir jQuery. Migre para Vanilla JS moderno com métodos DOM nativos mais eficientes e performáticos. Evolua! - [Media queries e download de imagens](https://dpw.dev/design/media-queries-e-download-de-imagens/): Media queries e download de imagens: otimização mobile essencial. Evite downloads desnecessários com estratégias de imagens responsivas inteligentes. Economize! - [Como loading de JavaScript funciona: DOMContentLoaded e OnLoad](https://dpw.dev/javascript/como-loading-de-javascript-funciona-domcontentloaded-e-onload/): Entenda como loading de JavaScript funciona: DOMContentLoaded vs OnLoad. As 3 janelas de tempo para carregar e executar scripts. Performance web otimizada! - [Performance como design](https://dpw.dev/design/performance-como-design/): Performance como design: otimização é UX essencial. Velocidade não é apenas técnica, é experiência do usuário e requisito fundamental de design! - [Webshims Lib: Polyfills de recursos de HTML5 e CSS3](https://dpw.dev/css/webshims-lib-polyfills-html5-css3/): Conheça Webshims Lib: polyfills completos para HTML5 e CSS3. Biblioteca de fallbacks para recursos modernos em navegadores antigos. Use jQuery! - [Pré-carregamento de recursos com HTML5](https://dpw.dev/html/pre-carregamento-de-recursos-com-html5/): Pré-carregamento de recursos com HTML5 (preload/prefetch). Otimize drasticamente performance antecipando download de assets críticos. Acelere seu site! - [Como melhorar a performance do site limpando HTML, CSS e imagens](https://dpw.dev/css/como-melhorar-a-performance-do-site-limpando-html-css-e-imagens/): Aprenda técnicas práticas para melhorar performance limpando HTML, CSS e imagens. Aumente velocidade de carregamento e reduza drasticamente bounce rate! - [Escrevendo CSS eficiente](https://dpw.dev/css/escrevendo-css-eficiente/): Escreva CSS eficiente para melhor performance web. Entenda seletores otimizados, especificidade e técnicas de otimização para sites rápidos. Otimize! - [Usando Modernizr para detectar features de HTML5 e CSS3](https://dpw.dev/css/modernizr-detectar-features-html5-css3/): Modernizr: detecte features HTML5 e CSS3 no navegador facilmente. Biblioteca essencial para feature detection e progressive enhancement moderno. Use! - [Como usar .ready() antes de incluir a jQuery](https://dpw.dev/javascript/como-usar-ready-antes-de-incluir-jquery/): Técnica inteligente para usar jQuery .ready() antes de incluir a biblioteca. Melhore performance colocando scripts no fim do documento HTML. Otimize! - [Como otimizar códigos jQuery e aumentar a performance do front-end](https://dpw.dev/javascript/otimizar-codigos-jquery-aumentar-performance-front-end/): Otimize códigos jQuery para melhor performance front-end. Aprenda seletores eficientes, caching inteligente e boas práticas de programação. Acelere! - [8 maneiras de melhorar a performance de um site](https://dpw.dev/miscelanea/8-maneiras-de-melhorar-a-performance-de-um-site/): Acelere seu site com 8 técnicas front-end comprovadas. Aprenda otimização de imagens, minificação de código e redução de requisições HTTP. Melhore agora! - [Ferramentas e recursos para desenvolvimento web](https://dpw.dev/indicacoes/ferramentas-e-recursos-para-desenvolvimento-web/): Ferramentas essenciais para desenvolvimento web profissional. Recursos, bibliotecas e utilidades práticas para aumentar produtividade e qualidade de código! - [Como otimizar imagens para Web: guia de otimização de imagens](https://dpw.dev/miscelanea/como-otimizar-imagens-web-internet/): Guia completo de otimização de imagens: formatos JPG, PNG, WebP e GIF. Aprenda compressão, lazy loading e técnicas para melhorar performance. - [Pergunte-se a si mesmo: questões para desenvolver um bom site](https://dpw.dev/design/pergunte-se-a-si-mesmo-questoes-para-desenvolver-um-bom-site/): Perguntas essenciais para desenvolver um bom site web. Auto-questionamento sobre objetivos, público-alvo e estratégia antes de começar. Planeje! - [Desenvolvimento para web 2.0](https://dpw.dev/miscelanea/desenvolvimento-para-web-2/): Anúncio histórico da versão 2.0 do blog desenvolvimento para web. Conheça mudanças revolucionárias de design, performance e identidade visual. Relembre! --- Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR). Guia para agentes: https://dpw.dev/llms.txt Índice completo: https://dpw.dev/sitemap-index.xml Feed: https://dpw.dev/rss.xml