Kuidas mõõta esikülje veebisaidi toimivust

Optimeerimisprotsessist rääkimine on uute ajastute veebi disainerite seas peaaegu olematu. Isegi paljud veebidisainerid, kes on tegutsenud kümnendil või kauem, ei mõista täielikult saidi optimeerimise tähtsust.

Pikema aja pärast hakkab veebisait rabama. Frontendifailid võivad sisaldada liialdatud koodi või lukustatud, peidetud bitte. Seda on kõige sagedamini näha JavaScript-failide või piltide puhul. Võib olla oluline luua meeldiv veebisait kasutajate kogemuste jaoks, kuid ilma optimeeritud veebisaidita ei pruugi disainil olla isegi võimalust kannatamatutele kasutajatele täielikult laadida..

Alltoodud näpunäited on mõeldud algajatele vahepealsetele veebiarendajatele nende lehekülgede optimeerimine täielikult. Olemas on palju tehnikaid ja igaüks käitub erinevalt, sõltuvalt sellest, milliseid probleeme teie veebileht kannatab. Proovige mõningaid valdkondi koorida ja vaadake, kas saate neid meetodeid oma märkidesse rakendada.

HTTP taotlused

Iga kord, kui teie veebisait laadib, saadab see HTTP-päringu serverisse. Seda tüüpi andmeedastust nimetatakse a võrguprotokoll kasutatakse spetsiaalselt tekstifailide levitamiseks ja salvestamiseks. Need sisaldavad sageli teie põhifaili koodi nagu HTML, CSS ja JavaScript.

Kui päring on saadetud, analüüsib teie brauser iga lehekülje elementi. Sõltuvalt arestimisseadmest laadib iga veebileht erinevalt ja elemendid ilmuvad erineva järjekorras, lähtudes ülekandekiirustest. Näiteks pakub Internet Explorer veebilehti erinevalt Chrome'ist või Safarist ning kõik need töötavad mõnevõrra erinevalt, kui Firefox või Opera.

Tuleb arvestada, kui kaua on iga taotluse esitamise aeg ja kas see suundumus on järjepidev. Mõtle kuu jooksul 100 000 või 1 miljoni külastaja külastamisele. Brauseri ülesanne on iga lehekülje element kokku panna ja välised failid mällu laadida.

Sageli on tegurid, mis hoiavad veebisaidi optimeeritud kiirusviite clunky JavaScript-i, või suured pildifailid. Verizon FiOS-i populariseerimisega on tavaline, et Interneti kiirus tabab 600kbps ja hoiab ronimist! Kahjuks ei ole see norm ja isegi kiirete ühenduste korral on võimalik kogeda optimeerimisvigu.

Õiguskaitsevahendid saidi toimivusele

Me ei ole üksi veebiarenduse ja frontend-optimeerimise valdkonnas. Nõuetekohase töö lõpuleviimiseks on töö tegemiseks vajalikud vahendid.

Google on välja andnud projekti nimega Page Speed, mis on loodud selleks, et aidata arendajatel oma veebisaite optimeerida ja kontrollida parimaid jõudluse tasemeid. Algselt algas projekt avatud lähtekoodiga Firebugi lisandmoodulina ja on nüüd aktsepteeritud kolmanda osapoole viidetena veebisaidi testimiseks.

Teine võimalus Firebugi kasutajatele on Yahoo! 'I YSlow lisandmoodul. Skript analüüsib iga veebilehe taotlust ja soovitab kõige tavalisemaid viise tulemuslikkuse parandamiseks. Need soovitused põhinevad Yahoo! Arendajate ressurss veebidisaini parimate optimeerimistavade jaoks.

Programm võib alguses olla natuke abrasiivne, kuna see sisaldab nii palju teavet. Lihtsalt kinni põhitõedest ja lihtsa dokumentatsiooni järgi peaks protsess olema kook.

Arendajad on alati huvitatud projekti hüppamisest, et kood lõhkuda, nii et see peaks olema mõttetu. Veidi abi saamiseks vaadake YSlow abijuhikut.

Kiirusmeetodid

On mõningaid lihtsaid trikke, mida saate oma veebisaidile kohe esitada, et kiirendada jõudlust. Esimene ja lihtsaim viis on eraldada oma CSS- ja JavaScript-failid.

CSS-kood kuulub teie dokumendi päisesse. See on kasulik, sest COM-i omadused tuleb DOM-i laadimisel analüüsida. Kui veebibrauser tunneb teie CSS-stiili rubriigis, ootab ta veebilehe täielikku kuvamist, kuni kõik stiilid on laaditud. Ka ikoonide või taustamudelite jaoks kasutatavad pildid laadivad aega ja peaksid seda tegema kõigepealt.

Flip-poolel võivad kõik JavaScript-failid teie saidi jalusesse dramaatiliselt lahendada. Paljud brauserid blokeerivad paralleelse allalaadimise, mis tähendab, et enne lehekülje muutmist võib kasutaja veebibrauser 4 sekundi vältel peatuda, kui välise JS-i täielik laadimine hõlmab.

See ei ole alati võimalik ega ole alati vajalik iga veebisaidi jaoks. Kui teie lehed laadivad samaväärse reageerimisajaga sama, sõltumata failide paigutustest, siis ärge muretsege ühtegi esitamist.

Dünaamiline sisu ei saa laadida enne, kui kogu DOM on lõpetatud, kuid mõnikord taastab see vigu. Testi CSS / JS sisaldab, et näha, kas saate optimeerimise eeliseid tagastada.

Faili suuruse kokkusurumine

Suurte failide tihendamine on muutunud väga populaarseks. Nüüd saab seda isegi veebilehtedel kasutada, et vähendada laadimisaega ja hoida failide suurust väga madalana. Suur osa tööst on juba tehtud ja selliste vahenditega nagu YUI Compressor mini-failid on energiavaba protsess.

Samuti on veebis palju muid tasuta teenuseid, mis aitavad seda ülesannet täita. Minimeerige CSS on kogu CSS-i pakkimisliides, mis muudab protsessi lihtsaks. Sama veebisaidil on ka kohandatud JavaScript-kompressor, mis täidab palju samu ülesandeid, kuid hoiab skripte organiseeritud.

Samuti võite kaaluda oma veebilehtede suurimate piltide kokkusurumist. Seda saab teha mis tahes fototöötlusprogrammiga, näiteks Adobe Photoshop või GIMP, kujutise väiksema eraldusvõimega uuesti valimisega. PNG-pildid ekspordivad keskmiselt palju vähem kui jpg- või TIFF-vormingud. Pakkimisprotsessi hõlbustamiseks on olemas ka palju online-tööriistu, näiteks Image Optimizer.

Allikate kontroll ja mõõdikud

See on rutiin, mida veebiarendajad sageli ei harjutanud ja mis võivad pakkuda suurepäraseid tulemusi. Analüüsides kõiki teie veebilehe elemente, näete, mis võttis kõige pikema koormuse ja millises järjekorras iga tükk laaditi..

Kõige populaarsem tööriist Mozilla Firebug on Firefoxi brauseri pistikprogramm. See rakendus installib teie brauseri allosas väikese tööriistariba, et kontrollida iga veebisaidi reageerimisaega, päise teavet, lehekülje elemente ja skripte. Skript on ka Google Chrome'i laiendina üle kantud Firebug Lite'i.

Apache koos mod_pagespeediga

Kõik seadistused ei käivita Apache veebiserverit, nii et see valik ei ole alati saadaval. See moodul on otseselt seotud Google'i lehe kiiruse monitor mainitud. Mod_pagespeedi kood põhineb algselt Google'i koodide andmebaasidest paljudel teekidel.

Apache võimaldab serveri administraatoritel paigaldada väikeseid pakette, mida nimetatakse mooduliteks, et suurendada nende serverite toimivust. mod_pagespeed on üks neist moodulitest, mis täidab optimeerimismeetodeid automaatselt käivitamise ajal. Loendamiseks on liiga palju protsesse, kuigi mõned peamistest rakendustest hõlmavad HTML-i / CSS / JS-i tihendamist ja pildi vahemälu.

Projekt asub praegu Google'is ja on avatud arendajatele. Google on töötanud koos GoDaddy'ga, et rakendada mod_pagespeedi kõigisse Apache HTTP-serverit haldavatesse hosting kontodesse.

Kuigi paljud teised võimalused on kättesaadavad, on esikülje arendustöö kõige intensiivsem, eriti arvestades oluliste veebilehtede eel-optimeerimist. Saidi päiste ja suurte piltide optimeerimine võib olla äärmiselt tüütu, kuid tasuv ülesanne.

Kaaluge mõningaid käesolevas artiklis toodud meetodeid ja vaadake, kuidas neid veebiprojekte rakendada. Sageli ei võta arendajad piisavalt aega oma töö hindamiseks ja vanade koodide puhastamiseks. Kui soovid veel nõuandeid, peaksite lugema meie ülima veebi optimeerimise juhendi, mis käsitleb esipaneeli hoolduse ja mugavate jõudluse parandamise viiteid.