{"id":57168,"date":"2022-06-28T07:00:00","date_gmt":"2022-06-28T14:00:00","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=57168"},"modified":"2025-05-26T10:32:46","modified_gmt":"2025-05-26T17:32:46","slug":"como-otimizar-seu-site-para-dispositivos-moveis","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/como-otimizar-seu-site-para-dispositivos-moveis\/","title":{"rendered":"Como Otimizar Seu Site para Dispositivos M\u00f3veis"},"content":{"rendered":"\n<p><span style=\"font-weight: 400;\">\u00c9 prov\u00e1vel que voc\u00ea esteja lendo isto <\/span><a href=\"https:\/\/www.statista.com\/forecasts\/1146312\/mobile-internet-users-in-the-world\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">usando um dispositivo m\u00f3vel<\/span><\/a><span style=\"font-weight: 400;\">. Se voc\u00ea n\u00e3o gostar da forma como a p\u00e1gina est\u00e1 estruturada ou do conte\u00fado ser <\/span><a href=\"https:\/\/www.dreamhost.com\/blog\/how-typography-affects-website-conversions\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">dif\u00edcil de ler<\/span><\/a><span style=\"font-weight: 400;\">, provavelmente procurar\u00e1 em outro lugar as informa\u00e7\u00f5es que deseja. Agora coloque-se do outro lado da equa\u00e7\u00e3o e considere quantos usu\u00e1rios voc\u00ea pode perder se o seu site n\u00e3o estiver otimizado para dispositivos m\u00f3veis.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Por \u2018otimizado\u2019, entendemos que seu site deve parecer incr\u00edvel em telas menores. Ele tamb\u00e9m deve <\/span><a href=\"https:\/\/www.dreamhost.com\/academy\/ways-to-improve-website-performance\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">carregar rapidamente<\/span><\/a><span style=\"font-weight: 400;\"> e ser f\u00e1cil de navegar e interagir. Se voc\u00ea conseguir isso para um dispositivo m\u00f3vel, ent\u00e3o seu site tamb\u00e9m deve parecer fant\u00e1stico em uma tela de desktop completa.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Neste artigo, vamos falar sobre o que \u00e9 o design mobile-first e por que ele \u00e9 essencial. Primeiro, vamos explicar <\/span><i><span style=\"font-weight: 400;\">como <\/span><\/i><span style=\"font-weight: 400;\">abordar o design para dispositivos m\u00f3veis. Em seguida, mostraremos algumas maneiras pr\u00e1ticas de otimizar seu site para smartphones e tablets. Vamos come\u00e7ar!<\/span><\/p>\n\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n\n<h2 id=\"h-why-mobile-first-design-is-essential\" class=\"wp-block-heading\"><strong>Por que o Design Mobile-First \u00e9 Essencial<\/strong><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Aproximadamente <\/span><a href=\"https:\/\/www.bankmycell.com\/blog\/how-many-phones-are-in-the-world\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">84% da popula\u00e7\u00e3o mundial<\/span><\/a><span style=\"font-weight: 400;\"> possui um smartphone e muitas vezes v\u00e1rios tipos de dispositivos m\u00f3veis. Isso \u00e9 muito mais do que o n\u00famero de <\/span><a href=\"https:\/\/www.statista.com\/statistics\/670172\/united-states-installed-base-desktops-laptops-tablets\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">pessoas com acesso a PCs e laptops<\/span><\/a><span style=\"font-weight: 400;\">.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Na verdade, muitas pessoas usam smartphones como seu \u00fanico computador, tornando-o a \u00fanica forma de interagirem com a web. Muitas vezes, \u00e9 o \u00fanico computador \u00e0 disposi\u00e7\u00e3o delas. De qualquer forma, a maioria das pessoas carrega seus smartphones <\/span><i><span style=\"font-weight: 400;\">por toda parte<\/span><\/i><span style=\"font-weight: 400;\">.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">N\u00e3o \u00e9 surpresa que o tr\u00e1fego m\u00f3vel tenha aumentado dramaticamente nos \u00faltimos anos. Ele ultrapassou o uso de desktops, com mais de <\/span><a href=\"https:\/\/research.com\/software\/mobile-vs-desktop-usage\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">54% de todo o tr\u00e1fego<\/span><\/a><span style=\"font-weight: 400;\"> na web vindo de dispositivos m\u00f3veis. Isso em compara\u00e7\u00e3o com cerca de 43% de computadores desktop.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Na pr\u00e1tica, esses n\u00fameros significam que se o seu site n\u00e3o estiver otimizado para dispositivos m\u00f3veis, voc\u00ea pode estar perdendo um n\u00famero significativo de usu\u00e1rios. Com tanto conte\u00fado dispon\u00edvel, seu p\u00fablico potencial (e clientes) provavelmente n\u00e3o tolerar\u00e1 uma <\/span><a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/o-que-e-experiencia-do-usuario\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">experi\u00eancia de usu\u00e1rio ruim<\/span><\/a><span style=\"font-weight: 400;\">. Eles certamente buscar\u00e3o o que desejam em outro lugar.<\/span><\/p>\n\n\n\n<h2 id=\"h-what-does-responsive-web-design-mean\" class=\"wp-block-heading\"><strong>O que Significa Design Web Responsivo?<\/strong><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Design responsivo significa que, n\u00e3o importa o tamanho da tela, um site ir\u00e1 preench\u00ea-la adequadamente e apresentar as informa\u00e7\u00f5es de forma clara. Isso pode ser em um telefone, tablet, desktop ou at\u00e9 mesmo um smartwatch.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Quando voc\u00ea navega em um site, deve perceber que ele se adapta ao tamanho da sua tela. Para telas grandes, os elementos aumentar\u00e3o at\u00e9 um certo ponto, para que n\u00e3o pare\u00e7am excessivamente grandes, mas continuam f\u00e1ceis de interagir.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">O mesmo acontece com dispositivos m\u00f3veis. Quando voc\u00ea est\u00e1 usando uma tela menor, voc\u00ea quer que o conte\u00fado do seu site reduza o tamanho, mas n\u00e3o tanto que se torne ileg\u00edvel ou imposs\u00edvel de interagir:<\/span><\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-35202 lazyload\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-5.jpg\" alt=\"A p\u00e1gina inicial do DreamHost em dispositivos m\u00f3veis.\" width=\"900\" height=\"855\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-5.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-5-300x285.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-5-768x730.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-5-600x570.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-5-730x694.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-5-784x745.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-5-877x833.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/855;\" \/><\/h4>\n\n\n\n<p><span style=\"font-weight: 400;\">Websites que conseguem manter esse equil\u00edbrio delicado s\u00e3o considerados <\/span><i><span style=\"font-weight: 400;\">responsivos<\/span><\/i><span style=\"font-weight: 400;\">. O design e o desenvolvimento web caminham juntos aqui, j\u00e1 que os ativos gr\u00e1ficos do site precisam ser escal\u00e1veis. No fundo, h\u00e1 CSS e folhas de estilo que determinam como o site ser\u00e1 exibido em diferentes tamanhos de tela.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">At\u00e9 recentemente, o design responsivo era uma reflex\u00e3o tardia. Costum\u00e1vamos projetar sites totalmente em torno da experi\u00eancia de desktop. Agora que o tr\u00e1fego m\u00f3vel vem em primeiro lugar, o design m\u00f3vel tamb\u00e9m. \u00c9 por isso que voc\u00ea frequentemente ouve o termo \u2018mobile-first\u2019 nos c\u00edrculos de design web.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">\u00c9 importante entender que existe uma diferen\u00e7a entre design responsivo e adaptativo. O design adaptativo envolve criar v\u00e1rias vers\u00f5es de uma \u00fanica p\u00e1gina e fornec\u00ea-las dependendo do tipo de dispositivos que os visitantes usam. Essa abordagem para o design web \u00e9 considerada ultrapassada hoje em dia, pois a responsividade \u00e9 a op\u00e7\u00e3o mais eficiente.<\/span><\/p>\n\n\n\n<h2 id=\"h-how-to-think-mobile-first-when-it-comes-to-web-design\" class=\"wp-block-heading\"><strong>Como Pensar em Mobile-First no Design de Sites<\/strong><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Bryan Clayton, CEO da <\/span><a href=\"https:\/\/www.yourgreenpal.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">GreenPal<\/span><\/a><span style=\"font-weight: 400;\">, passou nove meses construindo o site de sua empresa do zero. <\/span><i><span style=\"font-weight: 400;\">\u201cLogo de cara, houve problemas graves,\u201d<\/span><\/i><span style=\"font-weight: 400;\"> ele diz. <\/span><i><span style=\"font-weight: 400;\">\u201cAssumimos que a maioria dos nossos usu\u00e1rios procuraria um servi\u00e7o de cuidado com o gramado a partir de um computador desktop ou laptop. Mas ficou muito claro, muito rapidamente que mais pessoas estavam acessando o site pelos seus telefones m\u00f3veis e tablets do que por um computador desktop ou laptop \u2014 numa propor\u00e7\u00e3o de 4 para 1.\u201d<\/span><\/i><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">A experi\u00eancia original completa de desktop inclu\u00eda todos os tipos de recursos adicionais, como anima\u00e7\u00f5es. <\/span><i><span style=\"font-weight: 400;\">\u201cT\u00ednhamos todos os tipos de outros recursos que tornavam a experi\u00eancia de desktop agrad\u00e1vel,\u201d ele lembra. \u201cO problema com essa abordagem era que a experi\u00eancia de desktop n\u00e3o se traduziria para um navegador web m\u00f3vel.\u201d<\/span><\/i><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Como resultado, o site estava sobrecarregado e n\u00e3o funcionava bem em dispositivos m\u00f3veis. Os usu\u00e1rios descobriram que precisavam usar o gesto de pin\u00e7ar e zoom para completar o processo de inscri\u00e7\u00e3o.<\/span><\/p>\n\n\n\n<p><i><span style=\"font-weight: 400;\">\u201cAntes que nosso site fosse reconstru\u00eddo para uma experi\u00eancia mobile-first, a convers\u00e3o em um navegador m\u00f3vel era inferior a 4%,\u201d<\/span><\/i><span style=\"font-weight: 400;\"> ele diz. <\/span><i><span style=\"font-weight: 400;\">\u201cIsso significa que as pessoas que tentavam se inscrever abandonavam o processo 96% das vezes.\u201d<\/span><\/i><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Ap\u00f3s <\/span><a href=\"https:\/\/www.dreamhost.com\/blog\/how-to-build-website\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">reconstruir o site<\/span><\/a><span style=\"font-weight: 400;\"> para ser mobile-first, Clayton descobriu que 82% das pessoas que iniciaram o processo de inscri\u00e7\u00e3o para obter uma estimativa de pre\u00e7o gratuita completaram todo o processo a partir de seus dispositivos m\u00f3veis e tablets. <\/span><i><span style=\"font-weight: 400;\">\u201cNosso produto mobile-first \u00e9 a \u00fanica raz\u00e3o pela qual ainda estamos no jogo hoje,\u201d<\/span><\/i><span style=\"font-weight: 400;\"> ele diz.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Quando se trata de design mobile-first, h\u00e1 muitas coisas que podemos aprender com a experi\u00eancia do GreenPal. Vamos come\u00e7ar falando sobre focar no seu p\u00fablico.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-hone-in-on-your-audience-and-ask-for-customer-feedback\"><strong>Concentre-se no Seu P\u00fablico e Pe\u00e7a Feedback dos Clientes<\/strong><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Quando se trata de redesenhar um site, voc\u00ea provavelmente precisar\u00e1 descobrir como os clientes est\u00e3o interagindo com ele atualmente. Isso significa olhar para as an\u00e1lises e ver se os n\u00fameros de engajamento parecem diferentes para usu\u00e1rios de dispositivos m\u00f3veis e de desktop.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">As an\u00e1lises podem revelar uma taxa de rejei\u00e7\u00e3o mais alta entre os visitantes m\u00f3veis ou menos tempo gasto no site. Esses s\u00e3o indicativos claros de uma experi\u00eancia de usu\u00e1rio m\u00f3vel ruim. Se os dados apontarem nessa dire\u00e7\u00e3o, sua melhor op\u00e7\u00e3o \u00e9 <\/span><i><span style=\"font-weight: 400;\">perguntar <\/span><\/i><span style=\"font-weight: 400;\">aos clientes o que eles gostam e o que n\u00e3o gostam no seu site.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Zondra Wilson, a propriet\u00e1ria da Blu Skincare em Los Angeles, s\u00f3 descobriu que <\/span><a href=\"https:\/\/www.dreamhost.com\/blog\/worst-blogging-blunders-to-avoid\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">seu site n\u00e3o era compat\u00edvel com dispositivos m\u00f3veis<\/span><\/a><span style=\"font-weight: 400;\"> quando come\u00e7ou a pedir feedback dos clientes.<\/span><\/p>\n\n\n\n<p><i><span style=\"font-weight: 400;\">\u201cEu pedia para meus clientes escreverem uma avalia\u00e7\u00e3o e eles diziam que n\u00e3o conseguiam encontrar onde escrev\u00ea-la,\u201d<\/span><\/i><span style=\"font-weight: 400;\"> ela lembra. <\/span><i><span style=\"font-weight: 400;\">\u201cEu perguntava sobre meu blog ou artigos que eu postava e eles tinham dificuldade para encontr\u00e1-los. Tinham problemas para visualizar meu site em seus celulares. Tinham que rolar a tela por muito tempo antes que minha primeira imagem ou qualquer informa\u00e7\u00e3o sobre minha empresa aparecesse. Eles n\u00e3o sabiam como navegar pelo meu site. Muitos ficavam frustrados e n\u00e3o passavam da primeira p\u00e1gina.\u201d<\/span><\/i><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Quando Wilson atualizou seu site para uma vers\u00e3o mais compat\u00edvel com dispositivos m\u00f3veis, ela notou imediatamente que os usu\u00e1rios come\u00e7aram a visualizar mais p\u00e1ginas no site do que o habitual.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Existem muitas t\u00e9cnicas testadas e comprovadas para otimizar um site para dispositivos m\u00f3veis. No entanto, o feedback dos clientes frequentemente revelar\u00e1 partes da experi\u00eancia do usu\u00e1rio que voc\u00ea poderia perder.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-think-small-in-terms-of-screen-size\"><strong>Pense Pequeno (Em Termos de Tamanho de Tela)<\/strong><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Os smartphones modernos s\u00e3o potentes, e uma grande parte do seu p\u00fablico ter\u00e1 acesso a uma conex\u00e3o de internet decente. No entanto, voc\u00ea vai querer garantir que seu site carregue o mais r\u00e1pido poss\u00edvel. Isso torna a remo\u00e7\u00e3o de excesso de desordem uma das melhores estrat\u00e9gias de design.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Vitaliy Vinogradov, CEO da <\/span><a href=\"http:\/\/www.modern.place\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Modern Place Lighting<\/span><\/a><span style=\"font-weight: 400;\">, descobriu que mudar para um design com prioridade para dispositivos m\u00f3veis levou a 30% mais convers\u00f5es em compara\u00e7\u00e3o com o desktop. <\/span><i><span style=\"font-weight: 400;\">\u201cUma coisa importante a fazer \u00e9 remover excesso de plugins, pop-ups ou quaisquer outros inibidores de tela na vers\u00e3o m\u00f3vel do site,\u201d<\/span><\/i><span style=\"font-weight: 400;\"> ele diz.<\/span><\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-35203 lazyload\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-2.jpg\" alt=\"A homepage da DreamHost em dispositivos m\u00f3veis.\" width=\"900\" height=\"800\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-2.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-2-300x267.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-2-768x683.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-2-600x533.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-2-730x649.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-2-784x697.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-2-877x780.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/800;\" \/><\/h4>\n\n\n\n<p><span style=\"font-weight: 400;\">A equipe dele vasculhou o site e eliminou alguns plugins de compartilhamento social que ocupavam um espa\u00e7o valioso na tela. Quando voc\u00ea projeta pensando em telas grandes, pode descobrir que acaba incluindo muitos elementos que n\u00e3o oferecem muito valor aos usu\u00e1rios.&nbsp;<\/span><\/p>\n\n\n\n<p><i><span style=\"font-weight: 400;\">\u201cVoc\u00ea precisa projetar para pequeno,\u201d<\/span><\/i><span style=\"font-weight: 400;\"> explica Matt Felten, um designer de produtos baseado em Los Angeles. <\/span><i><span style=\"font-weight: 400;\">\u201cVoc\u00ea tem que ser um pouco mais focado. Voc\u00ea tem que reduzir a informa\u00e7\u00e3o e o conte\u00fado.\u201d<\/span><\/i><span style=\"font-weight: 400;\"> Depois que seu site m\u00f3vel estiver pronto, voc\u00ea pode descobrir que n\u00e3o precisa adicionar mais \u00e0 vers\u00e3o desktop do site, afinal.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Remover todo esse excesso visual n\u00e3o apenas tornar\u00e1 seu site mais f\u00e1cil de usar em dispositivos m\u00f3veis. Isso tamb\u00e9m pode ajudar os visitantes a se concentrarem nos elementos que s\u00e3o realmente importantes. Isso significa Chamadas para A\u00e7\u00e3o, formul\u00e1rios, postagens e outros elementos-chave na jornada do usu\u00e1rio.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-refine-your-design-aesthetic\"><strong>Aprimore Sua Est\u00e9tica de Design<\/strong><\/h3>\n\n\n\n<p><i><span style=\"font-weight: 400;\">\u201cOs consumidores hoje esperam um design mais sofisticado\u201d<\/span><\/i><span style=\"font-weight: 400;\">, diz Felten. <\/span><i><span style=\"font-weight: 400;\">\u201cH\u00e1 uma grande busca para ver os casos de neg\u00f3cio de um site bonito e bem desempenhado,\u201d<\/span><\/i><span style=\"font-weight: 400;\"> ele diz. <\/span><i><span style=\"font-weight: 400;\">\u201cSe eu sou um propriet\u00e1rio de uma pequena empresa e toda a concorr\u00eancia tem um site realmente bonito e responsivo e eu n\u00e3o, em menos de um segundo, as pessoas fazem um julgamento negativo sobre meu produto.\u201d<\/span><\/i><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Um site com apar\u00eancia profissional n\u00e3o \u00e9 apenas um reflexo do seu bom gosto para design \u2013 mostra que voc\u00ea se esfor\u00e7ou para proporcionar uma melhor experi\u00eancia ao usu\u00e1rio. A menos que voc\u00ea trabalhe em um campo incrivelmente espec\u00edfico, os clientes sempre t\u00eam outras alternativas online. Portanto, \u00e9 essencial que voc\u00ea d\u00ea o seu melhor no design do seu site.<\/span><\/p>\n\n\n\n<h2 id=\"h-8-ways-to-optimize-your-website-for-mobile-devices\" class=\"wp-block-heading\"><strong>8 Maneiras de Otimizar seu Site para Dispositivos M\u00f3veis<\/strong><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Agora que deixamos claro por que \u00e9 necess\u00e1rio preparar seu site para uso m\u00f3vel, vamos ser mais pr\u00e1ticos. Nas pr\u00f3ximas se\u00e7\u00f5es, vamos gui\u00e1-lo atrav\u00e9s de alguns dos aspectos mais cr\u00edticos da cria\u00e7\u00e3o de um site otimizado para dispositivos m\u00f3veis, desde os simples at\u00e9 os mais tecnicamente complexos.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Recomendamos que voc\u00ea reserve um tempo para implementar o m\u00e1ximo poss\u00edvel desses m\u00e9todos, para melhorar as chances de que seu site tenha um bom desempenho em todos os dispositivos (e seja favorecido pelo \u00edndice mobile-first do Google). Vamos ao trabalho!<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-1-test-your-site-using-google-s-mobile-friendly-tool\"><strong>1. Teste Seu Site Usando a Ferramenta Mobile-Friendly do Google<\/strong><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Antes de tomar qualquer outra a\u00e7\u00e3o, \u00e9 uma atitude inteligente verificar como o seu site j\u00e1 se comporta em rela\u00e7\u00e3o \u00e0 compatibilidade com dispositivos m\u00f3veis. Isso ajudar\u00e1 voc\u00ea a focar nas \u00e1reas espec\u00edficas do seu site que precisam de trabalho e fornecer\u00e1 informa\u00e7\u00f5es \u00fateis sobre como voc\u00ea pode fazer melhorias.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Uma maneira de fazer isso \u00e9 simplesmente usando seu site em v\u00e1rios dispositivos diferentes. Acesse o site usando seu pr\u00f3prio smartphone ou tablet e veja como \u00e9 a apar\u00eancia e a usabilidade. Fazer isso permite que voc\u00ea perceba os tempos de carregamento, qu\u00e3o bem o design funciona em uma tela menor, se o conte\u00fado ainda \u00e9 leg\u00edvel e se a navega\u00e7\u00e3o \u00e9 f\u00e1cil de usar.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Uma vez que voc\u00ea tenha feito isso, pode aprofundar ainda mais usando uma ferramenta de teste dedicada. Felizmente, o Google criou uma que voc\u00ea pode usar gratuitamente, que mostrar\u00e1 se o seu site est\u00e1 de acordo com os padr\u00f5es dele para p\u00e1ginas m\u00f3veis. Apropriadamente, isso \u00e9 chamado de <\/span><a href=\"https:\/\/search.google.com\/test\/mobile-friendly\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Teste de Compatibilidade com Dispositivos M\u00f3veis<\/span><\/a><span style=\"font-weight: 400;\">:<\/span><\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-35204 lazyload\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-6.jpg\" alt=\"Ferramenta de Teste para Dispositivos M\u00f3veis do Google\" width=\"900\" height=\"338\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-6.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-6-300x113.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-6-768x288.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-6-600x225.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-6-730x274.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-6-784x294.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-6-877x329.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/338;\" \/><\/h4>\n\n\n\n<p><span style=\"font-weight: 400;\">Se a p\u00e1gina que voc\u00ea testa \u00e9 adaptada para dispositivos m\u00f3veis, a ferramenta retornar\u00e1 um resultado positivo. No entanto, se o Google detectar que h\u00e1 poss\u00edveis melhorias, ele indicar\u00e1 quais mudan\u00e7as voc\u00ea pode fazer para melhorar a experi\u00eancia m\u00f3vel:<\/span><\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-35205 lazyload\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-11.jpg\" alt=\"Sugest\u00f5es de otimiza\u00e7\u00e3o para dispositivos m\u00f3veis da ferramenta Teste de Compatibilidade com Mobile.\" width=\"900\" height=\"312\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-11.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-11-300x104.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-11-768x266.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-11-600x208.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-11-730x253.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-11-784x272.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-11-877x304.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/312;\" \/><\/h4>\n\n\n\n<p><span style=\"font-weight: 400;\">Mesmo que seu site obtenha um resultado geral positivo, ele ainda pode ter dificuldades para carregar certos ativos. Nesse caso, voc\u00ea ver\u00e1 uma notifica\u00e7\u00e3o de <\/span><i><span style=\"font-weight: 400;\">Problemas de carregamento da p\u00e1gina<\/span><\/i><span style=\"font-weight: 400;\">. Clicar nessa notifica\u00e7\u00e3o mostrar\u00e1 uma lista dos ativos que a ferramenta de teste n\u00e3o conseguiu carregar no celular:<\/span><\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-35206 lazyload\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-7.jpg\" alt=\"Uma lista de ativos que falharam ao carregar no celular.\" width=\"900\" height=\"587\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-7.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-7-300x196.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-7-768x501.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-7-600x391.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-7-730x476.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-7-784x511.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-7-877x572.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/587;\" \/><\/h4>\n\n\n\n<p><span style=\"font-weight: 400;\">Neste ponto, voc\u00ea pode lidar com cada problema listado por vez. Por exemplo, voc\u00ea pode <\/span><a href=\"https:\/\/help.dreamhost.com\/hc\/en-us\/articles\/216105077-How-can-I-control-bots-spiders-and-crawlers-\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">editar seu <\/span><i><span style=\"font-weight: 400;\">robots.txt<\/span><\/i><span style=\"font-weight: 400;\"> arquivo<\/span><\/a><span style=\"font-weight: 400;\"> para permitir que o Google acesse arquivos bloqueados, ou corrigir quaisquer <\/span><a href=\"https:\/\/help.dreamhost.com\/hc\/en-us\/articles\/115000294332-WordPress-infinite-redirect-error\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">erros de redirecionamento<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-2-use-custom-css-to-make-your-website-responsive\"><strong>2. Use CSS Personalizado para Tornar Seu Site Responsivo<\/strong><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Uma grande parte da implementa\u00e7\u00e3o de um design responsivo para a web envolve o uso de CSS. Voc\u00ea ficaria surpreso com o quanto um pouco de conhecimento em CSS pode ajudar quando se trata de tornar seu site adapt\u00e1vel para dispositivos m\u00f3veis.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Para lhe dar um exemplo, voc\u00ea pode usar CSS para implementar o que chamamos de &#8216;faixas de consulta de m\u00eddia&#8217;. Com consultas de m\u00eddia (ou pontos de interrup\u00e7\u00e3o responsivos), voc\u00ea pode informar aos navegadores quando carregar diferentes layouts para uma p\u00e1gina, dependendo do tamanho da tela que est\u00e3o usando. As consultas de m\u00eddia s\u00e3o um componente essencial das bibliotecas de HTML, CSS e JS como o Bootstrap:<\/span><\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-nbsp\">&nbsp;<\/h4>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"462\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-10.jpg\" alt=\"O site do framework Bootstrap.\" class=\"wp-image-35208 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-10.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-10-300x154.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-10-768x394.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-10-600x308.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-10-730x375.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-10-784x402.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-10-877x450.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/462;\" \/><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\">Outras maneiras que voc\u00ea pode usar CSS para tornar seu site mais responsivo incluem:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Criando um layout de grade CSS. <\/b><span style=\"font-weight: 400;\">Layouts de grade CSS, como o que o Bootstrap oferece, proporcionam uma maneira simples de ajudar voc\u00ea a ajustar designs para diferentes tamanhos de tela. Ter um layout com elementos bem definidos pode permitir que voc\u00ea configure como eles aparecem e quanto espa\u00e7o ocupam em cada tamanho de tela.<\/span><\/li>\n\n\n\n<li><b>Usando porcentagens de tamanho para elementos de layout. <\/b><span style=\"font-weight: 400;\">Como voc\u00ea deve saber, CSS permite definir a altura e a largura dos elementos usando pixels e outras unidades de medida. Para tornar seu site mais responsivo, recomendamos que voc\u00ea use porcentagens. Assim, elementos como bot\u00f5es devem se adaptar perfeitamente conforme as telas diminuem.&nbsp;<\/span><\/li>\n\n\n\n<li><b>Ajustando os tamanhos de fonte usando media queries. <\/b><span style=\"font-weight: 400;\">Imagens e outros elementos visuais em uma p\u00e1gina n\u00e3o deveriam ser as \u00fanicas coisas que se ajustam para telas menores. O texto tamb\u00e9m precisa ser responsivo ou voc\u00ea pode acabar com um site m\u00f3vel onde os usu\u00e1rios s\u00f3 podem ver uma palavra ou duas na tela antes de precisarem rolar para baixo.<\/span><\/li>\n\n\n\n<li><b>Controlando o espa\u00e7amento entre elementos. <\/b><span style=\"font-weight: 400;\">CSS permite determinar o espa\u00e7amento entre elementos, garantindo que haja espa\u00e7o em branco suficiente mesmo quando as p\u00e1ginas s\u00e3o reduzidas.&nbsp;<\/span><\/li>\n\n\n\n\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-if-you-feel-comfortable-using-html-and-css-designing-a-fully-responsive-website-can-be-easier-than-you-think-however-if-you-use-a-content-management-system-cms-such-as-wordpress-the-whole-process-becomes-much-simpler-since-you-seldom-need-to-deal-with-code-even-when-working-on-a-responsive-design\">Se voc\u00ea se sente confort\u00e1vel usando HTML e CSS, projetar um site totalmente responsivo pode ser mais f\u00e1cil do que voc\u00ea pensa. No entanto, se voc\u00ea utiliza um <a href=\"https:\/\/www.dreamhost.com\/blog\/history-of-wordpress\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Sistema de Gest\u00e3o de Conte\u00fado (CMS)<\/span><\/a><span style=\"font-weight: 400;\"> como o WordPress, todo o processo torna-se muito mais simples, j\u00e1 que raramente \u00e9 necess\u00e1rio lidar com c\u00f3digo, mesmo ao trabalhar em um design responsivo.<\/span><br><b><\/b><\/h4>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-3-choose-responsive-themes-and-plugins\"><strong>3. Escolha Temas e Plugins Responsivos<\/strong><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Uma das maiores vantagens de usar o WordPress \u00e9 que \u00e9 bastante f\u00e1cil criar um site responsivo utilizando o CMS. Na verdade, hoje em dia, \u00e9 mais dif\u00edcil criar um site que <\/span><i><span style=\"font-weight: 400;\">n\u00e3o <\/span><\/i><span style=\"font-weight: 400;\">seja responsivo. Contanto que voc\u00ea escolha bem seus plugins e temas, seu site deve estar em boas condi\u00e7\u00f5es.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Felizmente, a maioria dos temas populares s\u00e3o desenvolvidos pensando na compatibilidade com dispositivos m\u00f3veis. Isso significa que simplesmente <\/span><a href=\"https:\/\/www.dreamhost.com\/wordpress\/how-to-find-wp-themes\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">escolher o tema certo<\/span><\/a><span style=\"font-weight: 400;\"> pode poupar muito tempo. Desta forma, voc\u00ea pode evitar configurar pontos de quebra de m\u00eddia e criar grades CSS manualmente.<\/span><\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-35209 lazyload\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-4.jpg\" alt=\"Temas populares do WordPress.\" width=\"900\" height=\"623\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-4.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-4-300x208.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-4-768x532.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-4-600x415.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-4-730x505.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-4-784x543.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-4-877x607.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/623;\" \/><\/h4>\n\n\n\n<p><span style=\"font-weight: 400;\">Se voc\u00ea deseja verificar se um tema \u00e9 responsivo antes de instal\u00e1-lo (ou compr\u00e1-lo), recomendamos que voc\u00ea confira a demonstra\u00e7\u00e3o dele. Muitas demonstra\u00e7\u00f5es de temas incluir\u00e3o pr\u00e9vias de como seus designs aparecem em telas menores. Voc\u00ea tamb\u00e9m pode <\/span><a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/guia-do-iniciante-para-staging-de-websites\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">usar um site provis\u00f3rio<\/span><\/a><span style=\"font-weight: 400;\"> para testar novos temas e verificar qu\u00e3o amig\u00e1veis eles s\u00e3o para dispositivos m\u00f3veis.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Ao criar p\u00e1ginas usando o Editor de Blocos ou <\/span><a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/o-que-e-um-construtor-de-sites\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">construtores de p\u00e1ginas<\/span><\/a><span style=\"font-weight: 400;\"> como <\/span><a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/elementor-gratuito-vs-pro\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Elementor<\/span><\/a><span style=\"font-weight: 400;\"> ou <a href=\"http:\/\/www.hubspot.com\/products\/cms\/drag-and-drop-website-builder\" target=\"_blank\" rel=\"noreferrer noopener\">HubSpot<\/a>, voc\u00ea tamb\u00e9m pode pr\u00e9-visualizar como o design aparece em diferentes tipos de dispositivos a qualquer momento. Se voc\u00ea for proativo em pr\u00e9-visualizar os designs, h\u00e1 muito pouca raz\u00e3o para que qualquer uma de suas p\u00e1ginas n\u00e3o seja perfeitamente adaptada para dispositivos m\u00f3veis:<\/span><\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-35210 lazyload\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-13.jpg\" alt=\"Pr\u00e9-visualiza\u00e7\u00e3o m\u00f3vel no Editor de Blocos.\" width=\"900\" height=\"516\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-13.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-13-300x172.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-13-768x440.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-13-600x344.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-13-730x419.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-13-784x449.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-13-877x503.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/516;\" \/><\/h4>\n\n\n\n<p><span style=\"font-weight: 400;\">O <\/span><a href=\"https:\/\/help.dreamhost.com\/hc\/en-us\/articles\/360030806752-Choosing-an-editor\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Classic Editor<\/span><\/a><span style=\"font-weight: 400;\"> torna um pouco mais dif\u00edcil criar p\u00e1ginas responsivas, j\u00e1 que n\u00e3o \u00e9 t\u00e3o visual quanto o Block Editor. No entanto, voc\u00ea ainda pode visualizar como as p\u00e1ginas ficar\u00e3o a qualquer momento.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Se voc\u00ea est\u00e1 achando dif\u00edcil criar p\u00e1ginas responsivas, recomendamos <\/span><a href=\"https:\/\/www.dreamhost.com\/pt\/criador-sites-web-ia\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">experimentar um construtor de p\u00e1ginas diferente<\/span><\/a><span style=\"font-weight: 400;\"> e talvez mudar de temas. Essas podem ser grandes mudan\u00e7as para qualquer p\u00e1gina, ent\u00e3o voc\u00ea vai querer tomar seu tempo e se familiarizar com como os novos plugins e temas funcionam.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-4-test-your-website-s-core-web-vitals\"><strong>4. Teste os Principais Indicadores Vitais do seu Site<\/strong><\/h3>\n\n\n\n<p><a href=\"https:\/\/web.dev\/i18n\/en\/vitals\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Core Web Vitals<\/span><\/a><span style=\"font-weight: 400;\"> fazem parte de uma atualiza\u00e7\u00e3o recente nos algoritmos de busca do Google. Esses \u2018vitals\u2019 s\u00e3o um conjunto de m\u00e9tricas que fornecem insights sobre a experi\u00eancia geral do usu\u00e1rio. Existem tr\u00eas Core Web Vitals, que s\u00e3o:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Largest Contentful Paint (LCP). <\/b><span style=\"font-weight: 400;\">Esta m\u00e9trica mede quanto tempo leva para que o maior elemento de uma p\u00e1gina seja carregado. Um baixo valor de LCP significa que a p\u00e1gina carrega rapidamente no geral.<\/span><\/li>\n\n\n\n<li><b>First Input Delay (FID). <\/b><span style=\"font-weight: 400;\">O objetivo desta m\u00e9trica \u00e9 medir a interatividade. A pontua\u00e7\u00e3o do FID indica quanto tempo leva at\u00e9 que um usu\u00e1rio possa interagir com uma p\u00e1gina enquanto ela carrega.<\/span><\/li>\n\n\n\n<li><b>Cumulative Layout Shift (CLS). <\/b><span style=\"font-weight: 400;\">Isso indica o quanto o layout de uma p\u00e1gina \u2018se move\u2019 ou muda de posi\u00e7\u00e3o conforme ela carrega. O objetivo \u00e9 ter uma pontua\u00e7\u00e3o de CLS pr\u00f3xima de zero para minimizar esse movimento.<\/span><\/li>\n\n\n\n\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-putting-a-score-on-a-website-s-user-experience-is-tough-therefore-core-web-vitals-don-t-paint-an-entire-picture-of-the-overall-user-experience-of-a-site-however-they-enable-you-to-measure-key-technical-aspects-of-any-page-that-have-a-direct-impact-on-how-enjoyable-they-are-for-users\">Colocar uma pontua\u00e7\u00e3o na experi\u00eancia do usu\u00e1rio de um site \u00e9 dif\u00edcil. Portanto, os Core Web Vitals n\u00e3o retratam completamente a experi\u00eancia geral do usu\u00e1rio de um site. No entanto, eles permitem que voc\u00ea me\u00e7a aspectos t\u00e9cnicos chave de qualquer p\u00e1gina que tenham um impacto direto em qu\u00e3o agrad\u00e1veis elas s\u00e3o para os usu\u00e1rios.<br><b><\/b><\/h4>\n\n\n\n<p><span style=\"font-weight: 400;\">Al\u00e9m disso, os Core Web Vitals n\u00e3o s\u00e3o apenas um exerc\u00edcio te\u00f3rico. Eles t\u00eam um impacto direto na <\/span><a href=\"https:\/\/www.dreamhost.com\/academy\/what-is-seo\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Otimiza\u00e7\u00e3o de Motores de Busca (SEO)<\/span><\/a><span style=\"font-weight: 400;\"> e no ranqueamento de p\u00e1ginas. O Google permite que voc\u00ea teste os Core Web Vitals usando sua ferramenta gratuita <\/span><a href=\"https:\/\/pagespeed.web.dev\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">PageSpeed Insights<\/span><\/a><span style=\"font-weight: 400;\">. Ao inserir uma URL, o PageSpeed Insights fornecer\u00e1 uma vis\u00e3o geral dos seus Core Web Vitals:<\/span><\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-35211 lazyload\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-3.jpg\" alt=\"Usando o PageSpeed Insights para testar os Core Web Vitals do seu site.\" width=\"900\" height=\"526\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-3.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-3-300x175.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-3-768x449.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-3-600x351.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-3-730x427.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-3-784x458.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-3-877x513.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/526;\" \/><\/h4>\n\n\n\n<p><span style=\"font-weight: 400;\">Assim como na ferramenta de Teste de Compatibilidade com Mobile, o Google fornece sugest\u00f5es espec\u00edficas sobre quais melhorias voc\u00ea pode fazer para otimizar o site. Como o Core Web Vitals foca mais em desempenho, a maioria das sugest\u00f5es que voc\u00ea ver\u00e1 aqui est\u00e3o relacionadas \u00e0 otimiza\u00e7\u00e3o de velocidade:<\/span><\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-35212 lazyload\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-8.jpg\" alt=\"Sugest\u00f5es de otimiza\u00e7\u00e3o de desempenho do PageSpeed Insights.\" width=\"900\" height=\"531\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-8.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-8-300x177.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-8-768x453.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-8-600x354.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-8-730x431.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-8-784x463.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-8-877x517.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/531;\" \/><\/h4>\n\n\n\n<p><span style=\"font-weight: 400;\">Tenha em mente que o PageSpeed Insights fornece resultados separados para as &#8216;vers\u00f5es&#8217; mobile e desktop do seu site. Isso significa que voc\u00ea pode receber um conjunto diferente de sugest\u00f5es para cada vers\u00e3o. Focar nas sugest\u00f5es de otimiza\u00e7\u00e3o para mobile ir\u00e1 melhorar drasticamente ambos os conjuntos de pontua\u00e7\u00f5es.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-5-improve-your-site-s-loading-times\"><strong>5. Melhore os Tempos de Carregamento do Seu Site<\/strong><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Como sugerimos na se\u00e7\u00e3o anterior, a velocidade dos sites \u00e9 particularmente significativa em um mundo mobile-first. Otimizar seu site para velocidade n\u00e3o s\u00f3 ajudar\u00e1 a manter sua taxa de rejei\u00e7\u00e3o baixa, mas tamb\u00e9m pode melhorar a experi\u00eancia dos seus usu\u00e1rios, o que \u00e9 uma boa not\u00edcia para seus resultados financeiros.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Testar os Core Web Vitals do seu site fornecer\u00e1 uma ideia precisa de quanto tempo ele demora para carregar. Com essa informa\u00e7\u00e3o e as sugest\u00f5es de otimiza\u00e7\u00e3o de desempenho que a ferramenta oferece, voc\u00ea pode come\u00e7ar a trabalhar na melhoria dos tempos de carregamento do seu site. Aqui est\u00e3o alguns dos m\u00e9todos de otimiza\u00e7\u00e3o mais impactantes que voc\u00ea pode utilizar no seu site:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.dreamhost.com\/wordpress\/guide-to-wp-caching\/\" target=\"_blank\" rel=\"noopener\"><b>Implemente Cache<\/b><\/a><b>.<\/b><span style=\"font-weight: 400;\"> Quando voc\u00ea usa Cache, alguns dos arquivos do seu site ser\u00e3o salvos em um local mais conveniente (como no dispositivo local de cada visitante), para que eles n\u00e3o precisem ser baixados toda vez que uma nova p\u00e1gina for acessada. Existem muitos Plugins de Cache gratuitos dispon\u00edveis, embora alguns planos de hospedagem, como o DreamPress, incluam esse recurso por padr\u00e3o.<\/span><\/li>\n\n\n\n<li><a href=\"https:\/\/www.dreamhost.com\/wordpress\/guide-using-a-cdn-with-wp\/\" target=\"_blank\" rel=\"noopener\"><b>Use uma Rede de Distribui\u00e7\u00e3o de Conte\u00fado (CDN)<\/b><\/a><b>.<\/b><span style=\"font-weight: 400;\"> Em vez de entregar seus arquivos de um servidor central, uma CDN permite que voc\u00ea <\/span><a href=\"https:\/\/www.dreamhost.com\/academy\/what-is-cdn\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">armazene c\u00f3pias deles<\/span><\/a><span style=\"font-weight: 400;\"> em uma s\u00e9rie de servidores distribu\u00eddos geograficamente. Isso torna os tempos de carregamento mais equilibrados, independentemente da localiza\u00e7\u00e3o do usu\u00e1rio, enquanto tamb\u00e9m reduz o uso da sua Largura de Banda.<\/span><\/li>\n\n\n\n<li><a href=\"https:\/\/www.dreamhost.com\/wordpress\/guide-to-wp-image-optimization\/\" target=\"_blank\" rel=\"noopener\"><b>Comprima suas imagens<\/b><\/a><b>.<\/b><span style=\"font-weight: 400;\"> Arquivos de imagens grandes s\u00e3o frequentemente os culpados por tempos de carregamento lentos. Ao comprimi-los, voc\u00ea pode <\/span><a href=\"https:\/\/www.dreamhost.com\/academy\/how-to-optimize-website-images-performance\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">reduzir o tamanho deles<\/span><\/a><span style=\"font-weight: 400;\"> sem afetar sua qualidade. Existem v\u00e1rias solu\u00e7\u00f5es gratuitas e premium para ajud\u00e1-lo a fazer isso, incluindo o <\/span><a href=\"https:\/\/wordpress.org\/plugins\/shortpixel-image-optimiser\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">ShortPixel<\/span><\/a><span style=\"font-weight: 400;\"> plugin e a ferramenta <\/span><a href=\"https:\/\/tinypng.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">TinyPNG<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/li>\n\n\n\n<li><a href=\"https:\/\/help.dreamhost.com\/hc\/en-us\/articles\/360001209443-Performance-boosting-tips-to-speed-up-your-DreamPress-site#scripts\" target=\"_blank\" rel=\"noopener\"><b>Minimize seu c\u00f3digo<\/b><\/a><b>.<\/b><span style=\"font-weight: 400;\"> Otimizando o c\u00f3digo CSS, HTML e JavaScript do seu site, voc\u00ea pode torn\u00e1-lo mais eficiente e economizar segundos preciosos nos tempos de carregamento.<\/span><\/li>\n\n\n\n<li><a href=\"https:\/\/www.dreamhost.com\/blog\/update-your-wordpress\/\" target=\"_blank\" rel=\"noopener\"><b>Mantenha todos os aspectos do seu site atualizados<\/b><\/a><b>.<\/b><span style=\"font-weight: 400;\"> Usar software desatualizado para executar seu site n\u00e3o apenas o deixa vulner\u00e1vel a problemas de seguran\u00e7a, mas tamb\u00e9m impede que ele funcione com efici\u00eancia m\u00e1xima. Mantendo seus Plugins, temas e CMS atualizados em todos os momentos, voc\u00ea pode evitar esses problemas.<\/span><\/li>\n\n\n\n\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">Embora isso possa parecer muito trabalho, a maioria dessas t\u00e9cnicas pode ser implementada usando solu\u00e7\u00f5es simples e gratuitas que exigem pouca ou nenhuma configura\u00e7\u00e3o de sua parte. Como resultado, seu site deve ter um desempenho consideravelmente melhor em dispositivos m\u00f3veis e ter uma vantagem nos rankings dos motores de busca.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-6-redesign-your-pop-ups-for-mobile-devices\"><strong>6. Redesenhe seus Pop-ups para Dispositivos M\u00f3veis<\/strong><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Embora os pop-ups recebam muitas cr\u00edticas, eles continuam sendo um dos <\/span><a href=\"https:\/\/www.dreamhost.com\/blog\/pop-ups-and-dark-ux\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">m\u00e9todos mais eficazes<\/span><\/a><span style=\"font-weight: 400;\"> para capturar a aten\u00e7\u00e3o de um visitante. Assim, n\u00e3o nos surpreender\u00edamos se seu site contiver pelo menos um ou dois pop-ups estrategicamente posicionados, projetados para <\/span><a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/maneiras-de-crescer-sua-lista-de-emails\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">capturar leads<\/span><\/a><span style=\"font-weight: 400;\"> ou passar informa\u00e7\u00f5es vitais para os usu\u00e1rios.<\/span><\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-35213 lazyload\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-9.jpg\" alt=\"Um exemplo de um pop-up de marketing por email.\" width=\"900\" height=\"603\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-9.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-9-300x201.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-9-768x515.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-9-600x402.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-9-730x489.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-9-784x525.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-9-877x588.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/603;\" \/><\/h4>\n\n\n\n<p><span style=\"font-weight: 400;\">Embora os pop-ups possam ser altamente eficazes, eles podem impactar negativamente a experi\u00eancia m\u00f3vel. Em um dispositivo menor, o espa\u00e7o da tela se torna mais importante, e at\u00e9 os pop-ups de tamanho m\u00e9dio podem se tornar muito mais disruptivos do que aparecem na vers\u00e3o desktop do seu site.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">H\u00e1 algum tempo, o Google come\u00e7ou a reprimir os pop-ups implementando um conjunto de regras que esses elementos devem seguir para que n\u00e3o afetem excessivamente a experi\u00eancia do usu\u00e1rio. Essas regras incluem o seguinte:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Os pop-ups devem ser o menos intrusivos poss\u00edvel:<\/b><span style=\"font-weight: 400;\"> Em dispositivos m\u00f3veis, os pop-ups devem cobrir apenas uma pequena fra\u00e7\u00e3o da tela.<\/span><\/li>\n\n\n\n<li><b>Devem ser f\u00e1ceis de fechar:<\/b><span style=\"font-weight: 400;\"> Deve ser claro como os usu\u00e1rios de dispositivos m\u00f3veis podem dispensar o pop-up, geralmente atrav\u00e9s de um bot\u00e3o claramente vis\u00edvel e de tamanho adequado.<\/span><\/li>\n\n\n\n<li><b>Pop-ups que cont\u00eam informa\u00e7\u00f5es necess\u00e1rias s\u00e3o isentos:<\/b><span style=\"font-weight: 400;\"> As diretrizes acima n\u00e3o se aplicam a di\u00e1logos de login, formul\u00e1rios de verifica\u00e7\u00e3o de idade, avisos de cookies, notifica\u00e7\u00f5es de consentimento do GDPR e mais.<\/span><\/li>\n\n\n\n\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">Desde que voc\u00ea leve em considera\u00e7\u00e3o esses aspectos ao projetar seus pop-ups, seu site n\u00e3o deve correr o risco de ter impactos negativos. No entanto, sites que n\u00e3o seguem as diretrizes de pop-ups podem ser <\/span><a href=\"https:\/\/webmasters.googleblog.com\/2016\/08\/helping-users-easily-access-content-on.html\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">penalizados no ranking<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-7-choose-a-reliable-web-host\"><strong>7. Escolha um Provedor de Hospedagem Confi\u00e1vel<\/strong><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">J\u00e1 dissemos antes, e diremos novamente com prazer \u2014 <\/span><a href=\"https:\/\/www.dreamhost.com\/blog\/how-to-choose-web-host-checklist\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">escolher o web host certo<\/span><\/a><span style=\"font-weight: 400;\"> para o seu site \u00e9 uma das decis\u00f5es mais cruciais que voc\u00ea far\u00e1. O fato simples \u00e9 que se voc\u00ea escolher um host ou plano que n\u00e3o ofere\u00e7a a velocidade e os recursos de que precisa, nenhum trabalho da sua parte pode impedir que seu site tenha um desempenho ruim.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Seu provedor de hospedagem far\u00e1 muito para determinar qu\u00e3o bem o seu site se comporta, e quando se trata de otimiza\u00e7\u00e3o para dispositivos m\u00f3veis, a velocidade \u00e9 ainda mais importante do que o normal. Com isso em mente, voc\u00ea vai querer escolher um plano (<\/span><a href=\"https:\/\/www.dreamhost.com\/blog\/when-to-upgrade-your-hosting-plan\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">ou fazer um upgrade para um<\/span><\/a><span style=\"font-weight: 400;\">) que possa garantir um desempenho consistentemente alto e absolutamente m\u00ednimo tempo de inatividade.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">A melhor op\u00e7\u00e3o na maioria dos casos \u00e9 optar por um <\/span><a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/guia-para-iniciantes-sobre-vps\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">plano de hospedagem em Servidor Privado Virtual (VPS)<\/span><\/a><span style=\"font-weight: 400;\">, pois eles tendem a ser acess\u00edveis enquanto ainda <\/span><a href=\"https:\/\/www.dreamhost.com\/pt\/hosting\/vps\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">oferecem um desempenho fant\u00e1stico<\/span><\/a><span style=\"font-weight: 400;\">. Na DreamHost, oferecemos uma ampla gama de <\/span><a href=\"https:\/\/www.dreamhost.com\/pt\/wordpress\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">planos VPS<\/span><\/a><span style=\"font-weight: 400;\"> para todos os tipos de projetos WordPress:&nbsp;<\/span><\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-35214 lazyload\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-12.jpg\" alt=\"Planos de VPS hosting da DreamHost.\" width=\"900\" height=\"503\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-12.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-12-300x168.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-12-768x429.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-12-600x335.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-12-730x408.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-12-784x438.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-12-877x490.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/503;\" \/><\/h4>\n\n\n\n<p><span style=\"font-weight: 400;\">Se voc\u00ea precisa de ainda mais da sua hospedagem web, voc\u00ea pode optar por um servidor dedicado gerenciado \u2014 o que significa que voc\u00ea poder\u00e1 usar um servidor reservado especificamente para o seu site. Isso n\u00e3o apenas permite que voc\u00ea personalize o servidor de acordo com suas necessidades exatas, mas tamb\u00e9m significa maior seguran\u00e7a e velocidade \u2013 ambos elementos essenciais em um site compat\u00edvel com dispositivos m\u00f3veis.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-8-create-a-mobile-application\"><strong>8. Crie uma Aplica\u00e7\u00e3o M\u00f3vel<\/strong><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Finalmente, chegamos a uma solu\u00e7\u00e3o que pode parecer dr\u00e1stica \u00e0 primeira vista. Afinal, n\u00e3o faz muito tempo que os aplicativos m\u00f3veis eram exclusivos de grandes sites e servi\u00e7os. No entanto, o mercado mudou significativamente, e agora \u00e9 comum para quase qualquer tipo de neg\u00f3cio ou organiza\u00e7\u00e3o oferecer um aplicativo m\u00f3vel al\u00e9m de seu site responsivo padr\u00e3o.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Criar um aplicativo dedicado vem com <\/span><a href=\"https:\/\/www.elegantthemes.com\/blog\/tips-tricks\/when-you-should-create-an-app-from-your-website-content-and-5-tools-to-help-you\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">muitos benef\u00edcios \u00fanicos<\/span><\/a><span style=\"font-weight: 400;\"> que um simples site n\u00e3o pode fornecer. Por exemplo, ele permite que voc\u00ea ofere\u00e7a assinaturas e lide com elas diretamente atrav\u00e9s da sua pr\u00f3pria interface. Voc\u00ea tamb\u00e9m pode usar notifica\u00e7\u00f5es push para chamar a aten\u00e7\u00e3o dos usu\u00e1rios quando voc\u00ea postar conte\u00fado ou quiser compartilhar not\u00edcias.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Embora seja poss\u00edvel <\/span><a href=\"https:\/\/www.dreamhost.com\/blog\/convert-company-wordpress-site-mobile-app\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">codificar um aplicativo m\u00f3vel do zero<\/span><\/a><span style=\"font-weight: 400;\"> (ou contratar um desenvolvedor para faz\u00ea-lo), uma solu\u00e7\u00e3o muito mais f\u00e1cil \u00e9 usar uma ferramenta que ajude a transformar seu site em um aplicativo. Uma solu\u00e7\u00e3o otimizada para usu\u00e1rios do WordPress \u00e9 o AppPresser:<\/span><\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-35215 lazyload\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-1.jpg\" alt=\"Software AppPresser.\" width=\"900\" height=\"345\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-1.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-1-300x115.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-1-768x294.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-1-600x230.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-1-730x280.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-1-784x301.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/03\/how-to-optimize-website-for-mobile-devices-DreamHost-1-877x336.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/345;\" \/><\/h4>\n\n\n\n<p><span style=\"font-weight: 400;\">Esta \u00e9 uma ferramenta premium com planos que come\u00e7am a partir de <\/span><a href=\"https:\/\/apppresser.com\/pricing\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">$59 por m\u00eas<\/span><\/a><span style=\"font-weight: 400;\">. Com isso, voc\u00ea obt\u00e9m uma interface de construtor de aplicativos intuitiva que deve ser f\u00e1cil de usar se voc\u00ea j\u00e1 estiver familiarizado com o WordPress.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Com esta ferramenta, voc\u00ea pode rapidamente montar um aplicativo m\u00f3vel baseado em um site espec\u00edfico para Android e iOS, que voc\u00ea pode ent\u00e3o compartilhar com seus usu\u00e1rios. Por exemplo, voc\u00ea poderia submet\u00ea-lo a uma loja de aplicativos ou fornec\u00ea-lo diretamente aos visitantes ou assinantes do seu site.<\/span><\/p>\n\n\n\n<h2 id=\"h-mobile-optimization-can-t-wait\" class=\"wp-block-heading\"><strong>Otimiza\u00e7\u00e3o para dispositivos m\u00f3veis n\u00e3o pode esperar<\/strong><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Vivemos agora em um mundo mobile-first. A maioria dos usu\u00e1rios da internet depende mais de dispositivos m\u00f3veis do que de seus equivalentes de desktop, o que significa que voc\u00ea precisa considerar cuidadosamente como seu site funciona e parece em telas menores. Otimizar seu site para que ele tenha um bom desempenho e ainda seja facilmente utiliz\u00e1vel em dispositivos m\u00f3veis \u00e9 fundamental, especialmente se voc\u00ea n\u00e3o quer ser penalizado pelos motores de busca.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Se voc\u00ea usa WordPress, otimizar seu site para dispositivos m\u00f3veis se torna muito mais f\u00e1cil. Usar os plugins e temas certos te levar\u00e1 longe, assim como visualizar como seus designs parecem em mobile. Combine isso com ferramentas como o <\/span><a href=\"https:\/\/search.google.com\/test\/mobile-friendly\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Teste de Usabilidade M\u00f3vel do Google<\/span><\/a><span style=\"font-weight: 400;\">, e \u00e9 relativamente simples criar um site que fica fant\u00e1stico em telas menores.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Est\u00e1 pronto para priorizar o mobile? Nossos <\/span><a href=\"https:\/\/www.dreamhost.com\/pt\/wordpress\/gerenciado\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">planos DreamPress<\/span><\/a><span style=\"font-weight: 400;\"> incluem servi\u00e7os gerenciados do WordPress e um <\/span><a href=\"https:\/\/www.dreamhost.com\/pt\/criador-sites-web-ia\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Construtor de Sites WP<\/span><\/a><span style=\"font-weight: 400;\"> customizado. Ambos facilitam a cria\u00e7\u00e3o de p\u00e1ginas que ficam fant\u00e1sticas em dispositivos m\u00f3veis!<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\"><\/span><\/p>\n\n\n\n\n<div\n\tclass=\"article-cta-shared article-cta-small\"\n>\n    <div class=\"tr-img-wrap-outer jsLoading\"><img decoding=\"async\" class=\"js-img-lazy \" src=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/lazy-loading-transparent.webp\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder.webp 1x, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder-x2.webp 2x\"  alt=\"Ad background image\" \/><\/div>\n\n\n\n\n  <div class=\"content-btm\">\n    <h2\n      class=\"h2--md\"\n    >\n      Otimize Seu Neg\u00f3cio com DreamPress\n    <\/h2>\n    <p\n      class=\"p--md\"\n    >\n      Nossas atualiza\u00e7\u00f5es autom\u00e1ticas e fortes defesas de seguran\u00e7a retiram a gest\u00e3o de servidores das suas m\u00e3os para que voc\u00ea possa focar em seus clientes.\n    <\/p>\n\n            <a\n            href=\"https:\/\/www.dreamhost.com\/pt\/wordpress\/gerenciado\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Confira os Planos                    <\/a>\n\n  <\/div>\n<\/div>\n\n\n","protected":false},"excerpt":{"rendered":"<p>\u00c9 prov\u00e1vel que voc\u00ea esteja lendo isto usando um dispositivo m\u00f3vel. Se n\u00e3o gostar da forma como a p\u00e1gina est\u00e1 estruturada ou se o conte\u00fado for dif\u00edcil de ler, provavelmente procurar\u00e1 em outro lugar as informa\u00e7\u00f5es que deseja. Agora coloque-se do outro lado da equa\u00e7\u00e3o e considere quantos usu\u00e1rios voc\u00ea [\u2026]<\/p>\n","protected":false},"author":1060,"featured_media":35200,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"","toc_headlines":"[[\"h-why-mobile-first-design-is-essential\",\"Por que o Design Mobile-First \u00e9 Essencial\"],[\"h-what-does-responsive-web-design-mean\",\"O que Significa Design Web Responsivo?\"],[\"h-how-to-think-mobile-first-when-it-comes-to-web-design\",\"Como Pensar em Mobile-First no Design de Sites\"],[\"h-8-ways-to-optimize-your-website-for-mobile-devices\",\"8 Maneiras de Otimizar seu Site para Dispositivos M\u00f3veis\"],[\"h-mobile-optimization-can-t-wait\",\"Otimiza\u00e7\u00e3o para dispositivos m\u00f3veis n\u00e3o pode esperar\"]]","hide_toc":false,"footnotes":""},"categories":[14393,14391],"tags":[],"class_list":["post-57168","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-hosting-web-pt","category-tutoriais-pt"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Como Otimizar Seu Site para Dispositivos M\u00f3veis - DreamHost Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www-dev.dreamhost.com\/blog\/pt\/como-otimizar-seu-site-para-dispositivos-moveis\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como Otimizar Seu Site para Dispositivos M\u00f3veis\" \/>\n<meta property=\"og:description\" content=\"\u00c9 prov\u00e1vel que voc\u00ea esteja lendo isto usando um dispositivo m\u00f3vel. Se n\u00e3o gostar da forma como a p\u00e1gina est\u00e1 estruturada ou se o conte\u00fado for dif\u00edcil de ler, provavelmente procurar\u00e1 em outro lugar as informa\u00e7\u00f5es que deseja. Agora coloque-se do outro lado da equa\u00e7\u00e3o e considere quantos usu\u00e1rios voc\u00ea [\u2026]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/pt\/como-otimizar-seu-site-para-dispositivos-moveis\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-28T14:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-26T17:32:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2021\/03\/Mobile-Optimization-Feature.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"598\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Brian Glassman\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Brian Glassman\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"24 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Como Otimizar Seu Site para Dispositivos M\u00f3veis - DreamHost Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/como-otimizar-seu-site-para-dispositivos-moveis\/","og_locale":"en_US","og_type":"article","og_title":"Como Otimizar Seu Site para Dispositivos M\u00f3veis","og_description":"\u00c9 prov\u00e1vel que voc\u00ea esteja lendo isto usando um dispositivo m\u00f3vel. Se n\u00e3o gostar da forma como a p\u00e1gina est\u00e1 estruturada ou se o conte\u00fado for dif\u00edcil de ler, provavelmente procurar\u00e1 em outro lugar as informa\u00e7\u00f5es que deseja. Agora coloque-se do outro lado da equa\u00e7\u00e3o e considere quantos usu\u00e1rios voc\u00ea [\u2026]","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/como-otimizar-seu-site-para-dispositivos-moveis\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2022-06-28T14:00:00+00:00","article_modified_time":"2025-05-26T17:32:46+00:00","og_image":[{"width":900,"height":598,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2021\/03\/Mobile-Optimization-Feature.jpg","type":"image\/jpeg"}],"author":"Brian Glassman","twitter_card":"summary_large_image","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Brian Glassman","Est. reading time":"24 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/como-otimizar-seu-site-para-dispositivos-moveis\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/como-otimizar-seu-site-para-dispositivos-moveis\/"},"author":{"name":"Brian Glassman","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/e25c31f16fee80576bdd8b93a066f3de"},"headline":"Como Otimizar Seu Site para Dispositivos M\u00f3veis","datePublished":"2022-06-28T14:00:00+00:00","dateModified":"2025-05-26T17:32:46+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/como-otimizar-seu-site-para-dispositivos-moveis\/"},"wordCount":4737,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/como-otimizar-seu-site-para-dispositivos-moveis\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/03\/Mobile-Optimization-Feature.jpg","articleSection":["Hosting Web","Tutoriais"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/como-otimizar-seu-site-para-dispositivos-moveis\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/como-otimizar-seu-site-para-dispositivos-moveis\/","name":"Como Otimizar Seu Site para Dispositivos M\u00f3veis - DreamHost Blog","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/como-otimizar-seu-site-para-dispositivos-moveis\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/como-otimizar-seu-site-para-dispositivos-moveis\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/03\/Mobile-Optimization-Feature.jpg","datePublished":"2022-06-28T14:00:00+00:00","dateModified":"2025-05-26T17:32:46+00:00","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/como-otimizar-seu-site-para-dispositivos-moveis\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/pt\/como-otimizar-seu-site-para-dispositivos-moveis\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/como-otimizar-seu-site-para-dispositivos-moveis\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/03\/Mobile-Optimization-Feature.jpg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/03\/Mobile-Optimization-Feature.jpg","width":900,"height":598},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/como-otimizar-seu-site-para-dispositivos-moveis\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"Como Otimizar Seu Site para Dispositivos M\u00f3veis"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/e25c31f16fee80576bdd8b93a066f3de","name":"Brian Glassman","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/01\/brian-glassman-dreamhost-150x150.jpg","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/01\/brian-glassman-dreamhost-150x150.jpg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/01\/brian-glassman-dreamhost-150x150.jpg","caption":"Brian Glassman"},"description":"SEO leader and content marketer, Brian is DreamHost\u2019s Director of SEO. Based in Chicago, Brian enjoys the local health food scene (deep dish pizza, Italian beef sandwiches) and famous year-round warm weather. Follow Brian on LinkedIn.","sameAs":["https:\/\/www.linkedin.com\/in\/brianglassmandesign\/"],"url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/brian\/"}]}},"lang":"pt","translations":{"pt":57168,"es":30198,"en":14970,"de":51934,"pl":57164,"ru":57174,"uk":57183,"it":68591,"fr":70768,"nl":70788},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/57168","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1060"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=57168"}],"version-history":[{"count":5,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/57168\/revisions"}],"predecessor-version":[{"id":63677,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/57168\/revisions\/63677"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/35200"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=57168"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=57168"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=57168"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}