Sådan måles Front-End Website Performance
Taler om optimeringsprocessen er næsten ikke-eksisterende blandt nyudviklede webdesignere. Selv mange webdesignere, der har været i erhvervslivet et årti eller længere, forstår ikke fuldt ud vigtigheden af webstedsoptimering.
Efter en længere periode begynder en hjemmeside at falde ned. Frontend-filerne kan indeholde overdrevne blokke af kode eller låste, skjulte bits. Dette ses mest set i JavaScript-filer eller billeder. Det kan være vigtigt at skabe et behageligt websted for brugeroplevelsen, men uden et optimeret websted kan designet måske ikke engang have mulighed for at indlæse fuldt ud på utålmodige brugere.
Nedenstående tips er til nybegynder-mellemliggende webudviklere interesseret i optimering af deres sider Til fulde. Der er mange tilgængelige teknikker, og hver enkelt opfører sig forskelligt afhængigt af, hvilke problemer dit website lider af. Prøv at skumme et par områder og se, om du kan anvende disse teknikker i dine egne mærker.
HTTP-anmodninger
Hver gang din hjemmeside indlæser, sender den en HTTP-anmodning til en fjernserver. Denne type dataoverførsel hedder a netværksprotokol bruges specifikt til distribution og lagring af plaintext-filer. Disse omfatter ofte din grundlæggende frontendkode som HTML, CSS og JavaScript.
Når anmodningen er sendt, vil din browser analysere hvert sideelement. Afhængig af parseringsmotorens indhold læses hver side forskelligt, og elementerne vises i varierende rækkefølge baseret på overførselshastigheder. For eksempel vil Internet Explorer gøre websider anderledes end Chrome eller Safari, og alle disse kører lidt forskellige parsingmotorer end Firefox eller Opera.
Hvad der skal overvejes, er, hvor længe anmodningstiden er for hver fil, og hvis denne tendens holder konsekvent. Overvej at modtage op mod 100k eller 1 million besøgende om en måned. Det er browsers job at sammenlægge hvert sideelement og indlæse eksterne filer i hukommelsen.
Ofte indebærer de faktorer, der holder en websides optimerede hastighedsreferenceklumpy JavaScript inde med eller store billedfiler. Med popularisering af Verizon FiOS er det almindeligt for internethastigheder at ramme 600kbps og holde klatring! Desværre er dette ikke normen, og selv med højhastighedsforbindelser er det muligt at opleve optimeringsfejl.
Retsmidler til Site Performance
Vi er ikke alene inden for webudvikling og frontend optimering. For korrekt arbejde skal udfyldes er der visse værktøjer, der er nødvendige for at håndtere jobbet.
Google har udgivet et projekt med titlen Page Speed, som blev bygget til at hjælpe udviklere med at optimere deres websites og kontrollere de bedste resultater. Oprindelig blev projektet startet som en open-source Firebug add-on og er nu accepteret som en tredjeparts reference til website test.
En anden mulighed for Firebug-brugere er Yahoo! S YSlow-tilføjelse. Skriptet analyserer hver websideforespørgsel og foreslår de mest almindelige måder at forbedre ydeevnen på. Disse forslag er baseret på Yahoo! Udviklerressourcer for bedste optimeringspraksis i webdesign.
Programmet kan være lidt slibende i starten, da det indeholder så meget information. Bare hold dig til det grundlæggende og ved at følge simple dokumentation skal processen være et stykke kage.
Udviklere er altid interesserede i at hoppe på et projekt for at bryde ned kode, så dette burde være en no brainer. For lidt hjælp kan du tjekke YSlow hjælpeguide.
Hastighedsteknikker
Der er nogle enkle tricks, som du kan søge på din hjemmeside med det samme for at fremskynde ydeevnen. Den første og nemmeste måde er at adskille dine CSS- og JavaScript-filer.
CSS-koden tilhører overskriften på dit dokument. Dette er nyttigt, fordi CSS-egenskaber skal analyseres, mens DOM'en indlæses. Når en webbrowser genkender dine CSS-stilarter i overskriften, vil den vente med at vise websiden helt, indtil alle stilarter er blevet indlæst. Også billeder, der bruges til ikoner eller baggrundsdesign, tager tid at indlæse og bør gøre det først.
På forsiden kan alle JavaScript-filer flyttes til din sidefod, og det kan dramatisk løse hangup-tider. Mange browsere blokkerer parallelle downloads, hvilket betyder, at før du gør siden til en brugers webbrowser, kan den stoppe i 4 sekunder for fuldt ud at indlæse ekstern JS inkluderer.
Dette er ikke altid muligt, og det er altid nødvendigt for hver hjemmeside. Hvis dine sider indlæser det samme med samme svarstid uanset filplaceringer, skal du ikke genere manøvrering af nogen spiller.
Dynamisk indhold kan ikke indlæses, før hele DOM er færdig, men nogle gange returnerer dette fejl. Test ud CSS / JS indeholder for at se om du kan returnere optimeringsfordele.
Komprimering af filstørrelse
Komprimering af store filer er blevet meget populær. Det kan nu endda bruges på websider for at reducere belastningstider og holde filstørrelserne meget lave. Meget af arbejdet er allerede blevet gjort, og med værktøjer som YUI Compressor-mini-filer er en ingen-energiproces.
Der er masser af andre gratis tjenester på nettet for at hjælpe med denne opgave også. Minimer CSS har en hel CSS komprimeringsinterface for at gøre processen enkel. Den samme hjemmeside har også en brugerdefineret JavaScript-kompressor, der udfører mange af de samme opgaver, men holder scriptinget organiseret.
Du kan også overveje at komprimere de største billeder på dine websider. Dette kan gøres med enhver billedredigeringssoftware som Adobe Photoshop eller GIMP ved simpelthen at genskabe billedet med en lavere opløsning. PNG-billeder vil eksportere meget mindre i gennemsnit end jpg- eller TIFF-formater. Der er også masser af online-værktøjer som Image Optimizer til at hjælpe i komprimeringsprocessen.
Kildekontrol og metrics
Dette er en rutine, der ikke ofte praktiseres af webudviklere, der kan tilbyde fantastiske resultater. Ved at analysere alle sideelementerne på din hjemmeside kan du se, hvilken tid der var længst at indlæse, og rækkefølgen, hvor hvert stykke blev lastet.
Det mest populære værktøj Mozilla Firebug er en plug-in til Firefox-browseren. Denne app installerer en lille værktøjslinje nederst i din browser for at kontrollere svarstider, headerinformation, sideelementer og scripts for hver hjemmeside. Scriptet er også blevet sendt til Firebug Lite som en udvidelse til Google Chrome.
Apache med mod_pagespeed
Ikke alle opsætninger kører en Apache webserver, så denne mulighed er ikke altid tilgængelig. Dette modul er direkte relateret til Googles sidens hastighedsovervågning nævnt tidligere. Faktisk var koden for mod_pagespeed oprindeligt baseret på mange biblioteker fra Google Code's databaser.
Apache tillader serveradministratorer at installere små pakker kaldet moduler for at forbedre deres serveres ydeevne. mod_pagespeed er et af disse moduler, der automatisk udfører optimeringsteknikker ved kørsel. Der er for mange processer til at liste, selvom nogle af de vigtigste applikationer omfatter fly-HTML / CSS / JS kompression og billed caching.
Projektet er i øjeblikket placeret hos Google og er åbent for udviklere. Google har arbejdet med GoDaddy for at implementere mod_pagespeed i alle hosting-konti, der kører Apache HTTP-serveren.
Selv om mange andre muligheder er tilgængelige, er frontend-udviklingsarbejdet noget af det mest intense, især i betragtning af præoptimering af vigtige websider. Optimering til sidehoveder og store billeder kan være en ekstremt kedelig, men givende opgave.
Overvej nogle af de teknikker, der introduceres i denne artikel, og se, hvordan disse kan anvendes i dine webprojekter. Ofte tager udviklere ikke tid nok til at sætte pris på deres arbejde og rydde ud gamle kodekser. Hvis du stadig arbejder for nogle tips, bør du læse vores ultimative weboptimeringsvejledning til tips om frontend vedligeholdelse og bekvem forbedring af ydeevnen..
