Forbedre load hastigheden på dit Responsiv design.

Responsiv webdesign er det næste store indenfor webdesign og er ideel til mobile enheder. Men der findes et trade-off for dette i form af ydeevne på grund af større filstørrelser.
Det har fået eksperter til at sige, at ligesom de tidlige dage med Flash, så er Responsiv webdesign noget, vi er begejstrede for uden en god grund. Men mens der i øjeblikket er problemer med ydeevnen på mange responsivt designede hjemmesider, kan disse ‘børnesygedomme’ overvindes med nogle små justeringer, kompression og image re-sizing.

Hvorfor Responsiv design kan være langsomt?

Responsive designs indlæser alle de samme HTML-elementer for hver enhed, herunder til tablet -og desktop levering. Det betyder, at alt indhold ofte er leveret, herunder billeder og scripts, uanset hvilken enhed det bliver set på.

En undersøgelse foretaget sidste år viste, at 86% af de Responsive hjemmesider der er online leverer en fuld hjemmeside til mobile enheder.
I øjeblikket kan Responsiv webdesign forstørre hjemmeside-størrelser og det er den tendens, der skal løses, især når man tænker på, at 57% af mobilbrugerne vil forlade hjemmesiden, hvis den ikke indlæses inden for 3 sekunder.

Hvordan kan ydeevnen forbedres?

Til dem, der allerede har et design på plads, og ønsker at optimere, kan Mobitest bruges til at måle resultater med henblik på at løse problemet. Selvfølgelig, når man planlægger et design vil optimering være enklere at udføre på dette stadium og præstation skal altid betragtes som en væsentlig del af design, og ikke noget der skal laves efterfølgende.
For at forbedre ydeevnen, størrelsen af ​​de sider og belastning af ressourcer skal der reduceres. Dette kan udføres ved hjælp af forskellige teknikker, uden at ændre udseendet og designet af hjemmesiden.
Den første ting man skal overveje er, hvordan man sikre, at kun de ressourcer, som er nødvendige sendes til enheden. Dette kan gøres ved at minimere antallet af HTTP-anmodninger, således at brugeren bruger mindre tid med at vente på at DOM indlæses. Dette kan til gengæld gøres ved at komprimere CSS og Javascript ressourcer, hvilket værktøjer såsom Compass, et open source CSS authoring Framework, kan bruges til .

Conditional loading

Dette kan betragtes som en vigtig teknik, når det kommer til Responsiv webdesign, da det kan bruges til at sikre, at mobile og smartphone brugere ikke downloader aspekter af webstedet der bruger meget båndbredte.
Conditional loading kan bruges til at stoppe alle former for indhold i at blive indlæst, herunder sociale widgets, billeder, kort og mange flere.

Billeder

Vi ved, at billeder er mest ansvarlige for at optage den største mængde kilobytes på en hjemmeside. Det er også sikkert at sige, at billeder, der er designet til en desktop browser kommer til at klare sig dårligere, når de leveres til en mobil enhed.

Hvis en hjemmeside også har en masse af indhold, så det kommer til at påvirke ydeevnen endnu mere, en måde at forhindre dette indhold i at blive indlæst behov, skal derfor implementeres. Dette kan gøres ved at ændre Mark-up, ved at ændre src eller img elementer eller man kan lade Adaptive Images hjælpe en med det.

Softwaren registrerer skærmstørrelse og opretter automatisk caches og leverer de relevante nedskaleret indlejrede HTML-billeder, uden behov for at ændre HTML mark-up. Adaptive Images bruger et htaccess fil, en php -fil og en enkelt linje Javascript for at bestemme skærmstørrelse af besøgende på hjemmesiden.

Tekst

Det er værd at tænke over teksten også, da dette vil wrappe naturligt, når skærm-enheden er indsnævret, og kan forårsage problemer med visningen.
FitText er et værktøj, der kan bidrage til at løse dette. Et jQuery plugin, der auto-opdaterer skriftstørrelser, med indstillinger for minimum og maksimum størrelser, der er tilladt.
Dette er ideelt for overskrifter, der kan vises dårligt på en mobil enhed og tillader CSS3 angivne skriftstørrelser at blive ignoreret. Imidlertid er FitText kun beregnet til overskrifter og bør ikke anvendes indenfor afsnits-tekst.