{"id":9368,"date":"2018-11-13T13:50:31","date_gmt":"2018-11-13T15:50:31","guid":{"rendered":"https:\/\/king.host\/blog\/?p=9368"},"modified":"2025-09-22T23:07:20","modified_gmt":"2025-09-23T02:07:20","slug":"performance-em-projetos-web","status":"publish","type":"post","link":"https:\/\/king.host\/blog\/tecnologia\/performance-em-projetos-web\/","title":{"rendered":"Projetos web: entenda a import\u00e2ncia da performance"},"content":{"rendered":"<p><strong>Performance<\/strong> \u00e9 um dos <strong>fatores mais importantes<\/strong> para o <strong>sucesso de projetos web e neg\u00f3cios online<\/strong> atualmente.<\/p>\n<p>Afinal, sites com desempenho lento frustram visitantes com a espera de carregamento de p\u00e1ginas e, assim, eles seguem sua jornada pela web em busca de alternativas mais r\u00e1pidas. Com tantas op\u00e7\u00f5es e fontes de informa\u00e7\u00f5es dispon\u00edveis, a impaci\u00eancia acaba sendo uma caracter\u00edstica da era digital.<\/p>\n<h2>Entenda dois conceitos sobre performance de projetos web<\/h2>\n<h3>Page Speed \/ Velocidade de p\u00e1gina<\/h3>\n<p>Trata-se essencialmente \u00e0 velocidade com a qual p\u00e1ginas da web s\u00e3o baixadas a partir dos servidores de hospedagem, depende da aplica\u00e7\u00e3o e do servidor web.<\/p>\n<h3>Tempo de carregamento da p\u00e1gina<\/h3>\n<p>Aqui se leva em conta a dura\u00e7\u00e3o entre o clique no link e a visualiza\u00e7\u00e3o de todo o conte\u00fado na p\u00e1gina da web no navegador do usu\u00e1rio.<\/p>\n<p>&#8220;Em s\u00edntese, o <strong>carregamento depende da a\u00e7\u00e3o do su\u00e1rio<\/strong>; j\u00e1\u00a0a velocidade, do <strong>desempenho do servidor e do qu\u00e3o bem o site est\u00e1 otimizado<\/strong>&#8220;, explica o especialista em suporte da KingHost, Andr\u00e9 Brasil.<\/p>\n<p>Plugins de otimiza\u00e7\u00e3o de desempenho, scripts do lado do servidor e ajustes finais <strong>t\u00eam um impacto importante<\/strong> e percept\u00edvel na velocidade das p\u00e1ginas, mas\u00a0o que faz mesmo <strong>a diferen\u00e7a \u00e9 pensar em performance\u00a0desde os princ\u00edpios dos projetos.<\/strong><\/p>\n<p>Apesar dessa necessidade de levar em conta o desempenho desde o in\u00edcio, alguns desenvolvedores web e propriet\u00e1rios de neg\u00f3cios online tendem a <strong>ignorar os tempos de carregamento de p\u00e1gina durante o desenvolvimento de seus projetos<\/strong> e estrat\u00e9gias de design.<\/p>\n<p>Este comportamento pode ser definido pela express\u00e3o <strong>\u201ctiro no p\u00e9\u201d<\/strong>.<\/p>\n<p>Para se ter uma ideia, em <strong><a href=\"http:\/\/www.nytimes.com\/2012\/03\/01\/technology\/impatient-web-users-flee-slow-loading-sites.html?pagewanted=all&amp;_r=0\" target=\"_blank\" rel=\"noopener\">uma pesquisa<\/a><\/strong>\u00a0engenheiros da Google conclu\u00edram que o tempo de carregamento da p\u00e1gina quase impercept\u00edvel de <strong>0,4 segundos<\/strong> \u00e9 suficiente para fazer com que usu\u00e1rios pesquisem menos.<\/p>\n<p>O especialista em performance web da Microsoft e cientista da computa\u00e7\u00e3o Harry Shum, cita\u00a0<strong>0,25 segundos como uma diferen\u00e7a grande em tempo de carregamento de p\u00e1gina<\/strong> &#8211; seja mais r\u00e1pido ou mais lento &#8211; esse n\u00famero m\u00e1gico dita vantagens ou desvantagens competitivas para as empresas online.<\/p>\n<h2>E o que acontece quando as empresas n\u00e3o otimizam suas p\u00e1ginas?<\/h2>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"aligncenter wp-image-11292 size-full\" src=\"https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2017\/04\/pexels-photo-147408.jpeg\" alt=\"\" width=\"484\" height=\"252\" title=\"\" srcset=\"https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2017\/04\/pexels-photo-147408.jpeg 484w, https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2017\/04\/pexels-photo-147408-300x156.jpeg 300w, https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2017\/04\/pexels-photo-147408-400x208.jpeg 400w\" sizes=\"(max-width: 484px) 100vw, 484px\" \/><\/p>\n<p><a href=\"http:\/\/www.webperformancetoday.com\/2013\/12\/11\/slower-web-pages-user-frustration\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Pesquisas<\/strong><\/a> junto a usu\u00e1rios americanos revelam que:<\/p>\n<ul>\n<li><strong>1 em cada 4 visitantes<\/strong> abandonaria um site que leva\u00a0mais de <strong>4 segundos<\/strong> para carregar. <strong>46% dos usu\u00e1rios n\u00e3o voltariam<\/strong> a visitar sites com desempenho insatisfat\u00f3rio;<\/li>\n<li>Propriet\u00e1rios de sites t\u00eam apenas <strong>5 segundos<\/strong> para envolver os visitantes antes que\u00a0eles pensem em sair da p\u00e1gina. <strong>74% dos usu\u00e1rios<\/strong> que acessam um site <strong>mobile<\/strong> fechariam a p\u00e1gina ou visitariam outro endere\u00e7o, caso ela demorasse <strong>mais<\/strong> de 5 segundos para carregar.<\/li>\n<li><strong>47% dos clientes de com\u00e9rcio eletr\u00f4nico<\/strong> t\u00eam a expectativa de que uma p\u00e1gina carregue em menos de <strong>dois segundos<\/strong> antes de considerarem deixar o site;<\/li>\n<li><strong>40% dos usu\u00e1rios<\/strong> abandonariam o site no terceiro segundo de espera, antes que\u00a0uma ferramenta analytics\u00a0identifique\u00a0a sua presen\u00e7a no site. O <strong>tempo m\u00e9dio de pico de carga para convers\u00f5es s\u00e3o meros 2 segundos<\/strong> &#8211; muito mais r\u00e1pido do que milh\u00f5es de sites por a\u00ed.<\/li>\n<\/ul>\n<p>Apesar desses serem n\u00fameros de pesquisas realizadas nos EUA, podemos inferir que por aqui n\u00e3o seria muito diferente, especialmente em <strong>rela\u00e7\u00e3o\u00a0\u00e0 import\u00e2ncia da velocidade<\/strong>.<\/p>\n<h2>Defini\u00e7\u00e3o de metas de desempenho<\/h2>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-11291 size-full\" src=\"https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2017\/04\/pexels-photo-94654.jpeg\" alt=\"\" width=\"484\" height=\"252\" title=\"\" srcset=\"https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2017\/04\/pexels-photo-94654.jpeg 484w, https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2017\/04\/pexels-photo-94654-300x156.jpeg 300w, https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2017\/04\/pexels-photo-94654-400x208.jpeg 400w\" sizes=\"(max-width: 484px) 100vw, 484px\" \/><\/p>\n<p>Um bom ponto de partida para otimiza\u00e7\u00e3o web \u00e9 <strong>definir metas de desempenho<\/strong>, ou seja, <strong>definir um determinado valor para um indicador de desempenho espec\u00edfico<\/strong> e ajustar os outros fatores para que sua p\u00e1gina n\u00e3o exceda a meta estabelecida.<\/p>\n<p>Por exemplo, para seu site responsivo, a <strong>BBC determinou que cada p\u00e1gina deveria ser utiliz\u00e1vel para o usu\u00e1rio dentro de 10 segundos em uma conex\u00e3o GPRS<\/strong>. Ao estabelecer isso, <strong>definiu suas metas para o peso da p\u00e1gina<\/strong> e n\u00famero de requisi\u00e7\u00f5es\u00a0levando em conta esse objetivo.<\/p>\n<p>H\u00e1 uma s\u00e9rie de fatores que podem ser usados para definir\u00a0uma m\u00e9trica ou <strong>KPI de performance<\/strong> em seus projetos, como por exemplo:<\/p>\n<ul>\n<li>tempo de carregamento da p\u00e1gina;<\/li>\n<li>o peso da p\u00e1gina;<\/li>\n<li>pontua\u00e7\u00e3o PageSpeed Insights (PSI);<\/li>\n<li>tempo de carregamento total;<\/li>\n<li>n\u00famero de requisi\u00e7\u00f5es.<\/li>\n<\/ul>\n<p>Caso algum desses fatores esteja fazendo com que a sua meta seja excedida, voc\u00ea pode, por exemplo, otimizar ou remover um recurso ou ativo da p\u00e1gina.<\/p>\n<h3>Responsividade<\/h3>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-11519 size-full\" src=\"https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2017\/05\/pexels-photo-267447.jpeg\" alt=\"\" width=\"484\" height=\"252\" title=\"\" srcset=\"https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2017\/05\/pexels-photo-267447.jpeg 484w, https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2017\/05\/pexels-photo-267447-300x156.jpeg 300w, https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2017\/05\/pexels-photo-267447-400x208.jpeg 400w\" sizes=\"(max-width: 484px) 100vw, 484px\" \/><\/p>\n<p>Design responsivo n\u00e3o faz sentido sem investimentos em alta performance. Se voc\u00ea come\u00e7ar o desenvolvimento pensando no projeto a partir de uma perspectiva <em>mobile first<\/em>, \u00e9 poss\u00edvel evitar muitos problemas que os sites desktop tendem a enfrentar quando acessados via smartphones.<\/p>\n<h3>Um cultura da performance<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-11201 size-full\" src=\"https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2017\/03\/pexels-photo-75083.jpeg\" alt=\"\" width=\"484\" height=\"252\" title=\"\" srcset=\"https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2017\/03\/pexels-photo-75083.jpeg 484w, https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2017\/03\/pexels-photo-75083-300x156.jpeg 300w, https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2017\/03\/pexels-photo-75083-400x208.jpeg 400w\" sizes=\"(max-width: 484px) 100vw, 484px\" \/><\/p>\n<p>Em seu artigo sobre como desenvolver uma &#8220;<strong><a href=\"http:\/\/calendar.perfplanet.com\/2012\/creating-a-performance-culture\/\" target=\"_blank\" rel=\"noopener noreferrer\">cultura da performance<\/a><\/strong>&#8220;, Steve Souders (Engenheiro\u00a0na Google) comentou que, especialmente para empresas de tecnologia, investir em uma cultura de performance \u00e9 como investir na cultura da qualidade. De acordo com ele, pr\u00e1ticas ruins se espalham t\u00e3o r\u00e1pido quanto boas pr\u00e1ticas, por isso uma cultura da performance pode ter o poder de impulsionar qualidade e, por consequ\u00eancia, impulsionar os resultados nas empresas.<\/p>\n<p>Aqui na <strong>KingHost sabemos\u00a0da import\u00e2ncia da\u00a0performance nos projetos web<\/strong>,\u00a0por isso estamos sempre\u00a0empenhados em trazer tecnologias de ponta aos nossos\u00a0clientes. Essas\u00a0novidades s\u00e3o tanto em termos de monitora\u00e7\u00e3o e otimiza\u00e7\u00e3o, como na <strong><a href=\"https:\/\/king.host\/blog\/2015\/01\/alta-performance-com-a-kinghost\/\" target=\"_blank\" rel=\"noopener noreferrer\">integra\u00e7\u00e3o do Google PageSpeed e New Relic<\/a><\/strong> junto ao painel de controle dos clientes, como tamb\u00e9m na ado\u00e7\u00e3o r\u00e1pida e difus\u00e3o de tecnologias avan\u00e7adas, como foi o <strong><a href=\"https:\/\/king.host\/blog\/2015\/12\/php-7-suporte-disponivel-na-kinghost\/\" target=\"_blank\" rel=\"noopener noreferrer\">caso do PHP7<\/a><\/strong> e da <a href=\"https:\/\/king.host\/blog\/2015\/11\/novidade-phalcon-em-hospedagem-compartilhada\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>disponibiliza\u00e7\u00e3o do Phalcon<\/strong><\/a>. Por fim, a preocupa\u00e7\u00e3o com o\u00a0desempenho tamb\u00e9m \u00e9 refletida no investimento\u00a0em\u00a0<a href=\"https:\/\/king.host\/blog\/2016\/01\/revenda-de-hospedagem-ilimitada\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>infraestrutura robusta e outras vantagens<\/strong> <\/a>aos clientes.<\/p>\n<p><i><span style=\"font-weight: 400;\">Al\u00e9m disso, voc\u00ea pode tamb\u00e9m fazer uma an\u00e1lise do seu site e obter um diagn\u00f3stico de pontos de melhoria que voc\u00ea pode aplicar no seu site para alcan\u00e7ar mais visibilidade e melhorar o posicionamento dele perante o Google. Utilize a<\/span><\/i><strong><a href=\"https:\/\/king.host\/ferramenta-seo?utm_source=lab&amp;utm_medium=post&amp;utm_term=projetos-web&amp;utm_content=projetos-web-so-71&amp;utm_campaign=content-marketing\" target=\"_blank\" rel=\"noopener noreferrer\"><i> ferramenta de SEO<\/i><\/a><\/strong><i><span style=\"font-weight: 400;\"> e fa\u00e7a uma an\u00e1lise completa agora mesmo.<\/span><\/i><\/p>\n<p>Fique ligado no LAB, o <strong><a href=\"https:\/\/king.host\/blog\/\" target=\"_blank\" rel=\"noopener noreferrer\">Blog da KingHost<\/a><\/strong> para mais novidades!<\/p>\n<p>[post atualizado em 13\/11\/2018]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Performance \u00e9 um dos fatores mais importantes para o sucesso de projetos web e neg\u00f3cios online atualmente. Afinal, sites com desempenho lento frustram visitantes com a espera de carregamento de p\u00e1ginas e, assim, eles seguem sua jornada pela web em busca de alternativas mais r\u00e1pidas. Com tantas op\u00e7\u00f5es e fontes de informa\u00e7\u00f5es dispon\u00edveis, a impaci\u00eancia [&hellip;]<\/p>\n","protected":false},"author":253,"featured_media":19502,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1179,8],"tags":[1376],"class_list":["post-9368","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimento","category-tecnologia","tag-desenvolvimento"],"_links":{"self":[{"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/posts\/9368","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/users\/253"}],"replies":[{"embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/comments?post=9368"}],"version-history":[{"count":14,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/posts\/9368\/revisions"}],"predecessor-version":[{"id":42328,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/posts\/9368\/revisions\/42328"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/media\/19502"}],"wp:attachment":[{"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/media?parent=9368"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/categories?post=9368"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/tags?post=9368"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}