denne vejledning blev oprettet af David Fern, Social Security Administration

JavaScript-brug, CSS-brug, billed-og ressourcestørrelse, caching/netværksbrug og pop-ups. Dette er den bedste praksis, som de mest besøgte offentlige hjemmesider bør fokusere på for at være mere mobilvenlige. Men hvordan kan du arbejde på hvert af disse områder for at sikre, at din hjemmeside holder mobilbrugere glade og kommer tilbage?

i seks måneder, fra 22. September 2017 til 22. marts 2018, testede det føderale Mobiltestprogram de 26 amerikanske føderale regerings hjemmesider, der er mest besøgt på mobile enheder (smartphones og tablets) ved hjælp af syv mobilvenlige automatiserede testværktøjer. Resultaterne viste, at dette var den almindelige praksis, der gør disse sider ikke så mobilvenlige, som en bruger kunne forvente eller ønsker i en mobiloplevelse. De fleste af disse områder vedrører ikke direkte brugervenlighedsproblemer, men vedrører i stedet, hvordan siden er bygget (hvilket kan føre til dårlig ydelse). For mere information om, hvordan vi gennemførte testene, se afsnittet metode i slutningen.

oplysningerne her skitserer de fem bedste fremgangsmåder, vi fandt på tværs af disse sider:

  1. Optimer JavaScript
  • JavaScript placering
  • JavaScript Minify
  • Brug ikke inline JavaScript
  • Optimer CSS
    • undgå absolutte dimensioner og positioner i CSS-direktiver
    • brug eksterne stilark til at adskille Caching af CSS fra indholdet
    • Kombiner CSS-billedaktiver i Sprite-filer
  • Optimer billeder
    • Begræns sidestørrelse og vægt
    • aktiver Ressourcekomprimering
    • Optimer billeder
    • Angiv billeddimensioner
  • brug Caching
    • Kombiner flere filer for forbedret ydeevne
  • undgå Pop-ups
  • Husk, at hvis en hjemmeside er udviklet ved hjælp af et content management system (CMS) eller udviklingsramme, kan ikke alle disse indstillinger konfigureres. Vi foreslår dog, at udviklere undersøger systemets muligheder for at afgøre, om de kan være. Nogle af disse anbefalinger kan forekomme i serverlaget, som kan være adskilt fra programkoden.

    Optimer JavaScript

    det mest almindelige problem, der findes, er JavaScript-brug. JavaScript bruges på mange desktop-og mobilapplikationer, fordi det udvider funktionaliteten på hjemmesider, er et relativt let sprog at lære og bruge, og det udføres relativt hurtigt på klientsiden. Men hvis JavaScript ikke placeres og udføres fra et optimalt sted i koden, ikke minimeres eller bruges inline, kan det negativt påvirke applikationsydelsen på mobile enheder, der traditionelt har minimale ressourcer.

    JavaScript placering

    Issue – gruppering JavaScript i slutningen af siden markup er optimal for side belastning. Når HTTP-specifikationen placerer JavaScript et andet sted på siden (f.eks. øverst), kan dette resultere i indlæsning af blokering, mens JavaScript-filerne hentes. Derudover, før bro.sereren kan gengive en side, skal den Bygge DOM-træet ved at analysere HTML-markeringen. Når parseren møder et script, stopper det og udfører scriptet, før det fortsætter med at analysere. Dette bremser ydeevnen for sidebelastningen.

    løsning-sæt scripts i tagget <head> og brug attributterne async eller defer, som gør det muligt at hente scripts ASAP uden at blokere din bro.ser.

    Scripts med attributten async udføres asynkront. Dette betyder, at scriptet udføres, så snart det er hentet—uden at blokere bro.ser i mellemtiden—og at det andet script kan hentes og udføres før det første script.

    Scripts med attributten defer udføres i rækkefølge (dvs.første script et, derefter script to). Dette blokerer heller ikke bro.ser. I modsætning til async scripts udføres defer scripts først, når hele dokumentet er indlæst.

    • placering af JavaScript| https://mobiforge.com/design-development/fixit-javascript-placement
    • Fjern Render blokering JavaScript| https://developers.google.com/speed/docs/insights/BlockingJS
    • reducere størrelsen af ovennævnte fold indhold| https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent
    • hvor skal jeg sætte <script> tags i HTML markup? | http://stackoverflow.com/questions/436411/where-should-i-put-script-tags-in-html-markup

    JavaScript Minify

    problem – JavaScript-filer skal altid minimeres for at reducere transittiden og hjælpe med at fremskynde sidebelastningen.

    løsning-Minification fjerner unødvendige eller overflødige data uden at påvirke, hvordan ressourcen behandles af bro.sereren. Det integrerede Udviklermiljø (IDE) – værktøj, der bruges til at udvikle siden, kan indeholde funktioner, der minificerer JavaScript under byggeprocessen. Du kan også gøre dette med Google Lukningsværktøjer, herunder Lukningskompileren, en optimerer, der omskriver din kode og minimerer det døde rum for at få det til at hente hurtigere. Det er typisk kun at minificere i produktionsmiljøet, da fejlfinding og fejlfinding i udviklingsmiljøerne bliver lettere med ikke-minificeret JavaScript.

    • Komprimer ressourcer (HTML, CSS og JavaScript) | https://developers.google.com/speed/docs/insights/MinifyResources
    • sådan Minify dine hjemmesider CSS, HTML & JavaScript| https://www.elegantthemes.com/blog/tips-tricks/how-to-minify-your-websites-css-html-javascript

    Brug ikke inline JavaScript

    Issue – inline JavaScript-kode bør ikke bruges, fordi det kræver, at bro.ser pass JavaScript-kode markup, der bremser behandlingen.

    løsning-Flyt Al JavaScript-kode til en enkelt minificeret fil, som giver en ren adskillelse af markering, stil og kode. Dette kan også opnås ved at aktivere “inline JavaScript” – filteret i Apache-og Ngins internetservere.

    • fastsæt-inline JavaScript| https://mobiforge.com/design-development/fixit-inline-javascript
    • inline JavaScript| https://modpagespeed.com/doc/filter-js-inline
    • hvorfor Inline CSS og JavaScript-kode er sådan en dårlig ting| https://dzone.com/articles/why-inline-css-and-javascript-

    ressourcer:

    • JavaScript: Fordele og ulemper http://www.jscripters.com/javascript-advantages-and-disadvantages/

    Optimer CSS

    Cascading Style Sheets (CSS) beskriver, hvordan HTML-elementer skal vises på skærmen, kan spare en masse arbejde og kan styre layoutet på flere hjemmesider samtidigt.

    CSS kan dog øge applikationsbelastningstiden, hvis absolutte dimensioner og positioner i CSS-direktiver er specificeret, eksterne stilark bruges ikke til at adskille caching af CSS fra indholdet, CSS-billedaktiver kombineres ikke i Sprite-filer, og/eller der er mere end et H1 tag pr.side.

    undgå absolutte dimensioner og positioner i CSS – direktiver

    Issue-mål og absolutte dimensioner og positioner i CSS-direktiver bør undgås, da de muligvis ikke tillader, at brugeren tilpasser indhold, så det passer til skærmen eller gengives korrekt på alle enhedstyper. Der er dog undtagelser fra denne regel. Hvis du f.eks. ønsker, at billeder skal skræddersys, så de passer til en bestemt skærm, er det mere fornuftigt at angive dimensionen i billedpunkter. Derudover kan billedmålinger være passende for margener, grænser og polstring.

    opløsning – brug relative mål såsom em, ex, bolder, larger, og thick hvor det er muligt. For eksempel, når du angiver skrifttype, skal du bruge font-size: 1.5emi stedet for font-size: 12px.

    • rettelse – foranstaltninger| https://mobiforge.com/design-development/fixit-measures

    brug eksterne stilark til at adskille Caching af CSS fra indholdet

    problem – eksterne stilark skal bruges til at adskille CSS-instruktionerne fra HTML. Denne CSS-caching af en internetsøgemaskine undgår en anden tur til serveren og fremskynder sideindlæsningen.

    løsning-i afsnittet <head> i HTML skal du bruge sprog til at kalde CSS-filen eksternt og holde CSS-instruktionerne i en separat fil fra HTML (se nedenfor).

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

    Advarsel: Brug af mange eksterne CSS-stilark kan påvirke ydeevnen negativt, så de skal kombineres til en enkelt ekstern CSS.

    • intern vs ekstern CSS| http://infoheap.com/internal-vs-external-css/
    • Optimer CSS-levering| https://varvy.com/pagespeed/optimize-css-delivery.html

    Kombiner CSS-billedaktiver i Sprite – filer

    problem-når mange billeder bruges uafhængigt, kræver det flere netværksanmodninger for at hente hver enkelt. CSS Sprites kombinere flere billeder i en enkelt billedfil til brug på en hjemmeside for at fremskynde levering og load tid. Filen kan derefter skæres op ved hjælp af CSS.

    løsning-du kan finde mange værktøjer til at skabe sprite ark, herunder kompas, limonade, SpriteMe, fyrværkeri CS6 og Teksturepacker.

    • fiks-billede Sprints| https://mobiforge.com/design-development/fixit-image-sprites
    • CSS Sprites: hvad de er, hvorfor de er seje, og hvordan man bruger dem| https://css-tricks.com/css-sprites/
    • CSS Sprite Sheets: bedste praksis, værktøjer og nyttige applikationer| https://webdesign.tutsplus.com/articles/css-sprite-sheets-best-practices-tools-and-helpful-applications–webdesign-8340

    ressourcer

    • Hvad er CSS? | https://www.w3schools.com/css/css_intro.asp

    Optimer billeder

    Sidevægt, også kendt som “internettets tyngdekraft”, reducerer din applikationsydelse ved at øge belastningstiden og reducere netværksdataforbruget. Forståelse af sidevægt, ressourcekomprimering, optimering af billeder og billeddimensioner er afgørende for en vellykket internetstrategi.

    Begræns sidestørrelse og vægt

    Issue – den samlede filstørrelse på siden inklusive afhængige filer påvirker indlæsningstiden og den tid, det tager en mobilsøgning at evaluere. Rene og lette sider er bedst til mobil SEO; mobile søgemaskiner foretrækker at rangere disse sider. Bestræb dig på at holde filstørrelsen på alle mobilsider under 25 kilobyte. Dette er den maksimale filstørrelse, som iPhone vil cache for ethvert element, der er hentet.

    løsning-der er mange måder at reducere sidevægt på, herunder billedoptimering, gcip-komprimering, Minificering, Caching, JavaScript og CSS-konsolidering. Andre løsninger omfatter at undgå følgende: integrerer og omfatter, JavaScript og CSS rammer, brugerdefinerede skrifttyper og unødvendig side rod. Den bedste løsning afhænger af specifikationerne på din hjemmeside.

    • sidestørrelse grænse| https://mobiforge.com/design-development/fixit-page-size-limit
    • forståelse side vægt| https://mobiforge.com/research-analysis/understanding-web-page-weight
    • reducerer Sidevægt| https://mobiforge.com/design-development/reducing-page-weight

    aktiver Ressourcekomprimering

    problem – komprimering af ressourcer med gsip eller Deflate kan reducere antallet af bytes, der sendes over netværket.

    løsning – de fleste servere kan konfigureres til at bruge gcip-komprimering. Du kan f.eks. aktivere komprimering på en Apache-server ved hjælp af konfigurationsfilen .htaccess. Du kan også bruge mod_gcip til at aktivere gcip-komprimering, og mod_deflate til at komprimere output fra din server, før du sender den til din besøgende. Hvis din hjemmeside er hostet på en server, kan du aktivere komprimering for både statiske og dynamiske filer ved at vælge “Aktiver statisk komprimering” i IIS (Internet Information Services) manager.

    • Aktiver komprimering| https://developers.google.com/speed/docs/insights/EnableCompression
    • aktiver Gcip-komprimering| https://varvy.com/pagespeed/enable-compression.html
    • Sådan aktiveres Gcip-komprimering| https://www.giftofspeed.com/enable-gzip-compression/

    Optimer billeder

    problem – billeder på siden skal optimeres for at reducere deres Filstørrelse uden at påvirke deres visuelle kvalitet væsentligt. Formatering og komprimering af billeder kan gemme mange byte af data.

    løsning – Brug billedkomprimeringsapps til nemt at reducere filstørrelsen på billeder. Disse værktøjer fjerner skjulte data i billedfilen, som yderligere farveprofiler og metadata (f. eks., geolokalisering af hvor fotografiet blev taget), det er ikke nødvendigt. De giver en hurtig og nem måde at reducere filer størrelse uden at miste nogen billedkvalitet. Billedkomprimeringsværktøjer inkluderer TinyJPG, Compressor.io, Kraken, Imageoptimering, ImageOptim, Crush Pics og Minifier (Shopify Apps).

    • Optimer billeder| https://developers.google.com/speed/docs/insights/OptimizeImages
    • billede Crunch| https://mobiforge.com/design-development/fixit-image-crunch
    • optimering af billeder til internettet: En praktisk vejledning| https://www.abetterlemonadestand.com/optimizing-images-for-web/
    • Sådan optimerer du billeder til din hjemmeside| https://www.elegantthemes.com/blog/tips-tricks/optimize-images-for-your-wordpress-website

    Angiv billeddimensioner

    Issue – billeddimensioner skal altid medtages, og billeder bør ikke genprøves ved kørselstid, da dette vil bremse gengivelsen af siden. Når der refereres til billeder fra din markering, skal du angive deres visningsdimensioner for bro.sereren. Angivelse af en bredde og højde for alle billeder giver mulighed for hurtigere gengivelse ved at eliminere behovet for unødvendige omgange og maling.

    løsning-Angiv billedbredde og højde ved at inkludere attributterne width og height, når du bruger elementet img (se nedenfor).

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

    hvis der ikke er angivet dimensioner i det dokument, der indeholder, eller hvis de angivne dimensioner ikke svarer til de faktiske billeder, skal bro.sereren genfremstille og male igen, når billederne er hentet. For at forhindre tilbageførsler skal du angive bredden og højden på alle billeder enten i HTML <img> – taggen eller i CSS.

    • rettelse-Angiv billedstørrelser| https://mobiforge.com/design-development/fixit-specify-image-sizes
    • Angiv billeddimensioner| https://gtmetrix.com/specify-image-dimensions.html

    Udnyt Caching

    hvis du reducerer antallet af gange, dine applikationsanmodninger og processer ressourcer, forbedres din belastningstid og reducerer netværksdataforbruget. Du kan gøre dette på to måder: lokal caching eller minimering af brugen af eksterne scripts og objekter.

    caching af gearing

    issue – hentning af ressourcer over netværket er både langsom og dyr, og overførslen kan kræve flere rundrejser mellem klienten og serveren, hvilket forsinker behandlingen og kan blokere gengivelse af sideindhold. Dette kan også medføre dataomkostninger for den besøgende. Alle serversvar skal angive en caching-politik for at hjælpe klienten med at afgøre, om og hvornår de kan genbruge et tidligere hentet svar.

    Løsning-Udnyt caching ved at ændre anmodningsoverskrifterne på dine ressourcer for at bruge caching. Du kan enten tilføje en kode til .htaccess konfigurationsfilen på internetværten/serveren eller bruge den grundlæggende Cache-Control HTTP-overskrift (se nedenfor).

    Cache-Control: max-age=2592000, public
    • gearing – Caching| https://developers.google.com/speed/docs/insights/LeverageBrowserCaching
    • cachelagring| https://mobiforge.com/design-development/fixit-caching
    • gearing – Caching| https://varvy.com/pagespeed/leverage-browser-caching.html
    • hvad er .htaccess? | http://www.htaccess-guide.com/
    • Cache-kontrol| https://varvy.com/pagespeed/cache-control.html

    Kombiner flere filer for forbedret ydeevne

    problem-hvert eksternt objekt, der hentes på en side, kræver en separat DNS-anmodning (domain name server). Dette er ikke et stort problem på en traditionel computer med en hurtig forbindelse, men på langsommere mobilnetværk kan det forårsage forsinkelse. Dette vil skade applikationens ydeevne og indlæsningstid.

    løsning – reducer antallet og størrelsen af ressourcer, der kræves til stedet. Hvis det ikke er muligt, skal du kombinere alle eksterne CSS-filer i et enkelt stilark eller alle JavaScript-filer i en stor fil for at reducere antallet af opkald til bro.sereren.

    • bedste praksis for mobil internetapplikation-Minimer eksterne ressourcer| https://varvy.com/pagespeed/cache-control.html
    • Sådan reduceres HTTP-anmodninger for at fremskynde din hjemmeside| https://yoast.com/reduce-http-requests-wordpress/
    • nemme trin til at forbedre sideindlæsningstider| http://www.peachpit.com/articles/article.aspx?p=1431494&seqNum=5

    undgå Pop-ups

    brugen af pop-ups er ikke nødvendigvis dårlig på en desktop applikation. Men hvis applikationen bruger responsivt design eller bruges på en mobilapplikation, forhindrer pop-ups ofte og skader brugeroplevelsen. De trækker brugerens opmærksomhed væk fra siden til pop op-vinduet, og nybegynderbrugeren bliver hurtigt forvirret og frustreret.

    Pop-ups

    Problem – Pop-up – vinduer understøttes ikke på mange mobile enheder, og brug af dem kan have uforudsigelige resultater

    løsning-der er mange alternativer til pop-ups, der er synlige uden at optage hele vinduet, såsom lysbokse, inline-udvidelse og stationære bannerannoncer.

    • pop op – vinduer| https://mobiforge.com/design-development/fixit-pop-windows
    • døden af Mobile Pop-Ups og hvad du kan gøre i stedet| http://searchengineland.com/death-mobile-pop-ups-can-instead-263390
    • Google slår ned på påtrængende Mobile Pop-Ups: her er hvad marketingfolk har brug for at vide| https://blog.hubspot.com/marketing/google-pop-up-mobile-marketing#sm.0000u10cf1u3gcsdyzz2qa1xm5ugf
    • hvilket er det bedste alternativ til en Pop-up? | https://www.quora.com/Which-is-the-best-alternative-to-a-pop-up
    • 5 væsentlige regler for Dialogdesign| https://uxplanet.org/5-essential-ux-rules-for-dialog-design-4de258c22116
    • 9 ikke så påtrængende alternativer til at svæve Pop op-annoncer| https://www.linkedin.com/pulse/9-not-so-intrusive-alternatives-hover-pop-up-ads-paula-agius

    vores metode til denne undersøgelse

    vi brugte følgende trin til at gennemføre denne undersøgelse:

    1. ved hjælp af Digital Analytics program (DAP) statistik, vi trak navnene på de øverste 26 amerikanske føderale regering hjemmesider tilgås af mobile enheder.
    2. vi testede hvert sted ved hjælp af syv mobilvenlige automatiserede testværktøjer:
      • Google mobilvenlig Test| https://www.google.com/webmasters/tools/mobile-friendly/
      • mobilen| https://www.mobilemoxie.com/tools/site_analysis/
      • Mobi klar| http://ready.mobi/
      • Page Insights| https://developers.google.com/speed/pagespeed/insights/
      • V3C Mobileok Checker| https://validator.w3.org/mobile/
      • VARVY SEO værktøj| https://varvy.com/
      • GTM – https://gtmetrix.com/
    3. efter at have set på de mislykkede kriterier rapporteret af hvert værktøj, vi samlet resultaterne i et enkelt Microsoft-regneark.
    4. vi grupperede de problemer, vi fandt på 15 eller flere sider, i de fem kategorier, der er omfattet af denne vejledning, som er angivet i rækkefølge efter de fleste forekomster (JavaScript) til mindst forekomster (pop-ups).

    Articles

    Skriv et svar

    Din e-mailadresse vil ikke blive publiceret.