denne veiledningen ble opprettet Av David Fern, Social Security Administration

JavaScript-bruk, CSS-bruk, bilde-og ressursstørrelse, caching/nettverksbruk Og popup-vinduer. Dette er de beste praksisene som de mest besøkte regjeringens nettsteder bør fokusere på for å være mer mobilvennlige. Men hvordan kan du jobbe på hvert av disse områdene for å sikre at nettstedet ditt holder mobilbrukere glade og kommer tilbake?

I seks måneder, fra 22. September 2017 Til 22. Mars 2018, Testet Federal Crowdsource Mobile Testing Program de 26 amerikanske føderale regjeringens nettsteder som er mest besøkt på mobile enheter (smarttelefoner og nettbrett) ved hjelp av syv mobilvennlige automatiserte testverktøy. Resultatene indikerte at disse var de vanlige praksisene som gjør disse nettstedene ikke så mobilvennlige som en bruker kan forvente eller vil ha i en mobilopplevelse. De fleste av disse områdene er ikke direkte relatert til bruksproblemer, men handler i stedet om hvordan nettstedet er bygget (noe som kan føre til dårlig ytelse). For mer informasjon om hvordan vi gjennomførte testene, se Metodeseksjonen på slutten.

informasjonen her skisserer de fem beste praksisene vi fant på disse nettstedene:

  1. Optimaliser JavaScript
  • JavaScript-Plassering
  • JavaScript Minify
  • Ikke Bruk Inline JavaScript
  • Optimaliser CSS
    • Unngå Absolutte Dimensjoner og Posisjoner I CSS-Direktiver
    • Bruk Eksterne Stilark For Å Skille CACHING AV CSS Fra Innholdet
    • Kombiner CSS-Bildeelementer i Sprite-Filer
  • Optimaliser Bilder
    • Begrens Sidestørrelse Og Vekt
    • Aktiver Ressurskomprimering
    • optimaliser bilder
    • ANGI Bildedimensjoner
  • Bruk Hurtigbufring
    • Leverage Browser Caching
    • Kombiner Flere Filer For Forbedret Ytelse
  • Unngå Popup-vinduer
  • Husk at hvis et nettsted er utviklet ved hjelp av et content management system (CMS) eller utviklingsramme, kan ikke alle disse innstillingene konfigureres. Vi foreslår imidlertid at utviklere undersøker systemets evner for å avgjøre om de kan være. Noen av disse anbefalingene kan forekomme i webserverlaget, som kan være atskilt fra programkoden.

    Optimaliser JavaScript

    Det vanligste problemet er JavaScript-bruk. JavaScript brukes på mange stasjonære og mobile applikasjoner fordi det utvider funksjonaliteten til nettsider, er et relativt enkelt språk å lære og bruke, og det utfører relativt raskt på klientsiden. Men Hvis JavaScript ikke er plassert og utført fra et optimalt sted i koden, ikke minimert eller brukt inline, kan det negativt påvirke applikasjonsytelsen på mobile enheter som tradisjonelt har minimale ressurser.

    Plassering Av JavaScript

    Problem-Gruppering Av JavaScript på slutten av sidemarkeringen er optimal for sideinnlasting. NÅR HTTP-spesifikasjonen setter JavaScript et Annet sted på siden (f. eks. øverst), kan dette føre til at lasting blokkeres mens JavaScript-filene lastes ned. I tillegg, før nettleseren kan gjengi en side, må DEN bygge DOM-treet ved å analysere HTML-oppslaget. Når parseren møter et skript, stopper det og utfører skriptet før det fortsetter å analysere. Dette reduserer ytelsen til sideinnlastingen.

    Løsning-Sett skript i <head> – taggen og bruk attributtene async eller defer, som gjør at skriptene kan lastes NED ASAP uten å blokkere nettleseren din.

    Skript med async – attributtet utføres asynkront. Dette betyr at skriptet utføres så snart det er lastet ned-uten å blokkere nettleseren i mellomtiden-og at det andre skriptet kan lastes ned og utføres før det første skriptet.

    Skript med defer – attributtet utføres i rekkefølge(dvs. første skript en, deretter skript to). Dette blokkerer heller ikke nettleseren. I motsetning til async skript, utføres defer skript bare etter at hele dokumentet er lastet inn.

    • Fixit-JavaScript Plassering| https://mobiforge.com/design-development/fixit-javascript-placement
    • Fjern Gjengi Blokkering JavaScript| https://developers.google.com/speed/docs/insights/BlockingJS
    • Redusere størrelsen på ovennevnte fold innhold| https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent
    • Hvor skal jeg sette <script> koder I HTML markup? | http://stackoverflow.com/questions/436411/where-should-i-put-script-tags-in-html-markup

    JavaScript Minify

    Problem-JavaScript-filer bør alltid minimeres for å redusere transittiden og bidra til å øke hastigheten på sideinnlastingen.

    Løsning-Minifisering fjerner unødvendige eller overflødige data uten å påvirke hvordan ressursen behandles av nettleseren. IDE-verktøyet (Integrated Developer Environment) som brukes til å utvikle nettstedet, kan inneholde funksjoner som vil minify JavaScript under byggeprosessen. Du kan også gjøre Dette Med Google Closure tools, inkludert Closure Compiler, en optimizer som omskriver koden din og minimerer det døde rommet for å få det til å lastes ned raskere. Det er typisk å minify bare i produksjonsmiljøet, da feilsøking og feilsøking i utviklingsmiljøene blir enklere med Ikke-minified JavaScript.

    • Minify Ressurser (HTML, CSS og JavaScript) | https://developers.google.com/speed/docs/insights/MinifyResources
    • HVORDAN Minify Nettsteder CSS ,HTML & JavaScript| https://www.elegantthemes.com/blog/tips-tricks/how-to-minify-your-websites-css-html-javascript

    Ikke Bruk Innebygd JavaScript

    Problem-Innebygd JavaScript-kode skal ikke brukes fordi den krever at nettleseren passerer JavaScript-kodemarkering som bremser behandlingen.

    Solution-Flytt All JavaScript-kode til en enkelt minified fil, som gir en ren separasjon av markup, stil og kode. Dette kan også oppnås ved å aktivere» Inline JavaScript » – filteret I Apache og Nginx webservere.

    • Fixit – 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å Ille| https://dzone.com/articles/why-inline-css-and-javascript-

    Ressurser:

    • JavaScript: Fordeler og Ulemper http://www.jscripters.com/javascript-advantages-and-disadvantages/

    Optimaliser CSS

    Cascading Style Sheets (CSS) beskriver hvordan HTML-elementer skal vises på skjermen, kan spare mye arbeid, og kan kontrollere utformingen av flere nettsider samtidig.

    CSS kan imidlertid øke applikasjonens lastetid hvis absolutte dimensjoner og posisjoner i CSS-direktiver er spesifisert, eksterne stilark brukes ikke til å skille CACHING AV CSS fra innholdet, CSS-bildeaktiva er ikke kombinert i Sprite-filer, og / eller det er mer enn en H1 tag per side.

    Unngå Absolutte Dimensjoner og Posisjoner i CSS – direktiver

    Issue-Pixel Og absolutte dimensjoner og posisjoner i CSS-direktiver bør unngås, da de kanskje ikke tillater nettleseren å tilpasse innholdet slik at det passer til skjermen eller gjengis riktig på alle enhetstyper. Det er imidlertid unntak fra denne regelen. Hvis du for eksempel vil at bilder skal skreddersys for å passe til en bestemt skjerm, er det mer fornuftig å angi dimensjonen i piksler. I tillegg kan pikselmål være passende for marger, kantlinjer og polstring.

    Løsning – bruk relative mål som em, ex, bolder, larger, og thick der det er mulig. Når du for eksempel angir skrift, bruker du font-size: 1.5em i stedet for font-size: 12px.

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

    Bruk Eksterne Stilark For Å Skille CACHING AV CSS Fra Innholdet

    Utgave-Eksterne stilark skal brukes til å skille CSS-instruksjonene fra HTML. DETTE CSS caching av en nettleser unngår en annen tur til serveren og hastigheter opp siden lasting.

    Løsning – i delen <head> I HTML, bruk språk for å ringe CSS-filen eksternt, og hold CSS-instruksjonene i en egen fil FRA HTML (se nedenfor).

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

    Advarsel: Bruk av mange eksterne CSS-stilark kan påvirke ytelsen negativt, så de bør kombineres til en enkelt ekstern CSS.

    • Intern vs Ekstern CSS| http://infoheap.com/internal-vs-external-css/
    • Optimaliser CSS-Levering| https://varvy.com/pagespeed/optimize-css-delivery.html

    Kombiner CSS Bilde Eiendeler I Sprite Filer

    Problem – når mange bilder brukes uavhengig, krever det flere nettverksforespørsler for å laste ned hver enkelt. CSS Sprites kombinere flere bilder til en enkelt bildefil for bruk på et nettsted for å øke hastigheten på levering og lastetid. Filen kan deretter kuttes opp VED HJELP AV CSS.

    Løsning-Du kan finne mange verktøy for å lage sprite ark, inkludert Kompass, Lemonade, SpriteMe, Fireworks CS6, Og TexturePacker.

    • Fixit-Bildespurter| https://mobiforge.com/design-development/fixit-image-sprites
    • CSS Sprites: Hva de er, Hvorfor De Er Kule, Og Hvordan Du Bruker Dem| https://css-tricks.com/css-sprites/
    • CSS Sprite Ark: Beste Praksis, Verktøy Og Nyttige Programmer| https://webdesign.tutsplus.com/articles/css-sprite-sheets-best-practices-tools-and-helpful-applications–webdesign-8340

    Ressurser

    • Hva ER CSS? | https://www.w3schools.com/css/css_intro.asp

    Optimaliser Bilder

    sidevekt, også kjent som «tyngdekraften på nettet», reduserer programytelsen ved å øke lastetiden og redusere nettverksdatabruk. Å forstå sidevekt, ressurskomprimering, optimalisering av bilder og bildedimensjoner er avgjørende for en vellykket webstrategi.

    Begrens Sidestørrelse Og Vekt

    Problem-den totale filstørrelsen på siden, inkludert avhengige filer, påvirker lastetiden og hvor lang tid det tar en mobil crawler å evaluere. Rene og lette sider er best for mobile SEO; mobile søkemotorer vil foretrekke å rangere disse sidene. Forsøk å holde filstørrelsen på alle mobilsider under 25 kilobyte. Dette er den maksimale filstørrelsen som iPhone vil cache for ethvert element som lastes ned.

    Løsning – det er mange måter å redusere sidevekten, inkludert bildeoptimalisering, gzip-komprimering, Minifisering, Caching, JavaScript og CSS-konsolidering. Andre løsninger inkluderer å unngå følgende: bygger og inkluderer, JavaScript og CSS rammer, tilpassede fonter, og unødvendig side rot. Den beste løsningen avhenger av detaljene på nettstedet ditt.

    • Fixit-Grense For Sidestørrelse| https://mobiforge.com/design-development/fixit-page-size-limit
    • Forstå Side Vekt| https://mobiforge.com/research-analysis/understanding-web-page-weight
    • Redusere Siden Vekt| https://mobiforge.com/design-development/reducing-page-weight

    Aktiver Ressurskomprimering

    Problem-Komprimering av ressurser med gzip eller Deflate kan redusere antall byte som sendes over nettverket.

    Løsning-De fleste servere kan konfigureres til å bruke gzip-komprimering. Du kan for eksempel aktivere gzip-komprimering på En Apache-server ved hjelp av konfigurasjonsfilen .htaccess. Du kan også bruke mod_gzip for å aktivere gzip-komprimering, og mod_deflate for å komprimere utdataene fra serveren din før du sender den til din besøkende. Hvis området ligger på En Windows-server, kan du aktivere komprimering for både statiske og dynamiske filer ved å velge «aktiver statisk komprimering» i Iis (Internet Information Services) manager.

    • Aktiver Komprimering| https://developers.google.com/speed/docs/insights/EnableCompression
    • Aktiver Gzip-Komprimering| https://varvy.com/pagespeed/enable-compression.html
    • Slik Aktiverer du Gzip-Komprimering| https://www.giftofspeed.com/enable-gzip-compression/

    Optimaliser Bilder

    Problem – Bilder På siden bør optimaliseres for å redusere filstørrelsen uten å påvirke visuell kvalitet betydelig. Formatering og komprimering av bilder kan spare mange byte med data.

    Løsning-Bruk bildekomprimeringsprogrammer for enkelt å redusere filstørrelsen på bilder. Disse verktøyene fjerner skjulte data i bildefilen, for eksempel flere fargeprofiler og metadata (f. eks., geolocation av hvor fotografiet ble tatt), som ikke er nødvendig. De gir en rask og enkel måte å redusere filstørrelsen uten å miste bildekvalitet. Bildekomprimeringsverktøy inkluderer TinyJPG, Compressor.io Du kan også bruke Shopify-Apper til Å Lage Bilder og Lage Dem selv.

    • Optimaliser Bilder| https://developers.google.com/speed/docs/insights/OptimizeImages
    • Fixit-Image Crunch| https://mobiforge.com/design-development/fixit-image-crunch
    • Optimalisering Av Bilder For Web: En praktisk Guide| https://www.abetterlemonadestand.com/optimizing-images-for-web/
    • Slik Optimaliserer Du Bilder For WordPress-Nettstedet Ditt| https://www.elegantthemes.com/blog/tips-tricks/optimize-images-for-your-wordpress-website

    Angi Bildedimensjoner

    Problem – bildedimensjoner skal alltid inkluderes, og bilder skal ikke samples på nytt under kjøring, da dette vil redusere gjengivelsen av siden. Når bilder refereres fra markeringen din, bør du liste opp skjermdimensjonene for nettleseren. Angi en bredde og høyde for alle bilder gir raskere gjengivelse ved å eliminere behovet for unødvendige flyt og maler.

    Løsning-Angi bildebredde og høyde ved å inkludere attributtene width og height når du bruker elementet img (se nedenfor).

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

    hvis det ikke er angitt noen dimensjoner i det inneholdende dokumentet, eller hvis de angitte dimensjonene ikke samsvarer med de faktiske bildene, vil nettleseren kreve en reflow og repaint når bildene er lastet ned. For å forhindre flyt, angi bredden og høyden på alle bilder enten I HTML <img> – taggen eller I CSS.

    • Fixit-Angi Bildestørrelser| https://mobiforge.com/design-development/fixit-specify-image-sizes
    • Angi Bildedimensjoner| https://gtmetrix.com/specify-image-dimensions.html

    Utnytte Caching

    Redusere antall ganger dine søknad forespørsler og prosesser ressurser vil forbedre din lastetid og redusere nettverksdatabruk. Du kan gjøre dette på to måter: lokal caching eller minimere bruken av eksterne skript og objekter.

    Leverage Browser Caching

    Problemhenting av ressurser over nettverket er både tregt og dyrt, og nedlastingen kan kreve flere rundturer mellom klienten og serveren, noe som forsinker behandlingen og kan blokkere gjengivelse av sideinnhold. Dette kan også medføre datakostnader for den besøkende. Alle serversvar bør angi en hurtigbufringspolicy for å hjelpe klienten med å avgjøre om og når de kan gjenbruke et tidligere hentet svar.

    Løsning-Utnytt nettleserbufring ved å endre forespørselsoverskriftene for ressursene dine for å bruke bufring. Du kan enten legge til noen kode i konfigurasjonsfilen .htaccess på webverten / serveren eller bruke HTTP-toppteksten Cache-Control (se nedenfor).

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

    Kombiner Flere Filer For Forbedret Ytelse

    Problem-Hvert eksternt objekt lastet ned på en side krever en separat dns-forespørsel (domain name server). Dette er ikke et stort problem på en tradisjonell datamaskin med rask tilkobling, men på langsommere mobilnett kan det føre til ventetid. Dette vil skade programytelse og lastetid.

    Løsning-Reduser antallet og størrelsen på ressursene som kreves for området. Men hvis det ikke er mulig, kombinere alle eksterne CSS-filer i en enkelt stilark eller Alle JavaScript-filer i en stor fil for å redusere antall samtaler til nettleseren.

    • Beste Praksis For Mobile Webapplikasjoner-Minimer Eksterne Ressurser| https://varvy.com/pagespeed/cache-control.html
    • Slik Reduserer DU HTTP-forespørsler For Å Øke Hastigheten På WordPress-Nettstedet Ditt| https://yoast.com/reduce-http-requests-wordpress/
    • Enkle Trinn For Å Forbedre Siden Lastetider| http://www.peachpit.com/articles/article.aspx?p=1431494&seqNum=5

    Unngå Popup-vinduer

    bruk av popup-vinduer er ikke nødvendigvis dårlig på et skrivebordsprogram. Men hvis applikasjonen bruker responsiv design eller brukes på en mobilapplikasjon, hindrer popup-vinduer ofte og skader brukeropplevelsen. De trekker brukerens oppmerksomhet bort fra siden til popup-vinduet, og nybegynneren blir raskt forvirret og frustrert.

    Popup-vinduer

    Problem – Popup-vinduer støttes ikke på mange mobile enheter, og bruk av dem kan ha uforutsigbare resultater

    Løsning – det er mange alternativer til popup-vinduer som er synlige uten å ta opp hele vinduet, for eksempel lysbokser, innebygd utvidelse og stasjonære bannerannonser.

    • Fixit – Popup-Vinduer| https://mobiforge.com/design-development/fixit-pop-windows
    • Døden Av Mobile Pop-Ups og Hva Du Kan Gjøre I Stedet| http://searchengineland.com/death-mobile-pop-ups-can-instead-263390
    • Google Slår Ned På Påtrengende Mobile Popup-Vinduer: Her Er Hva Markedsførere Trenger Å Vite| https://blog.hubspot.com/marketing/google-pop-up-mobile-marketing#sm.0000u10cf1u3gcsdyzz2qa1xm5ugf
    • Hva Er Det Beste Alternativet Til En Pop-up? | https://www.quora.com/Which-is-the-best-alternative-to-a-pop-up
    • 5 Viktige Ux-Regler For Dialogdesign| https://uxplanet.org/5-essential-ux-rules-for-dialog-design-4de258c22116
    • 9 Ikke Så Påtrengende Alternativer For Å Sveve Popup-Annonser| https://www.linkedin.com/pulse/9-not-so-intrusive-alternatives-hover-pop-up-ads-paula-agius

    Vår Metodikk For Denne Studien

    vi brukte følgende trinn for å gjennomføre denne studien:

    1. Ved Hjelp Av Digital Analytics program (DAP) statistikk, vi trakk navnene på de 26 AMERIKANSKE føderale regjeringen nettsteder nås av mobile enheter.
    2. vi testet hvert nettsted ved hjelp av syv mobilvennlige automatiserte testverktøy:
      • Google Mobilvennlig Test| https://www.google.com/webmasters/tools/mobile-friendly/
      • Mobile Moxie| https://www.mobilemoxie.com/tools/site_analysis/
      • Mobi Klar| http://ready.mobi/
      • Page Insights| https://developers.google.com/speed/pagespeed/insights/
      • W3C MobileOK Checker| https://validator.w3.org/mobile/
      • VARVY SEO tool| https://varvy.com/
      • Gtmetrix – https://gtmetrix.com/
    3. Etter å ha sett på de mislykkede kriteriene rapportert av hvert verktøy, samlet vi resultatene i et Enkelt Microsoft Excel-regneark.
    4. vi grupperte problemene vi fant på 15 eller flere nettsteder i de fem kategoriene som dekkes i denne veiledningen, som er oppført i rekkefølge av de fleste forekomster (JavaScript) til minst forekomster (popup-vinduer).

    Articles

    Legg igjen en kommentar

    Din e-postadresse vil ikke bli publisert.