Poznámka: aktivuje sa adaptívna verzia stránky, ktorá sa automaticky prispôsobí malej veľkosti vášho prehliadača a kvôli čitateľnosti skryje niektoré detaily stránky. Príjemné pozeranie!
Ahoj. Dnes budeme v téme pokračovať optimalizácia rozloženia HTML stránky, ktorý začal v článku o.
Najprv pochopme, prečo je to dôležité, a potom prejdime k praktickým radám.
Správne vytvorená (sadená) šablóna webu:
- Môže výrazne urýchliť načítanie stránky (najmä ak predtým všetko bežalo);
- Vašim stránkam to uľahčí dostať sa na TOP výsledky vyhľadávania (nielen vďaka rýchlemu načítaniu);
- Zvýši vaše šance na plnú kompatibilitu medzi prehliadačmi, to znamená na rovnaké správne zobrazenie stránky vo všetkých prehliadačoch;
- Poskytne malú záruku, že po mnohých rokoch nebudete musieť svoje stránky prerábať pre nové prehliadače (alebo pre nové verzie starých prehliadačov).
Odporúčam prejsť od jednoduchých vecí k zaujímavejším.
Časť 1. Dodržiavajte štandardy HTML a CSS
Pre každý prípad poviem, že okrem HTML a CSS vieme optimalizovať aj JS a PHP časti našich stránok, ktoré sú náročnejšie na zdroje a výrazne spomaľujú rýchlosť načítania stránky. Komponenty JS a PHP však okrem rýchlosti načítavania stránok nijako neovplyvňujú propagáciu stránky (iba ak ju neporušujú), na rozdiel od HTML markupu, teda šablóny stránky.
1.1 Vždy zatvorte značky.
Vrátane tých, ktoré nemusia byť zatvorené, aj keď ste neprajníkom štandardu XHTML, je lepšie sa tohto pravidla držať. Príklad:
- Položka zoznamu
- Položka zoznamu
- Položka zoznamu
Každý štítok li je uzavretý, aj keď sa to nevyžaduje.
1.2 Dodržujte správne vkladanie značiek.
Podľa princípu: prvé otvorené - posledné zatvorené. Príklad nesprávnosti:
Ako správne:
1.3 Nikdy nepopisujte CSS a JS v rámci rozloženia HTML a atribútov značiek.
Nikdy! Inými slovami, zabudnite na existenciu atribút štýlu a štýlová značka:
text
Popíšte všetky štýly v v samostatnom súbore .css
Atribút štýlu môžete použiť iba jeho dynamickým vykreslením pomocou javascriptu pre nejakú akciu. Napríklad, ak kliknutím na obrázok potrebujete zmeniť farbu všetkého textu na stránke, potom iba v tomto prípade môžete dynamicky vytvoriť atribút štýlu s potrebnými hodnotami pre požadovanú značku (v tomto príklade pre telo). prečo? Pretože vyhľadávacie roboty to aj tak neuvidia a nikto (vrátane používateľov) nestiahne extra kód, pretože akcia sa uskutoční po úplnom načítaní stránky.
V takýchto prípadoch by som však stále odporúčal pridať preddefinovanú triedu CSS k požadovanému tagu, a nie pridať k nemu atribút štýlu. To je aspoň pohodlnejšie pre neskoršie úpravy.
To isté platí pre JS, všetok kód JS musí byť in samostatný súbor, nie v rámci vášho rozloženia alebo v horšom prípade medzi atribútmi značky.
1.4 Zabudnite na Caps Lock a veľké písmená.
Všetky značky, atribúty a ich význam píšte malými (malými) písmenami, to isté platí pre šablóny so štýlmi CSS.
Takmer všetko popísané vyššie je v oficiálnej špecifikácii HTML a CSS a vzťahuje sa na platnosť dokladu.
Musím teda podotknúť, že dodržiavaním štandardov W3C, teda dodržiavaním platnosti dokumentu, získate nasledujúce SEO výhody:
- Čistý kód a následne dodatočná dôvera vyhľadávacích nástrojov k vašej stránke;
- Rýchlejšie načítanie stránky, pretože prehliadač nemusí strácať čas ladením neplatného dokumentu.
Nemali by ste sa však pozastavovať nad platnosťou, mali by ste sa ju snažiť čo najviac dodržiavať, no nie na úkor všetkého ostatného (čas, funkčnosť a pod.).
Časť 2. Urýchlenie načítania stránky - jeden z faktorov hodnotenia
2.1 Uveďte skutočné rozmery obrázkov.
Ide o dve veci:
- Nezabudnite uviesť atribúty šírka a výška pre značku img:
Zrýchli to načítanie obrázkov, pretože prehliadač bude vopred vedieť, akú veľkosť má zobraziť. - Nezabudnite vložiť obrázok rovnakej veľkosti, akú ste zadali v atribútoch.
Ak je obrázok väčší, ako potrebujete, nemusíte šetriť čas tým, že ho možno zmenšiť pomocou HTML alebo CSS. Nájdite si čas, prejdite do Photoshopu alebo jeho analógov a zmenšite obrázok na veľkosť, ktorú chcete vidieť na stránke, môže to výrazne urýchliť načítanie stránok.
2.2 Použite CSS3 namiesto JS.
JS môže výrazne spomaliť načítavanie vašich stránok, ako aj pokračovať vo vytváraní záťaže po načítaní stránky (rôzne efekty, ako napríklad plíživé čiary a iné dynamické veci), čo môže spomaliť prehliadač, kým je karta so stránkou otvorené.
Dnes sa dá veľa krásnych a zaujímavých efektov dosiahnuť len pomocou vlastností CSS3 (napr. prechod, box-shadow, border-radius, opacity, transform, background-size) a šikovných.
Všetko vyššie uvedené možno zhrnúť do jednej vety: kdekoľvek môžete (podozrenie ako) nahradiť JS CSS3, bez váhania používajte CSS3! Ak chcete nájsť takéto úryvky, odporúčam vám preskúmať nové funkcie CSS3.
2.3 Menej Photoshopu – viac CSS 3.
Týmto heslom sa mnohí webmasteri riadia už dlho. Môžete vytvárať nádherné tlačidlá a dizajnové prvky s hladkými prechodmi, vyhlazenými rohmi, vrhnutými tieňmi (vnútornými a vonkajšími) a krásnym textom navrchu iba pomocou CSS. Kdekoľvek môžete nahradiť prvky grafického dizajnu kódom CSS – urobte to! Príklad:
Alebo moje tlačidlo Odoberať! na konci každého článku. Mimochodom, nezabudnite sa prihlásiť na odber upozornení na nové užitočné články, žiadny spam alebo reklama.
Okrem vlastností CSS3 uvedených vyššie máte k dispozícii aj formát popisu farieb RGBA.
Na vytvorenie prechodov CSS pre rôzne prehliadače môžete použiť bezplatné služby, ako je táto na colorzilla.com.
2.4 Kombinujte obrázky do CSS sprite.
Tie obrázky, ktoré sa nám nepodarilo nakresliť pomocou CSS 3, musíme spojiť do jedného (ideálne). Je to potrebné na zníženie počtu požiadaviek na server pri načítavaní stránky. Táto položka môže výrazne znížiť zaťaženie vášho web servera a zároveň urýchliť načítanie stránok, 2 muchy jednou ranou!
Ak chcete získať lepšiu predstavu o tom, o čo ide, stačí sa pozrieť na môj CSS sprite:
Nie je to zlé, však? Pre všetky prvky existuje jeden obrázok na pozadí, ktorý len presunieme a nahradíme potrebnú časť obrázku na pozadí určitého prvku vďaka vlastnosti background-position, napríklad takto:
# subs, # left, .mail, .rss, .vk (background: url (/images/1.png) no-repeat) #subs (background-position: -28px -120px;) #left (background-position: -35px -20px;) .mail (pozícia-na pozadí: -43px -50px;) .rss (pozícia-na pozadí: -12px -8px;) .vk (pozícia-na pozadí: -34px -56px;)
Najlepšie by bolo zostaviť sprite ručne pomocou Photoshopu, no môže sa vám to zdať ako dosť komplikovaná úloha, takže môžete využiť bezplatné služby, ktoré spravia všetko za vás, dokonca aj napíšu CSS kód za vás. Moja obľúbená služba je SpriteMe. Nebudem sa však unavovať opakovaním: vždy je lepšie robiť všetko ručne, najmä takto môže byť sprite oveľa kompaktnejší (vo veľkosti, a teda aj hmotnosti), a preto efektívnejší.
2.5 Umiestnite súbory JS správne.
Všetky súbory JS pripojené vašou stránkou by mali byť v kóde umiestnené čo najnižšie, nemusíte ich vkladať do „hlavy“ webu (medzi tagy head) – výrazne to spomaľuje načítavanie stránky. Najlepšou možnosťou by bolo zahrnúť súbory JS pred uzatváraciu značku tela, to znamená, že úplne dole na stránke nie je nikde pod ňou.
A ešte jedna veľmi užitočná rada: v ideálnom prípade by sa všetky vaše JS súbory mali spojiť do jedného jediného, teda vystrihnúť (Ctrl + X) kód zo všetkých súborov a skopírovať ho do jedného, aby ste nakoniec mali jeden nižšie , pred koncovou značkou tela jeden súbor:
...