Všetko na webe by malo byť dokonalé - použiteľnosť aj dizajn a behaviorálne faktory a HTML kód. Dobrá práca s HTML kódom demonštruje vyhľadávacím nástrojom, že vlastníkom zdrojov záleží na kvalite veľmi vážne. Prítomnosť chýb v kóde alebo značkách odpadu na webe vedie k narušeniu fungovania zdroja, spomaleniu rýchlosti načítania stránky a iným problémom. To všetko vedie k nízky level hodnotenie webových stránok vo výsledkoch vyhľadávania. A to znamená, že bude málo návštevníkov a nízke príjmy.

Optimalizácia kódu stránky lokality je dosť starostlivá a starostlivá práca. Našťastie sa táto úloha dá automatizovať a zjednodušiť pomocou špeciálnych pluginov v redakčných systémoch. Dobrí profesionálni tvorcovia webových stránok majú interné funkcie na testovanie stránok mnohými spôsobmi. Vrátane kontroly optimalizácie kódu a jeho čistoty. Čomu by ste mali venovať pozornosť v prvom rade? Optimalizátori už vypracovali kontrolný zoznam, ktorý popisuje úlohu optimalizácie kódu.

Optimalizácia metaznačiek

1. Názov- názov stránky musí obsahovať hlavné kľúčové slovo. Práve tento faktor sa berie do úvahy pri určovaní relevantnosti stránky pre vyhľadávací dopyt. A ak názov nie je odpoveďou na otázku používateľa, je nepravdepodobné, že tento konkrétny zdroj bude vybraný na návštevu. Je dôležité rešpektovať veľkosť titulu. Ak je názov stránky dlhší ako približne 65 znakov, vyhľadávač jednoducho skráti vetu a používateľom sa zobrazí nezmyselný text. Nadpisy a podnadpisy môžu obsahovať ďalšie kľúčové slová na zlepšenie vášho zážitku z vyhľadávania.

2. metaznačka description(popis) používa Google ako úryvok (mimochodom, v nedávnej minulosti google spustil štruktúrované úryvky) - oznámenie stránky na SERP. Yandex vyberie úryvok z ľubovoľného miesta v texte podľa svojich vlastných princípov. Ak sa ukáže, že úryvok nie je uspokojivý, môžete odsek jednoducho upraviť na mieste, kde je.

3. metaznačka kľúčových slov(kľúčové slová) nehrajú osobitnú úlohu. Ale to nebráni tomu, aby boli starostlivo predpísané. V texte počet kľúčových slov dnes nevyžaduje určitý počet. Oveľa dôležitejšia je bohatosť slovnej zásoby a používanie špeciálnej terminológie pri rozvíjaní témy.

4. Text sa naformátuje pomocou kaskádových štýlov a samotný CSS sa zo stránky odstráni do samostatného adresára. To tiež znižuje zaťaženie prehliadača a zlepšuje výkon stránky. Hlavný text by mal byť umiestnený čo najvyššie na stránke a všetky servisné štítky by mali byť odstránené.

5. Okrem vyššie uvedeného je potrebné používať fonty kompatibilné s webom. V opačnom prípade môžu nastať problémy so zobrazovaním textu v prehliadačoch.

Čistenie kódu od odpadu (optimalizácia html kódu)

Prítomnosť nepotrebných, chybných značiek, dokonca aj dvojitých medzier, môže výrazne zvýšiť váhu stránky a spomaliť stránku.

Validácia a štandardizácia

Aby prehliadače mohli s webom primerane pracovať, kód musí spĺňať moderný štandard, ktorý je uvedený v hornej časti HTML reťazec. Nasleduje platnosť kódu. Tento parameter je možné bezplatne skontrolovať na webovej stránke konzorcia vývojárov WWW.

Optimalizácia grafiky

Grafika v dobrej kvalite veľa váži a značne preťažuje zdroj. Všetky obrázky nie sú uložené na stránkach, ale v samostatnom adresári a v komprimovanom stave. V značkách Alt a Description (vyskakovací popis obrázka) je užitočné pridať k názvu súboru kľúčové slová. To zvyšuje viditeľnosť stránky pri vyhľadávaní obrázkov a uľahčuje indexovanie vyhľadávacím robotom.

Optimalizácia skriptu

Podľa moderných štandardov kódovania by sa skripty nemali nachádzať na samotnej webovej stránke, ale podobne ako grafické prvky sa komprimujú a ukladajú do samostatného adresára. Pretože tieto užitočné malé programy majú veľkú váhu.

Odstránenie nefunkčných odkazov

Vyhľadávače majú negatívny postoj k mŕtvym odkazom, ktoré nikam nevedú a pre ktoré neexistuje živá návštevnosť. Všetky nefunkčné odkazy musia byť nájdené a nemilosrdne odstránené zo stránok. Užitočná je aj kontrola kvality darcov. Odkazy z premývania odkazov a nelegálnych projektov značne poškodzujú dôveru stránky.

Sémantické označenie

Vyhľadávače veľmi obľubujú sémantické značky, vďaka ktorým sú webové stránky oveľa bohatšie na informácie. Webmasteri a optimalizátori sú však touto sémantikou tak unesení, že aj tento faktor je takmer v podozrení ako sivá optimalizácia. Vo všetkom by sa malo dodržiavať moderovanie a častejšie navštevovať stránky Google a Yandex. Dozviete sa tam množstvo užitočných informácií o aktuálnych požiadavkách na kvalitu stránok a najmä HTML kódu.

Algoritmy vyhľadávačov sa neustále menia a je dôležité, aby ste sa včas dozvedeli najnovšie správy, aby ste mali čas na prepracovanie stránky skôr, ako spadne pod ďalší filter. A potom je ľahké dostať sa pod toto klzisko, ale dostať sa von je veľmi ťažké.

Článok „Optimalizácia webu“ popisuje všeobecné princípy optimalizácie webu. Nezabudnite si to pozrieť.

Vyhľadávací robot denne zhromažďuje informácie z miliónov stránok. A aj tu môže optimalizátor nájsť ovládacie páky. Vyhľadávače ponúkajú niekoľko odporúčaní na optimalizáciu, ktoré môžu robotovi uľahčiť úlohu. Medzi týmito aktivitami má vedúcu úlohu optimalizácia html kódu.

Aktivity, ktoré sú zamerané na prispôsobenie kódu stránky požiadavkám vyhľadávačov, sú tzv optimalizácia html kódu.

Na začiatok stojí za to pochopiť hlavné úlohy a ciele, ktoré tento typ optimalizácie sleduje. V prvom rade ide o zlepšenie vnútorných charakteristík stránky, čo môže ovplyvniť indexovanie. Ak robot pravidelne navštevuje stránku, analyzuje jej obsah a zároveň nenarazí na prekážky, stránka bude vo výsledkoch vyhľadávania na prioritných pozíciách.

Ďalší bod, keď je kód stránky zložitý, obsahuje chyby, potom robot navštívi takéto projekty ako posledný. Okrem toho, že sa zhoršuje indexovanie, stránka môže mať horšie hodnotenie. Preto na dosiahnutie maximálnych výsledkov poskytuje interná optimalizácia integrovaný prístup k práci na html kóde.

5 dôležitých pravidiel pre optimalizáciu HTML kódu

1. Štylizácia;
2. Odstránenie nepotrebných značiek;
3. Riešenie problémov;
4. Štruktúra kódu;
5. Zatvorenie externých odkazov.

Úprava html kódu

Po rozložení alebo v procese vytvárania stránky sa často stretávate s problémom: tabuľky sú preplnené štýlmi.

Vyzerá to takto:

V tomto prípade je potrebné na vyčistenie kódu preniesť štýly do štýlov – CSS. Tieto tabuľky (presnejšie odkaz na css súbor) sa zvyčajne nachádzajú medzi značkami head. Štýly, ktoré sú v rôznych značkách lokality, sa musia previesť na triedy.

Ak chcete prejsť na šablóny so štýlmi, skopírujte obsah štýlu do CSS a priraďte mu triedu s názvom „newclass“.

Newclass (šírka: 10px; okraj: 10px;)

V dôsledku toho prenos novej triedy z CSS do tabuľky:

Je teda možné výrazne zredukovať kód tým, že sa do rôznych tabuliek pridajú potrebné triedy atď.

Odstraňovanie značiek

Niekedy existujú také stránky, ktoré obsahujú značky skopírované druhýkrát po inštalácii dizajnu.

Najbežnejšie značky, ktoré majú negatívny vplyv na web, sú:

Oprava chýb html

Nemenej dôležité pre hodnotenie stránky sú chyby v kóde. V procese rozloženia, úpravy kódu alebo úpravy štýlov často zabudnete zavrieť tabuľku, značku alebo štýl.

Fragment neuzavretého kódu:

Zatvorenie externých odkazov:

Externé odkazy sú procesom vysokokvalitnej interakcie medzi zdrojmi. Spolu s komentármi používateľov v dôsledku nezákonných akcií alebo inštalácie skriptov tretích strán môžete nevedomky pridávať externé odkazy. Toto je obzvlášť nebezpečné, ak stránka obsahuje škodlivé informácie. najlepšia cesta riešenie problémov - odinštalovať externý odkaz. Ďalšou možnosťou je uzavrieť odkaz do značky „noindex“ a tiež nastaviť parameter „nofollow“. Napríklad:

Štruktúra html kódu

Veľmi efektívnym spôsobom, ktorý vám pomôže rýchlo upravovať rôzne oddelenia stránky súčasne. Táto metóda zahŕňa vytvorenie štruktúry podobnej globálnym blokom. V tomto prípade je kód stránky rozdelený do sekcií: horná, hlavná, bočná (1 alebo viac), spodná. Každú sekciu je možné upravovať nezávisle od ostatných.

Napríklad globálny ľavý blok lokality bude mať názov:

"$GlOBAL_BLEFT$"

preto môže byť tento blok vložený do koreňovej štruktúry kódu a tiež bodovo vymazaný:

"$GLOBAL_BLEFT$"

Viaceré testy ukázali, že v procese optimalizácie týchto komponentov html kódu môžete dosiahnuť stabilný nárast pozícií a výrazne zlepšiť indexovanie stránky.

Článok obsahuje iba základné príklady, najskôr si skontrolujte svoj kód pomocou online analyzátorov, ktorých je na internete veľmi veľa.

Jedným z týchto analyzátorov je validátor W3C, ktorý dokáže jednoducho skontrolovať stránky na chyby HTML, ale nemali by ste ísť príliš hlboko do opravy, stačí to na minimalizáciu chýb. Pre perfekcionistov však túto službu veľmi pomôže.

Počet prečítaní: 5 352

Optimalizácia HTML kódu a kaskádových štýlov (CSS) je potrebná na urýchlenie procesu načítania stránky a obsahu, ktorý je na nej hosťovaný. Úspora času a dopravy sa vo všeobecnosti po dlhom časovom období po optimalizácii ukáže ako významná, aj keď zmena rýchlosti nie je navonok príliš citeľná.

Optimalizácia HTML kódu

Aby HTML kód prispel k rýchlemu načítaniu stránky, musí spĺňať niekoľko podmienok:

• Buďte jednoduchí a informatívni. Po skontrolovaní platnosti musíte opraviť chyby, aby ich roboti ľahšie analyzovali. Kód by mal jasne reprezentovať štruktúru stránky.
• Hlavné zložky stránok, ako sú nadpisy, indexy, bloky informácií, by sa mali ľahko a rýchlo identifikovať.
• Oslobodenie kódu od nepotrebných informácií, ich vloženie do jednotlivé súbory(môžete napríklad vyňať CSS a JS), zvýši to rýchlosť načítania, čo zjednoduší aj prácu robotov.

Po splnení týchto podmienok môže byť stránka rýchlejšia, pohodlnejšia a môže sa zvýšiť efektivita jej indexovania robotmi vyhľadávačov.

Redukcia kódu a optimalizácia CSS

Kód lokality môžete zjednodušiť znížením jeho objemu. Ak to chcete urobiť, musíte vykonať niekoľko operácií.

V prvom rade by ste sa mali vyhnúť flash technológiám, JavaScriptu, rámom, textu reprezentovanému obrázkom. Všetky prvky, ak je to možné, by sa mali vykresliť v samostatných externých súboroch (napríklad CSS a JS, ako je uvedené vyššie). Špeciálne pluginy pomôžu optimalizovať kód. Môžete si napríklad nainštalovať plugin Autoptimize, ktorý automaticky optimalizuje HTML, CSS, JS kód (ak zaškrtnete príslušné políčka). Je potrebné nastaviť kompetentnú a pohodlnú navigáciu na stránke, ktorá bude pre používateľov zrozumiteľná a správne rozpoznaná vyhľadávacími nástrojmi. Zvýši sa tým rýchlosť, kvalita načítavania a indexovanie stránky.

Pokiaľ ide o optimalizáciu CSS, môžete to urobiť sami alebo ju zveriť špeciálnemu zdroju alebo programu. Manuálna optimalizácia je zdĺhavý a zdĺhavý proces, okrem toho vám môžu uniknúť niektoré chyby. Program alebo služba na optimalizáciu lepšie odstráni nedostatky, ale môže narušiť niektoré funkcie, ktoré na stránke fungovali a po kontrole sa obsah nemusí zobrazovať správne, preto je potrebné ich prácu opraviť.

Niekoľko spôsobov, ako manuálne zlepšiť štruktúru CSS:

• Odstráňte nadbytočné medzery a zlomy riadkov, ktoré preťažujú súbor CSS a sťažujú robotom prácu;
• Napíšte zovšeobecňujúce vlastnosti namiesto opakovania podobných príkazov niekoľkokrát;
• V komentároch používajte stručné a zrozumiteľné popisy;
• Napíšte neobvyklé písma pomocou štýlov, nie obrázkov;
• Pre obrázky vytvorte alt a title (iné pre každý obrázok), aby ich obsah rozpoznali roboti vyhľadávacích nástrojov;
• Použiť nástroje H1 na nadpisy – a tak ďalej, aby boli počas indexovania správne rozpoznané;
• Predpísať v kľúčových slovách len tie kľúčové slová, ktoré sú na stránke použité, minimalizovať ich počet;
• Používajte rozmanité a stručné metaznačky.

CSS a HTML optimalizátory

Môžete pohodlne a rýchlo optimalizovať priamo v prehliadači pomocou špeciálnych služieb, napríklad:

• CleanCSS.com;
• CSS Optimizer;
• CSS kompresor
• CYPR.com;
• plugin na automatickú optimalizáciu.

Odborníci na SEO a IT radia používať CleanCSS.com, pretože vám umožňuje zvoliť si úroveň kompresie od nízkej po vysokú, prípadne zvoliť individuálne nastavenia. Po vysokej a najvyššej úrovni optimalizácie sa kód stránky stane takmer nečitateľný a bude takmer nemožné vykonať v ňom zmeny. Preto by ste mali na začiatok použiť štandardnú optimalizáciu. Môžete si zvoliť režimy kompresie pre konkrétny obsah alebo optimalizovať jednotlivé parametre: kompresia fontov, obrázkov, odstránenie medzier.

CY-PR.com má tiež podobný optimalizačný nástroj, ktorý odľahčí štruktúru CSS o 25-30%, ale neexistuje spôsob, ako po operácii vygenerovať súbor kódu.

Zvyšok služieb dokáže radikálne zmeniť kód tak, že niektoré funkcie na stránke prestanú fungovať. Preto je s ich pomocou lepšie vykonávať iba lokálne zmeny v konkrétnych parametroch lokality.

Po optimalizácii by ste mali skontrolovať výkon stránky, správne zobrazenie dizajnu a rýchlosť sťahovania. Normálna je situácia, keď sa stránky a používateľské možnosti stránky načítajú nie dlhšie ako 3-5 sekúnd.

Ak chcete skontrolovať stupeň optimalizácie a pochopiť, ako efektívne sa teraz píše kód HTML, môžete použiť služby, ako napríklad:

• optimalizácia.com;
• Seo kontrolný zoznam portálu;
• doplnok firebug.

Tieto nástroje vám pomôžu skontrolovať, či bolo urobené všetko pre zníženie množstva HTML kódu a zlepšenie jeho štruktúry. Na zdroji kontrolného zoznamu SEO môžete skontrolovať zoznam toho, čo sa už vykonalo pre optimalizáciu a čo ešte nebolo vykonané, a označiť dokončené skutky.

Validácia

Chyby v kóde stránky môžete skontrolovať pomocou služieb kontroly overenia – validátorov. Efektívne overenie kódu sa vykonáva pomocou validator.w3c.org

Ak systém pri prvej kontrole vygeneruje viac ako pol tisíca chýb, nemali by ste byť naštvaní. Po oprave určitej chyby môžete znova spustiť kontrolu a chýb bude oveľa menej, pretože jedna chyba zahŕňa ďalšie, a keď sa opraví, zmiznú.

Stránka s opraveným a optimalizovaným kódom sa pravdepodobnejšie umiestni na popredných miestach vo výsledkoch vyhľadávania ako zdroj s preťaženým kódom HTML, ktorý obsahuje chyby.

Zdravím vás priatelia, z tohto článku sa dozviete, ako vyčistiť HTML kód, ako optimalizovať obrázky, ako správne formátovať a optimalizovať meta tagy, ako zrýchliť stránku, zistíte, prečo potrebujete optimalizovať skripty na stránke.

Jedným z dôležitých opatrení pre internú optimalizáciu webových stránok je optimalizácia kódu stránky. Vďaka tomu môžete zlepšiť celkovú kvalitu zdroja, zvýšiť rýchlosť načítania stránok a zvýšiť efektivitu interaktívnych funkcií.

HTML validácia a štandardizácia

Propagácia vyhľadávacieho nástroja a poskytovanie pozitívnej používateľskej skúsenosti je nevyhnutné, aby stránka fungovala rovnako dobre v akomkoľvek prehliadači, na rôznych operačných systémoch, na mobilných a stolných počítačoch.

Na dosiahnutie spoločného zjednotenia sú všetky stránky vyvíjané na základe štandardných verzií HTML. Najrelevantnejšie sú dnes verzie HTML 4.1 a HTML5. Tá, hoci je stále vo vývoji, už zverejnila na webe obrovské množstvo takýchto stránok.

Všetky najpopulárnejšie prehliadače opera, Google Chrome, Mozilla Firefox v ich najnovšie verzie používať podporu pre nový hyperjazyk HTML5. Dôležitosť používania HTML5 na vytváranie webových stránok je tiež taká mobilné počítače na operačnej sále systémy Android nepodporujú technológiu Flash a používatelia nebudú môcť prezerať video vo formáte SWF.

Stránky založené na HTML5 dokážu prehrávať videá bez potreby sťahovania a inštalácie Adobe Flash hráč. Rozširuje sa trend smerujúci k neblikaniu, takže pre normálna operácia stránky, je vhodné postupne opustiť používanie flash videí a animovaných bannerov tohto formátu.

Skontrolujte platnosť HTML kódu stránky môže byť zadarmo na oficiálnej stránke World Wide Web Consortium, napríklad na tejto

validator.w3.org

Zabudované validátory sa nachádzajú v dobrých tvorcoch webových stránok a systémoch na správu obsahu.

Čistenie HTML kódu

V procese tvorby a následnej úpravy webových stránok programátor narýchlo zanecháva technické poznámky, komentáre na stránkach, zabúda odstraňovať nepotrebné značky. To všetko stránku nielen spomaľuje, ale aj znižuje funkčnosť. Prostredníctvom jednoduchého odstránenie HTML odpadu môžete urýchliť načítanie webových stránok doslova o 35%.

Škodlivý odpad zahŕňa aj nefunkčné, nefunkčné odkazy, ktoré nikam nevedú, pretože príjemca bol vymazaný. Takéto odkazy nie sú medzi vyhľadávačmi veľmi obľúbené. Prítomnosť nefunkčných odkazov môže negatívne ovplyvniť výkon vyhľadávania zdroja.

Keďže nefunkčné odkazy majú tendenciu sa z času na čas objavovať samy, je potrebné ich pravidelne vyhľadávať a odstraňovať. To platí pre externé aj interné odkazy. Ak redakčný systém nemá možnosť vyhľadávať nefunkčné odkazy, môžete využiť bezplatné online služby.

http://creatingonline.com/site_promotion/broken_link_checker.htm

http://anybrowser.com/linkchecker.html

Optimalizácia grafického obsahu

Je dôležité dbať na optimalizáciu grafiky, keďže všetky obrázky musia byť vhodne spracované, aby mohli byť zverejnené na stránkach webu.

• Na publikovanie fotografií je vhodné použiť formát JPEG, keďže tento typ súboru poskytuje najlepšia kvalita s minimálnou hmotnosťou.

• Ak chcete uložiť obrázky, pre ktoré nie je kvalita veľmi dôležitá, môžete si vybrať formát PNG keď hmotnosť súborov nie je väčšia ako 100 alebo 200 kB.

• Všetky grafické súbory podľa moderných štandardov je potrebné, aby boli uložené v komprimovanej forme a v samostatnom adresári na serveri, ale nie vložené do webových stránok.

Po úprave stránky obsahujúcej obrázky musíte skontrolovať rýchlosť sťahovania. Stránka by sa v prehliadači mala objaviť do piatich sekúnd. V opačnom prípade sa miera okamžitých odchodov dramaticky zvýši.

Všetky obrázky a fotografie majú meta tagy, ktoré je potrebné optimalizovať pridaním kľúčových slov, aby sa zlepšilo ich vyhľadávanie na internete. Hlavnou požiadavkou na optimalizáciu metaznačiek obrázkov je jedinečnosť. Všetky obrázky by mali mať rôzne názvy, popisy a alternatívne texty.

Meta tagy webovej stránky

Meta tagy pre rôzne stránky stránka musí byť jedinečná. Keď sa nájdu duplicitné značky, vyhľadávač ich zlepí a niektoré stránky nebudú týmto spôsobom indexované. Experimenty ukázali, že jedinečné metaznačky stránok zlepšujú hodnotenie a návštevnosť približne o 18 %.

Osobitná pozornosť by sa mala venovať optimalizácii značiek Title a Description

1. Názov stránky by nemal obsahovať viac, ako je povolené vyhľadávač počet znakov a obsahujú hlavné kľúčové slovo.
2. Optimálny počet slov pre nadpis je šesť.
3. Popis stránky je koncipovaný ako druh predajného textu pre vstupná stránka a zvyčajne sa skladá z dvoch krátkych viet. Prvá veta obsahuje hlavné kľúčové slovo a druhá obsahuje dodatočné.
4. Metaznačky kľúčových slov nie sú veľmi dôležité, ale mali by tam byť pre každý prípad.

Vo všeobecnosti som napríklad zo samotného motora odstránil časť kódu, ktorá je zodpovedná za meta tagy.

Optimalizácia programových prvkov – skriptov

Princípy optimalizácie skriptov sú rovnaké ako pri grafike – neumiestňovať na stránku, uložiť v komprimovanej podobe do špeciálneho adresára.

Vaša stránka by mala byť čistá, robot navštevujúci vašu stránku by mal vidieť iba čistú stránku, na ktorej bude len článok a potrebné meta tagy. Preto sú potrebné všetky skripty, počítadlá atď. vložte do samostatného súboru.

Optimalizácia obsahu textu

Dobré ráno milí priatelia! Ukázalo sa, že týždeň je vo väčšej miere venovaný optimalizácii a zrýchleniu načítania vstupnej stránky. Dnes budeme pokračovať v „maniakovaní“ v tejto oblasti. Nasleduje optimalizácia css kód A. Poviem vám o online službu na optimalizáciu šablón štýlov.

Tieto služby sú pomerne jednoduché a fungujú na princípe:

“Vložený neoptimalizovaný kód. Čakal pár sekúnd. Skopírovaný optimalizovaný kód“

Ako vidíte, je to celkom jednoduché a lacné, no nie každý si na to nájde čas. Ale márne!

Online optimalizácia css

Prvým krokom je pochopiť, že sa nemusíte ponáhľať do extrémov. Faktom je, že napríklad medzery a zlomy riadkov zvyšujú celkovú váhu stránky. Keď to budete vedieť, môžete ich všetky začať odstraňovať. V dôsledku toho budete mať úplne nečitateľný, ale optimalizovaný css kód.

To je dobré iba vtedy, ak pracujete sami a šablóna so štýlmi sa už nikdy nebude upravovať, alebo takmer nikdy. Keďže ak pracujete v tíme, pre osobu, ktorá číta váš kód, bude veľmi ťažké ho pochopiť.

Ale aj keď sa sami pozriete na svoj štýl za šesť mesiacov, je nepravdepodobné, že budete môcť ľahko pochopiť, čo je v ňom zodpovedné.

Preto optimalizujeme, ale nezbláznime sa – toto je prvé.

Druhým je, že pri používaní služieb, ktoré ponúkajú optimalizáciu css kódu, je dôležité pochopiť, čo sa tam deje a čo sa optimalizuje. Teraz vám ukážem niekoľko príkladov.

Napríklad farby. Zvyčajne ich definujeme v štandarde RGB. Biele pozadie pre prvok je nastavený nasledovne

pozadie: #ffffff;

Nie každý však vie, že ak sa prvé 3 hodnoty opakujú, môžu zostať iba oni. Napríklad takto:

pozadie: #fff; pozadie: #000; farba: #123;

Ďalšia vec, ktorá príde na myseľ, je výplň (výplň a okraj)

Výplň: 10px 20px 10px 20px; /*namiesto*/ padding: 10px 20px; okraj: 15px 20px 15px 20px; /*namiesto*/ okraj: 15px 20px;

Kód css môžete optimalizovať aj skrátením fontov:

Písmo: tučné 18px Verdana, Arial, bezpätkové;

veľkosť písma: 18px; rodina písiem: Verdana, Arial, bezpätkové; font-weight: bold;

Ako vidíte - jeden riadok proti trom. A tak je niekedy možné znížiť hmotnosť šablóny štýlov o 20 - 30%.

Tretia vec na zapamätanie je, že pred akoukoľvek optimalizáciou, či už ide o obrázky alebo css, by ste to mali vždy urobiť zálohovanie(v prípade neočakávanej chyby alebo tak). Urobte si pravidlo, že pred úpravou vždy vytvoríte kópiu.

To je všetko. Poďme do servisu.

Prehľad služby pre online optimalizáciu css kódu.

Väčšina ľudí používa tieto obľúbené stránky na optimalizáciu kódu CSS:

alexvaleev.ru/cssoptimizer

css-school.ru/optimise

Funkčnosť je prakticky rovnaká, jednoduchá a zrozumiteľná. Ale po ich analýze som našiel plusy aj mínusy. Pozrime sa na jeden z nich - css-school.ru/optimiser

Vľavo je okno na vkladanie css kódu a vpravo nastavenie parametrov optimalizácie. Pozrime sa bližšie na okno.

Pomer kompresie.

Aby text zostal čitateľný, je potrebné nastaviť štandardnú úroveň kompresie, v takom prípade sa každá nová vlastnosť zapíše s Nový riadok. Ak nastavíte "vysoké" alebo "maximálne", potom bude veľkosť súboru menšia, ale všetko sa zapíše do jedného riadku. To nie je príliš vhodné pre ďalšie úpravy, ale ak nie sú žiadne, môžete bezpečne nastaviť „maximum“.

Ďalšie okno slúži na nastavenie vlastných optimalizačných šablón, preskočíme ho.

Ďalej nasleduje karta, ktorá vám umožňuje vybrať, či chcete kombinovať selektory s rovnakými vlastnosťami. Všetko závisí od projektu a úloh. Ak ste kód css napísali striktne v určitom poradí a všetko je striktne jedno po druhom, nemali by ste sa rozhodnúť kombinovať selektory. To vám uľahčí orientáciu v kóde.

Optimalizácia štýlu. Odísť - "bezpečné"

O kompresii farieb a vlastností písma som hovoril. Aj keď kompresia vlastností písma je problém. Neoptimalizuje kód, ako som vám povedal vyššie.

Ostatné nastavenia nevyvolávajú otázky. Vo všeobecnosti som si všimol, že všetky služby v ruskom jazyku pre online optimalizácia css kódu, trpia "chorobou". Neoptimalizujú kód css3. Čo ma prinútilo úplne opustiť takéto optimalizátory.

Napríklad som zadal nasledujúci kód:

Špeciálne napísané s medzerami v riadkoch, všetko je podrobné atď. A čakal som, že uvidím niečo takéto:

H1 ( farba: #fff; výplň: 20px 25px; písmo: 700 18px Verdana, Arial, bezpätkové )

Ale bohužiaľ sa to stalo takto:

Sedem riadkov namiesto piatich. Toto mi nevyhovovalo. Chcel som nájsť a povedať vám o lepšom materiáli. Pretože chápem, že niektorí ľudia nie sú oboznámení so skrátenými štýlmi.

A niektorá funkcionalita služieb sa mi zdala nadbytočná, no, alebo pseudofunkčná. S cieľom vytvoriť zdanie „oklamaného“ zdroja. No, prečo potrebujem kliešť pred "redukovať farby". Samozrejme, ak som prišiel optimalizovať svoj kód, potom potrebujem kratší popis všetkého, čo je možné! (Môj názor)

Pokračoval som teda v hľadaní a našiel som práve ten zdroj, ktorý uspokojil moje potreby v oblasti optimalizácie css kódu. Toto je devilo.us

Naozaj úžasná služba, ktorú vám môžem pokojne odporučiť. Funkčnosť je rovnaká ako na predchádzajúcich stránkach. Ale tento to splnil na 100%. Pozri:

Ako vidíte, percento kompresie je 43,3%, zatiaľ čo na predchádzajúcej stránke to bolo 25%. V bajtoch mi to vyšlo 58 > 37. Som taká nuda. Ale keď má súbor css 3000 riadkov, potom táto optimalizácia môže znížiť váhu dokumentu na polovicu.

Samozrejme, časom sa naučíte, ako písať optimalizovaný css kód hneď, a takéto služby budete potrebovať stále menej a menej, ale nezaškodí sa sami skontrolovať. Aspoň pre prítomnosť medzier navyše a zalomení riadkov.

A pre dnešok - všetko. Do skorého videnia.