Kako izmjeriti Front-end Izvedba web stranica

Govoreći o optimizacijskom procesu gotovo da i ne postoji među web dizajnerima nove dobi. Čak i mnogi web dizajneri koji su u poslu desetljeće ili duže ne razumiju u potpunosti važnost optimizacije web-lokacije.

Nakon dužeg vremenskog razdoblja web stranica će se početi gubiti. Datoteke sučelja mogu sadržavati pretjerane blokove koda ili zaključane, skrivene bitove. To se najčešće vidi u JavaScript datotekama ili slikama. Možda je važno stvoriti ugodnu web-lokaciju za korisničko iskustvo, ali bez optimizirane web-lokacije dizajn možda neće imati čak ni prilike da se potpuno napuni nestrpljivih korisnika.

Savjeti u nastavku namijenjeni su web-programerima koji se bave početnim i srednjim obrazovanjem optimiziranje njihovih stranica do kraja. Postoje mnoge tehnike koje su dostupne i svaka će se ponašati drugačije, ovisno o tome od čega pate vaše web stranice. Pokušajte pokupiti nekoliko područja i vidjeti možete li primijeniti ove tehnike na vlastite oznake.

HTTP zahtjevi

Svaki put kad se web-lokacija učita, šalje udaljeni poslužitelj HTTP zahtjev. Ova vrsta prijenosa podataka naziva se a mrežni protokol koristi se posebno za distribuciju i pohranjivanje datoteka otvorenog teksta. Oni često uključuju osnovni kod za frontend, kao što su HTML, CSS i JavaScript.

Nakon slanja zahtjeva preglednik će analizirati svaki element stranice. Ovisno o raščlanjivanju motora, svaka će se web stranica učitati drugačije, a elementi će se pojavljivati ​​u različitim redoslijedima ovisno o brzinama prijenosa. Na primjer, Internet Explorer prikazivat će web-stranice drugačije od preglednika Chrome ili Safari, a sve to pokreće nešto drugačije motore za analiziranje od preglednika Firefox ili Opera.

Ono što se mora uzeti u obzir je koliko dugo traje zahtjev za svaku datoteku i ako se taj trend drži dosljedno. Razmislite o primanju više od 100.000 ili 1 milijun posjetitelja u mjesecu. Posao preglednika je da sastavi svaki element stranice i učita vanjske datoteke u memoriju.

Često čimbenici koji zadržavaju optimiziranu brzinu JavaScripta na web-lokaciji uključuju ili velike slikovne datoteke. Uz popularizaciju Verizon FiOS-a uobičajeno je da brzine Interneta dosegnu 600kbps i nastave se penjati! Nažalost, to nije norma, pa čak i kod brzih veza moguće je iskusiti greške u optimizaciji.

Pravni lijekovi za izvedbu web-lokacije

Nismo sami u području web razvoja i optimizacije frontend-a. Da bi se obavio odgovarajući posao, postoje određeni alati potrebni za obavljanje posla.

Google je objavio projekt pod nazivom Brzina stranice koji je izrađen kako bi programeri optimizirali svoje web-lokacije i provjerili najbolje razine izvedbe. Izvorno je projekt započeo kao Firebug dodatak otvorenog koda i sada je prihvaćen kao referenca treće strane za testiranje web-mjesta.

Druga mogućnost za korisnike usluge Firebug je dodatak YSlow tvrtke Yahoo! Skripta analizira svaki zahtjev web-stranice i predlaže najčešće načine za poboljšanje izvedbe. Ovi prijedlozi temelje se na Yahoo! Programeri resursa za najbolje prakse optimizacije u web dizajnu.

Program može biti malo abrazivan u početku jer sadrži toliko informacija. Samo se držite osnove i slijedeći jednostavnu dokumentaciju, proces bi trebao biti komad torte.

Programeri su uvijek zainteresirani za skakanje na projekt kako bi razbili kôd tako da ovo ne bi trebalo biti pametno. Za malu pomoć možete provjeriti YSlow vodič za pomoć.

Tehnike brzine

Postoje neki jednostavni trikovi koje možete odmah primijeniti na svoju web-lokaciju kako biste ubrzali izvedbu. Prvi i najlakši način je da odvojite CSS i JavaScript datoteke.

CSS kôd pripada zaglavlju dokumenta. To je korisno jer se CSS svojstva moraju analizirati dok se DOM učitava. Kada web-preglednik prepoznaje vaše CSS stilove u zaglavlju, čekat će da u potpunosti prikaže web-stranicu dok se ne učitaju svi stilovi. Isto tako, sve slike koje se koriste za ikone ili pozadinske dizajne trebat će vremena za učitavanje i to prvo.

Sa druge strane, premještanje svih JavaScript datoteka u podnožje web-lokacije može dramatično riješiti vrijeme odlaganja. Mnogi preglednici blokiraju paralelna preuzimanja, što znači da se, prije prikazivanja stranice, web-preglednik korisnika može zaustaviti na 4 sekunde kako bi u potpunosti učitao vanjske JS-ove.

To nije uvijek moguće niti je uvijek potrebno za svaku web stranicu. Ako se vaše stranice učitavaju jednako s jednakim vremenom odgovora, bez obzira na položaje datoteka, nemojte se gnjaviti s pokretima.

Dinamički se sadržaj ne može učitati dok se ne dovrši cijela DOM, ali ponekad će se pojaviti pogreške. Ispitajte CSS / JS kako biste vidjeli može li se vratiti bilo kakve prednosti optimizacije.

Sažimanje veličine datoteke

Sažimanje velikih datoteka postalo je vrlo popularno. Sada se može koristiti čak i na web stranicama kako bi se smanjilo vrijeme učitavanja i zadržala veličina datoteka vrlo niska. Veći dio posla je već učinjen i alati kao što su YUI Compressor mini-datoteke su proces bez energije.

Postoji mnogo drugih besplatnih usluga na webu koje će vam pomoći iu ovom zadatku. Smanji CSS ima cijelo sučelje CSS kompresije kako bi proces bio jednostavan. Ista web-lokacija ima i prilagođeni JavaScript kompresor koji obavlja mnogo istih zadataka, ali organizira skriptiranje.

Možete razmotriti i sažimanje najvećih slika na svojim web stranicama. To se može učiniti s bilo kojim softverom za uređivanje fotografija kao što je Adobe Photoshop ili GIMP jednostavnim ponovnim uzorkovanjem slike pri manjoj razlučivosti. PNG slike će u prosjeku izvoziti znatno manje od jpg ili TIFF formata. Tu je i mnogo on-line alata kao što je Image Optimizer za pomoć u procesu kompresije.

Provjera izvora i mjerni podaci

To je rutina koju često ne prakticiraju web programeri, što može ponuditi nevjerojatne rezultate. Analizirajući sve elemente stranice na Vašoj web stranici možete vidjeti što je najduže učitalo i redoslijed kojim je svaki komad bio učitan..

Najpopularniji alat Mozilla Firebug je dodatak za Firefox preglednik. Ova aplikacija instalira malu alatnu traku na dnu preglednika kako bi provjerila vrijeme odziva, informacije o zaglavlju, elemente stranice i skripte za svaku web-lokaciju. Skripta je također prenesena u Firebug Lite kao proširenje za Google Chrome.

Apache s mod_pagespeed

Neke postavke neće pokrenuti Apache web poslužitelj, tako da ova opcija nije uvijek dostupna. Ovaj modul je izravno povezan s Googleov monitor brzine stranice ranije spomenuto. Zapravo, kod za mod_pagespeed izvorno je bio baziran na mnogim knjižnicama iz baza podataka Google Codea.

Apache omogućuje administratorima poslužitelja da instaliraju male pakete koji se nazivaju moduli kako bi poboljšali performanse njihovih poslužitelja. mod_pagespeed je jedan od tih modula koji automatski provodi optimizacijske tehnike tijekom izvođenja. Postoji previše procesa na popisu, iako neke od glavnih aplikacija uključuju on-the-fly HTML / CSS / JS kompresiju i predmemoriranje slika.

Projekt je trenutno smješten na Googleu i otvoren je za programere. Google radi s GoDaddyjem kako bi implementirao mod_pagespeed u sve hosting račune koji pokreću Apache HTTP poslužitelj.

Iako su mnoge druge opcije dostupne, frontend razvojni posao je jedan od najintenzivnijih, posebno s obzirom na pre-optimizaciju za ključne web stranice. Optimiziranje zaglavlja web-lokacija i velikih slika može biti iznimno dosadan, ali nagrađen zadatak.

Razmotrite neke od tehnika koje su predstavljene u ovom članku i pogledajte kako se one mogu primijeniti na vaše web-projekte. Često programeri ne uzimaju dovoljno vremena da cijene njihov rad i očiste stare dijelove koda. Ako još uvijek žudite za nekim savjetima, trebali biste pročitati naš konačni vodič za web-optimizaciju za naputke o održavanju sučelja i praktičnim poboljšanjima izvedbe.