Kas sa teadsid 40% inimestest Kas lahkute veebilehelt, kui selle laadimiseks kulub rohkem kui kolm sekundit? Kuna tundlik veebidisain on populaarseks saanud, on internetikasutajad oodanud erakordset jõudlust. Nad tahavad, et saidid oleksid ideaalselt kohandatud kasutatava seadme järgi, nad soovivad hõlpsat navigeerimist ja intuitiivset kujundust ning lehe laadimiskiirust alla sekundi. See on kõrge latt, mida lüüa, kuid õigete optimeerimiste korral saab iga disainer oma mobiililiidestele anda kiire lehekiiruse.
Olen hiljuti veebi skanninud ja otsinud kõiki viimaseid näpunäiteid veebisaidi kiiruse optimeerimiseks erinevatel platvormidel. Siin on minu täielik loetelu lehekiiruse häkkimistest:
1. Muutke piltide suurust
Vajalikust suuremad pildid võivad teie saiti aeglustada. Selle asemel, et lihtsalt täissuuruses pilte üles laadida ja lasta oma veebisaidil need õige suurusega kokku tõmmata, alustage õigete mõõtmetega. Lihtne tarkvara nagu Squashi pildi tihendamine saab kasutada piltide suuruse muutmiseks teie lehe täpseteks mõõtmeteks ja nende faili suuruse vähendamiseks sekunditega.
2. Piirab funktsionaalsust
Piirava laadimise lubamine oma mobiilisaidile takistab töölaua saitide osade laadimist, mida ei saa mobiilseadmes tõhusalt kasutada. See võib muuta kasutuskogemuse paremaks, aidates samal ajal teie lehti palju kiiremini laadida. Seetõttu kaaluge oma saidi mobiilseadmete jaoks optimeerimisel funktsioone, mille saate oma veebisaidil keelata. Kõrval olevad ribad, reklaamid jne saab kõik keelata. Mobiilseadmete puhul keskenduge kõige olulisemale funktsionaalsusele.
3. Vähendage sisu
Sageli on hea mõte määrata tulemuseelarve. Kui uue pildi, video või pistikprogrammi lisamine ületab teie toimivuse eelarve, otsige muud sisu, mida saab eemaldada või optimeerida, et teie lehed saaksid hoida maksimaalset laadimiskiirust.
4. Piirake HTTP-päringuid
Selle saavutamiseks on palju võimalusi, kuid vale lähenemine võib kahjustada teie saidi kvaliteeti. Nipp on vähendada HTTP-päringuid üle parda minemata. Saate teha muudatusi, näiteks kasutada CSS-spritte andmete URI-de asemel ja hoida CSS-i stiililehte iga lehe ülaosas. Peate lubama ka vahemällu salvestamise, kuid hiljem.
5. Valige tundlik kujundus
Reageerivad kujundused Need on midagi, mida teie saidi külastajad peavad enesestmõistetavaks. Need võimaldavad teie sisu kohandada nii, et see sobiks külastaja kasutatava ekraanisuurusega, ja optimeerivad erinevate seadmete kujundust. Tundliku kujundusemalli kasutamine aitab tagada puhtama koodi ja parema laadimiskiiruse kui see, kui proovite muuta [disain] tööd (https://www.toptal.com/designers/ui) erinevatel platvormidel sobimatuks.
6. Kasutage suurepärast CDN-i
Teie sisu edastusvõrk (CDN) on teie veebisaidi keskmes. See peab olema kiire ja usaldusväärne. Veenduge, et teie CDN täidaks lubadusi.
7. Vähendage serveri reageerimisaega
Teie eesmärk peaks olema saada serveri reageerimisaeg vähem kui 200 millisekundiga. Kõik muud selles loendis olevad näpunäited peaksid aitama teil seda numbrit vähendada. Võite jälgida oma reageerimisaega ja otsida võimalikke probleeme, kasutades suvalist arvu tasuta vastuste kontrollimise tööriistu, mis kõik leiate lihtsa Google'i otsingu abil.
8. Pakkige kõik kokku
Veebilehtede tihendamine on nagu nende kokkutõmbamine ZIP-failiks. Tihendamine võimaldab teil vähendada oma lehtede ribalaiust, mis vähendab HTTP-päringute arvu. Lihtsaim viis seda teha on tööriist nimega Gzip .
9. Lubage brauseri vahemällu salvestamine
Vahemällu salvestamine on teie saidi külastajate viis teie saiti oma seadmetes 'meelde jätta'. Esimest korda külastades peavad nad teie saidi vaatamiseks alla laadima kuni 30 komponenti. Kui vahemälu on lubatud, langeb see arv järgmistel külastustel mõnele komponendile, parandades dramaatiliselt lehe laadimise kiirust.
10. Visuaalsed parendused
See ei tähenda kiiremat lehe laadimise kiirust, kuid jätab mulje, et küll. Facebook ja Medium teevad sellega head tööd, luues spin-laadurite kuvamise asemel visuaalse kohahoidja sisu (mida võiks negatiivselt tajuda).
Keskmine teeb seda piltidega.
Facebook laadib üleslaadimiste kuvamise asemel üles võltsitud kohahoidja sisu.
11. Korrastage oma ressursse
Kõik koodid, mis ei lisa teie veebisaidile midagi sisukat, tuleks eemaldada. Lisakood tähendab lisaaega saidi laadimiseks. HTML-koodi minimeerimiseks kasutage Google PageSpeed Insights API laiendus . CSS-i minimeerimiseks kasutage YUI kompressor või [cssmin.js] (http://www.phpied.com/cssmin-js/). JavaScripti kasutamise minimeerimiseks kasutage Sulgemise koostaja , JSMin või YUI kompressor .
12. Määrake oma piltidele sobiv formaat
Lisaks sellele, et pildid oleksid õiges suuruses, peate ka veenduma, et need on õiges vormingus. Parimad on JPEG-failid, PNG-d on aktsepteeritavad ja GIF-faile tuleks kasutada ainult väikeste, lihtsate graafikute jaoks, ideaaljuhul vähem kui 10x10 pikslit.
13. Kodeerige pildid asjakohaselt
Teie koodi jaoks peaks piltide HTML välja nägema , faili nimi jutumärkides. Kui teie pildid pole õigesti kodeeritud, peab teie sait õigete piltide leidmiseks rohkem tööd tegema, aeglustades teie lehekiirust.
14. Kasutage välist CSS-i
Teie CSS sisaldab teie saidi stiilinõudeid. See võib sisalduda välises failis või veebis. Inline CSS lisatakse teie HTML-koodi igal lehel, mis võib põhjustada tõsiseid viivitusi. Välise CSS-i kasutamine lihtsustab teie koodi oluliselt.
15. Pange sisu esikohale klappide kohal (klappide kohal)
Seda sihtlehe osa, mida külastajad kerimata näevad, nimetatakse vanaks sisuks. See on vana ajalehemõiste, kuid see sobib hästi ka veebisaidile kujundus . Saidi sisu eelistamine laadimise asemel, et see laaditaks kiiremini, aitab teie saidi külastajaid kauem hoida. Üks viis seda teha on jagada oma CSS kaheks osaks, sisemine osa ülaltoodud sisu jaoks ja välimine osa kõigeks muuks.
16. Kustutage pistikprogrammid
Liiga paljude pistikprogrammide kasutamine võib aeglustada serveri kiirust ja tekitada tarbetuid turbeprobleeme. Vabanege pistikprogrammidest, mida te ei kasuta, ja proovige pluginad ükshaaval keelata, et näha, kas mõni konkreetne pistikprogramm põhjustab laadimiskiirusega suuri probleeme.
17. Vähendage ümbersuunamisi
Kui teie sait tugineb ümbersuunamistele, et juhtida kasutajaid teie põhisaidilt mobiilisaidile, võite oma veebisaidi kiirust aeglustada. Saate kasutada HTTP-ümbersuunamist, mis aitab vähendada vahepealseid ümbersuunamisi oma põhisaidilt mobiilisaidile. Samuti saate lisada märgistuse oma töölaua lehtedele, et Google'i robotid teie mobiililehti avastaksid.
18. Väldi hüpikaknaid
Hüpikaknad on endiselt populaarne asi ja ma arvan, et need töötavad, kuna paljud saidid kasutavad neid endiselt. Saate neid endiselt oma veebisaidile kinnistada, kuid mobiilseadmete saitidel nad lihtsalt ei tööta nii hästi. Kas olete kunagi hüpikakna peale sattunud, lugedes mobiilseadmes artiklit? Kui see juhtus sinuga, siis ilmselt tead, mida ma mõtlen.
Mis on alternatiiv? Kasutage oma ajaveebi või lehe allosas olevat konversioonikasti, nagu näiteks ajaveeb Neil Patel :
19. Vabane hüplevatest DOM-elementidest
DOM tähistab dokumendi objektimudelit. See viitab teie saidi esitamise viisile erinevates seadmetes. Mobiilseadmetes on mõned töölaua avalehel kuvatud üksused peidetud, kuid mobiilibrauser võtab nende üksuste peitmiseks siiski aega ja energiat. Nendest varjatud elementidest vabanemine aitab igal platvormil lehte laadida.
Lehekülgede kiiruse tähtsus
Kui te pole kunagi oma lehekiirusele palju tähelepanu pööranud, on aeg maha istuda ja teadmiseks võtta. Kogu teie sisule ja kujundusele pühendatud aeg ja energia ei tähenda midagi, kui teie saidi laadimine võtab liiga kaua aega.
Tegelikult, Aberdeeni grupp leidis, et vaid ühe sekundi viivitus lehe laadimisaegades toob 11% vähem lehevaatamisi (mille tulemuseks on suurem tagasipõrkemäär), 16% vähem klientide rahulolu ja 7% vähem klientide konversioone. Kui teie saidi laadimiseks kulub kolm või enam sekundit, süvenevad teie kahjud oluliselt.
Kui see loetelu tundub ülekaalukas või on natuke rohkem kui teie tehnilised oskused, võib see kõigepealt aidata Google'i soovitused ja tööriistad . Siit saate põhiteavet ja tasuta ressursse oma lehe kiiruse testimiseks. Google ütleb teile täpselt, milliste probleemidega teie sait tegeleb, et saaksite oma saidi optimeerimisele keskenduda.
Enne Google'i suundumist lisage see loend lihtsalt järjehoidjatesse, et saaksite leida lihtsaid lahendusi igale kohandatud lehekiiruse probleemile.
veebifondid vs trükifondid
