este guia foi criado por David Fern, Administração de Previdência Social

uso de JavaScript, uso de CSS, dimensionamento de imagens e recursos, Cache/uso de rede e pop-ups. Essas são as principais práticas nas quais os sites governamentais mais visitados devem se concentrar para serem mais amigáveis para dispositivos móveis. Mas como você pode trabalhar em cada uma dessas áreas para ajudar a garantir que seu site mantenha os usuários móveis encantados e voltando?Por seis meses, de 22 de setembro de 2017 a 22 de Março de 2018, O Programa Federal Crowdsource Mobile Testing testou os 26 sites do governo federal dos EUA que são mais visitados em dispositivos móveis (smartphones e tablets) usando sete ferramentas de teste automatizadas compatíveis com dispositivos móveis. Os resultados indicaram que essas eram as práticas comuns que tornam esses sites não tão amigáveis para dispositivos móveis quanto um usuário poderia esperar ou desejar em uma experiência móvel. A maioria dessas áreas não se relaciona diretamente com problemas de usabilidade, mas sim com a forma como o site é construído (o que pode levar a um desempenho ruim). Para obter mais informações sobre como conduzimos os testes, consulte a seção Metodologia no final.

as informações aqui descrevem as cinco principais práticas que encontramos nesses sites:

  1. Otimizar JavaScript
  • JavaScript Colocação
  • JavaScript Minify
  • Não Use JavaScript Inline
  • Otimizar o CSS
    • Evitar Absoluta Dimensões e Posições em CSS Directivas
    • Externo do Uso de Folhas de estilo para Separar o Cache de CSS a partir do Conteúdo de
    • Combinar Imagem CSS Ativos em Sprite Arquivos
  • Otimizar Imagens
    • Limite de Tamanho de Página e Peso
    • Ativar o Recurso de Compactação
    • Otimizar Imagens
    • Especificar as Dimensões da Imagem
  • Utilizar o Cache
    • Aproveitar o Cache do Navegador
    • Combinar Vários Arquivos Para melhorar o Desempenho
  • Evitar Pop-ups
  • Mantenha em mente que, se um site é desenvolvido usando um sistema de gerenciamento de conteúdo (CMS) ou framework de desenvolvimento, nem todas essas configurações podem ser configuráveis. No entanto, sugerimos que os desenvolvedores pesquisem os recursos do sistema para determinar se eles podem ser. Algumas dessas recomendações podem ocorrer na camada do servidor web, que pode ser separada do Código do programa.

    otimizar JavaScript

    o problema mais comum encontrado é o uso de JavaScript. O JavaScript é usado em muitos aplicativos de desktop e móveis porque estende a funcionalidade das páginas da web, é uma linguagem relativamente fácil de aprender e usar e é executado com relativa rapidez no lado do cliente. No entanto, se o JavaScript não for colocado e executado a partir de um local ideal no código, não minimizado, nem usado em Linha, isso pode afetar negativamente o desempenho do aplicativo em dispositivos móveis que tradicionalmente têm recursos mínimos.

    JavaScript Placement

    JavaScript de agrupamento de problemas no final da marcação da página é ideal para o carregamento da página. Quando a especificação HTTP coloca JavaScript em outro lugar na página (por exemplo, na parte superior), isso pode resultar no bloqueio de carregamento enquanto os arquivos JavaScript são baixados. Além disso, antes que o navegador possa renderizar uma página, ele precisa construir a árvore DOM analisando a marcação HTML. Sempre que o analisador encontra um script, ele para e executa o script antes de continuar a analisar. Isso retarda o desempenho do Carregamento da página.

    Solution – coloque scripts na tag <head> e use os atributos async ou defer, o que permite que os scripts sejam baixados O MAIS RÁPIDO POSSÍVEL sem bloquear seu navegador.

    Scripts com o atributo async são executados de forma assíncrona. Isso significa que o script é executado assim que é baixado—sem bloquear o navegador enquanto isso—e que o segundo script pode ser baixado e executado antes do primeiro script.

    Scripts com o atributo defer são executados em ordem (ou seja, primeiro script um, depois script dois). Isso também não bloqueia o navegador. Ao contrário dos scripts async, os scripts defer só são executados depois que todo o documento foi carregado.

    • Fixit – colocação JavaScript| https://mobiforge.com/design-development/fixit-javascript-placement
    • remover renderização bloqueando JavaScript| https://developers.google.com/speed/docs/insights/BlockingJS
    • reduza o tamanho do conteúdo de dobra acima| https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent
    • onde devo colocar tags <script> na marcação HTML? | http://stackoverflow.com/questions/436411/where-should-i-put-script-tags-in-html-markup

    JavaScript Minify

    problema-os arquivos JavaScript devem sempre ser minimizados para reduzir o tempo de trânsito e ajudar a acelerar o carregamento da página.Solução-a minificação remove dados desnecessários ou redundantes sem afetar a forma como o recurso é processado pelo navegador. A ferramenta Integrated Developer Environment (IDE) usada para desenvolver o site pode incluir recursos que diminuirão o JavaScript durante o processo de compilação. Você também pode fazer isso com as ferramentas Google Closure, incluindo o compilador Closure, um otimizador que reescreve seu código e minimiza o espaço morto para fazer o download mais rápido. É típico minificar apenas no ambiente de produção, pois a solução de problemas e depuração nos ambientes de desenvolvimento será mais fácil com JavaScript não minificado.

    • Minify Recursos (HTML, CSS e JavaScript) | https://developers.google.com/speed/docs/insights/MinifyResources
    • Como Comprima Seus Sites CSS, HTML & JavaScript| https://www.elegantthemes.com/blog/tips-tricks/how-to-minify-your-websites-css-html-javascript

    Não Use JavaScript Inline

    Problema – código JavaScript Inline não deve ser usado porque ele requer que o navegador passe código JavaScript marcação que diminui a velocidade de processamento.

    Solution-mova todo o código JavaScript para um único arquivo minificado, que fornece uma separação limpa de marcação, estilo e Código. Isso também pode ser feito ativando o filtro “Inline JavaScript” nos servidores da Web Apache e Nginx.

    • Fixit – JavaScript Inline| https://mobiforge.com/design-development/fixit-inline-javascript
    • Inline JavaScript| https://modpagespeed.com/doc/filter-js-inline
    • Por que Inline CSS e JavaScript de Código é uma Coisa Ruim| https://dzone.com/articles/why-inline-css-and-javascript-

    Recursos:

    • JavaScript: Vantagens e desvantagens http://www.jscripters.com/javascript-advantages-and-disadvantages/

    otimize CSS

    as folhas de estilo em cascata (CSS) descrevem como os elementos HTML devem ser exibidos na tela, podem economizar muito trabalho e podem controlar o layout de várias páginas da web simultaneamente.

    no entanto, o CSS pode aumentar o tempo de carregamento do aplicativo se forem especificadas dimensões e posições absolutas nas diretivas CSS, folhas de estilo externas não são usadas para separar o Cache do CSS do conteúdo, os ativos de imagem CSS não são combinados em arquivos Sprite e/ou há mais de uma tag H1 por página.

    evite dimensões e posições absolutas nas diretivas CSS

    problema – pixel e dimensões e posições absolutas nas diretivas CSS devem ser evitadas, pois podem não permitir que o navegador adapte o conteúdo para caber na tela ou renderizar corretamente em todos os tipos de dispositivos. No entanto, existem exceções a esta regra. Por exemplo, se você deseja que as imagens sejam adaptadas para caber em uma exibição específica, faz mais sentido especificar a dimensão em pixels. Além disso, as medidas de pixel podem ser apropriadas para margens, bordas e preenchimento.

    solução-Use medidas relativas, como em, ex, bolder, larger, e thick sempre que possível. Por exemplo, ao especificar a fonte, use font-size: 1.5em em vez de font-size: 12px.

    • Fixit – Measures| https://mobiforge.com/design-development/fixit-measures

    Use folhas de estilo externas para separar o Cache DE CSS do conteúdo

    problema-folhas de estilo externas devem ser usadas para separar as instruções CSS do HTML. Esse cache CSS por um navegador da web evita outra viagem ao servidor e acelera o carregamento da página.

    Solution – na seção <head> do HTML, use a linguagem para chamar o arquivo CSS externamente, mantendo as instruções CSS em um arquivo separado do HTML (veja abaixo).

    <link rel="stylesheet" type="text/css" href="https://mysite.com/main.css" media="screen" title="style (screen)" />

    ressalva: o uso de muitas folhas de estilo CSS externas pode afetar adversamente o desempenho, portanto, elas devem ser combinadas em um único CSS externo.

    • CSS interno vs externo| http://infoheap.com/internal-vs-external-css/
    • otimize a entrega de CSS| https://varvy.com/pagespeed/optimize-css-delivery.html

    Combine ativos de imagem CSS em arquivos Sprite

    problema-quando muitas imagens são usadas de forma independente, requer várias solicitações de rede para baixar cada uma. Os Sprites CSS combinam várias imagens em um único arquivo de imagem para uso em um site para acelerar a entrega e o tempo de carregamento. O arquivo pode então ser cortado usando CSS.

    solução-você pode encontrar muitas ferramentas para criar folhas de sprite, incluindo Compass, Lemonade, SpriteMe, Fireworks CS6 e TexturePacker.

    • Fixit – Imagem Sprints| https://mobiforge.com/design-development/fixit-image-sprites
    • CSS Sprites: o Que são, Por Que é Legal, e Como Usá-Los| https://css-tricks.com/css-sprites/
    • CSS Sprite Folhas: as Melhores Práticas, Ferramentas e Aplicações Úteis| https://webdesign.tutsplus.com/articles/css-sprite-sheets-best-practices-tools-and-helpful-applications–webdesign-8340

    Recursos

    • o Que é CSS? | https://www.w3schools.com/css/css_intro.asp

    otimizar imagens

    o peso da Página, também conhecido como “a gravidade da web”, diminui o desempenho do aplicativo aumentando o tempo de carga e reduzindo o uso de dados de rede. Entender o peso da página, a compactação de recursos, a otimização de imagens e as dimensões da imagem é fundamental para uma estratégia bem-sucedida da web.

    limite o tamanho e o peso da Página

    problema – o tamanho total do arquivo da Página, incluindo arquivos dependentes, afetará o tempo de carregamento e a quantidade de tempo que um rastreador móvel leva para avaliar. Páginas limpas e leves são melhores para SEO móvel; os mecanismos de pesquisa móveis preferem classificar essas páginas. Esforce-se para manter o tamanho do arquivo de todas as páginas móveis abaixo de 25 kilobytes. Este é o tamanho máximo do arquivo que o iPhone armazenará em cache para qualquer elemento baixado.

    solução – existem muitas maneiras de reduzir o peso da Página, incluindo otimização de imagem, compressão gzip, minificação, Cache, JavaScript e consolidação CSS. Outras soluções incluem evitar o seguinte: incorpora e inclui estruturas JavaScript e CSS, fontes personalizadas e confusão desnecessária de páginas. A melhor solução depende das especificidades do seu site.

    • Fixit – Limite de Tamanho de Página| https://mobiforge.com/design-development/fixit-page-size-limit
    • a Compreensão Página de Peso| https://mobiforge.com/research-analysis/understanding-web-page-weight
    • Reduzir a Página de Peso| https://mobiforge.com/design-development/reducing-page-weight

    Habilitar o Recurso de Compactação

    Problema – Compressão de recursos com o gzip ou Deflate pode reduzir o número de bytes enviados através da rede.

    solução – a maioria dos servidores pode ser configurada para usar a compactação gzip. Por exemplo, você pode habilitar a compactação gzip em um servidor Apache usando o arquivo de configuração .htaccess. Você também pode usar mod_gzip para habilitar a compactação gzip e mod_deflate para compactar a saída do seu servidor antes de enviá-la ao visitante. Se o seu site estiver hospedado em um servidor Windows, você pode habilitar a compactação para arquivos estáticos e dinâmicos selecionando “Ativar compactação estática” no Gerenciador do IIS (Internet Information Services).

    • Activar a Compressão| https://developers.google.com/speed/docs/insights/EnableCompression
    • Ativar a Compactação gzip| https://varvy.com/pagespeed/enable-compression.html
    • Como Ativar a Compactação gzip| https://www.giftofspeed.com/enable-gzip-compression/

    Otimizar Imagens

    Problema – Imagens na página deve ser otimizada para reduzir o tamanho do arquivo sem que afectem consideravelmente a sua qualidade visual. Formatar e compactar imagens pode salvar muitos bytes de dados.

    solução – use aplicativos de compactação de imagem para reduzir facilmente o tamanho do arquivo de imagens. Essas ferramentas removem dados ocultos no arquivo de imagem, como perfis de cores e metadados adicionais (por exemplo, geolocalização de onde a fotografia foi tirada), isso não é necessário. Eles fornecem uma maneira rápida e fácil de reduzir o tamanho dos arquivos sem perder nenhuma qualidade de imagem. Ferramentas de compressão de imagem incluem TinyJPG, Compressor.io Shopify Apps (Aplicativos da Shopify), Kraken, ImageOptimizer, ImageOptim, Crush Pics e Minifier (aplicativos da Shopify).

    • otimizar imagens| https://developers.google.com/speed/docs/insights/OptimizeImages
    • Fixit – Image Crunch| https://mobiforge.com/design-development/fixit-image-crunch
    • otimizando imagens para Web: Um Guia prático| https://www.abetterlemonadestand.com/optimizing-images-for-web/
    • Como Otimizar Imagens para o Seu Site WordPress| https://www.elegantthemes.com/blog/tips-tricks/optimize-images-for-your-wordpress-website

    Especificar as Dimensões da Imagem

    Problema – dimensões da Imagem deve ser sempre incluído e imagens não deve ser aumentada em tempo de execução, pois isso irá diminuir a renderização da página. Quando as imagens são referenciadas de dentro de sua marcação, você deve listar suas dimensões de exibição para o navegador. Especificar uma largura e altura para todas as imagens permite uma renderização mais rápida, eliminando a necessidade de refluxos e repintas desnecessários.

    Solution-especifique a largura e a altura da imagem incluindo os atributos width e height ao usar o elemento img (veja abaixo).

    <img src="images/clown.jpg" width="50" height="50" />

    se nenhuma dimensão for especificada no documento que contém, ou se as dimensões especificadas não corresponderem às das imagens reais, o navegador exigirá uma refusão e repintura assim que as imagens forem baixadas. Para evitar refluxos, especifique a largura e a altura de todas as imagens na tag HTML <img> ou em CSS.

    • Fixit – Especificar os Tamanhos de Imagem| https://mobiforge.com/design-development/fixit-specify-image-sizes
    • Especificar as Dimensões da Imagem| https://gtmetrix.com/specify-image-dimensions.html

    Utilizar o Cache

    Reduzir o número de vezes que os pedidos de aplicação e processos de recursos vai melhorar o seu tempo de carga e reduzir a rede de dados de uso. Você pode fazer isso de duas maneiras: cache local ou minimizar o uso de scripts e objetos externos.

    aproveite o Cache do navegador

    a busca de recursos pela rede é lenta e cara e o download pode exigir várias viagens de ida e volta entre o cliente e o servidor, o que atrasa o processamento e pode bloquear a renderização do conteúdo da página. Isso também pode incorrer em custos de dados para o visitante. Todas as respostas do servidor devem especificar uma política de cache para ajudar o cliente a determinar se e quando eles podem reutilizar uma resposta obtida anteriormente.

    solução-aproveite o Cache do navegador alterando os cabeçalhos de solicitação de seus recursos para usar o Cache. Você pode adicionar algum código ao arquivo de configuração .htaccess no host/servidor da web ou usar o cabeçalho HTTP Cache-Control básico (veja abaixo).

    Cache-Control: max-age=2592000, public
    • Aproveitar o Cache do Navegador| https://developers.google.com/speed/docs/insights/LeverageBrowserCaching
    • Fixit – em Cache| https://mobiforge.com/design-development/fixit-caching
    • Aproveitar o Cache do Navegador| https://varvy.com/pagespeed/leverage-browser-caching.html
    • é o Que há .htaccess? | http://www.htaccess-guide.com/
    • Cache-Control| https://varvy.com/pagespeed/cache-control.html

    Combine Vários Arquivos Para melhorar o Desempenho

    Problema – a Cada objeto externo baixado em uma página necessita de um servidor de nome de domínio (DNS) do pedido. Este não é um grande problema em um computador tradicional com uma conexão rápida, mas em redes móveis mais lentas pode causar latência. Isso prejudicará o desempenho do aplicativo e o tempo de carregamento.

    solução-reduza o número e o tamanho dos recursos necessários para o site. No entanto, se isso não for possível, combine todos os arquivos CSS externos em uma única folha de estilo ou todos os arquivos JavaScript em um arquivo grande para reduzir o número de chamadas para o navegador.

    • Aplicativo da Web Móvel Melhores Práticas – para Minimizar os Recursos Externos| https://varvy.com/pagespeed/cache-control.html
    • Como Reduzir as solicitações HTTP para acelerar o Seu Site WordPress| https://yoast.com/reduce-http-requests-wordpress/
    • Passos simples para Melhorar os Tempos de Carregamento da Página| http://www.peachpit.com/articles/article.aspx?p=1431494&seqNum=5

    Evitar Pop-ups

    O uso de pop-ups não é necessariamente ruim em um aplicativo da área de trabalho. No entanto, se o aplicativo usa design responsivo ou é usado em um aplicativo móvel, os pop-ups geralmente obstruem e prejudicam a experiência do Usuário. Eles chamam a atenção do usuário da página para o pop-up, e o usuário iniciante rapidamente fica confuso e frustrado.

    bloqueador de Pop-ups

    Problema – janelas de Pop-up não são compatíveis com vários dispositivos móveis e utilizá-los pode ter resultados imprevisíveis

    Solução – Há muitas alternativas para os pop-ups que são visíveis, sem ocupar toda a janela, como lightboxes”, em linha de expansão, fixas e banners.

    • Fixit – Janelas de Pop-up| https://mobiforge.com/design-development/fixit-pop-windows
    • A Morte de Móveis de Pop-Ups e o Que Você Pode Fazer em Vez| http://searchengineland.com/death-mobile-pop-ups-can-instead-263390
    • o Google é reprimir Intrusiva Móvel de Pop-Ups: Aqui está o Que os profissionais de marketing Precisam Saber| https://blog.hubspot.com/marketing/google-pop-up-mobile-marketing#sm.0000u10cf1u3gcsdyzz2qa1xm5ugf
    • Qual é a Melhor Alternativa para uma janela de Pop-up? | https://www.quora.com/Which-is-the-best-alternative-to-a-pop-up
    • 5 regras essenciais de UX para design de diálogo| https://uxplanet.org/5-essential-ux-rules-for-dialog-design-4de258c22116
    • 9 alternativas não tão intrusivas para pairar anúncios Pop-up| https://www.linkedin.com/pulse/9-not-so-intrusive-alternatives-hover-pop-up-ads-paula-agius

    nossa metodologia para este estudo

    utilizamos as seguintes etapas para realizar este estudo:

    1. usando as estatísticas do Programa de Análise Digital (dap), retiramos os nomes dos 26 principais sites do governo federal dos EUA acessados por dispositivos móveis.Testamos cada site usando sete ferramentas de teste automatizadas compatíveis com dispositivos móveis:
      • Google Mobile-Friendly Teste| https://www.google.com/webmasters/tools/mobile-friendly/
      • Móveis Moxie| https://www.mobilemoxie.com/tools/site_analysis/
      • Mobi Pronto| http://ready.mobi/
      • estatísticas| https://developers.google.com/speed/pagespeed/insights/
      • W3C MobileOK Checker| https://validator.w3.org/mobile/
      • Varvy ferramenta de SEO| https://varvy.com/
      • Gtmetrix – https://gtmetrix.com/
    2. Depois de olhar para os critérios de falha relatada por cada ferramenta, compilamos os resultados em uma única planilha do Microsoft Excel.
    3. agrupamos os problemas que encontramos em 15 ou mais sites nas cinco categorias abordadas neste guia, que são listadas na ordem da maioria das ocorrências (JavaScript) para menos ocorrências (pop-ups).

    Articles

    Deixe uma resposta

    O seu endereço de email não será publicado.