Структуриране на <head>
Формати:
Как правилно да структурираме <head> частта на страниците в нашия сайт? Защо подредбата на елементите в <head> влияе на скоростта на зареждане? Кои са добрите практики и какво трябва да избягваме? Отговорите в следващото видео.
Транскрипция
Здравейте, аз съм Васил Тошков от Cloxy, а темата днес е как да си структурираме <head> частта на документа (така да го наречем главата на всяка една страница в нашия сайт). Причината за това видео е, че виждам страшно много документи, които са структурирани... <head>-ът им е пълна каша, никакъв ред.
По HTML протоколът чисто документално погледнато наистина няма никакво значение редът на таговете, но имат много голямо значение за скоростта на сайта. За това ще обърна внимание как трябва да бъдат подредени, така че да постигнем максимално бързо зареждане на нашата страница / всяка една страница от нашия сайт.
Първото нещо в <head> частта трябва да е encoding-ът на документа т.е като encoding препоръчвам utf-8. Препоръчвам да се прави чрез новия начин на HTML5 т.е само чрез charset атрибут. Това нещо трябва да е първо. Най-голямата грешка при структурирането на <head> е, че се слага заглавието (title) първи, останало е от едно време така като много примери.
Но ако сложим заглавието първо в <head>, в заглавието може да има знаци, които са не латински, примерно на кирилица. Ако не знаем какъв е encoding-ът, а всички браузъри по подразбиране ще третират документа с американска кодировка, така да го наречем.
Какво ще се получи? Заглавието ще е на "маймуница" с непознати знаци, когато стигне до него парсерът ще види, че след това има дефинирана кодировка и ще презареди цялата страница отново. Ако тези 2 неща (charset и title) просто ги размените, сайтът ще стане 2 пъти по-бавен. Един бърз начин да си забавите сайтът двойно. Така че виждате още първото нещо колко голямо значение има. Така че първото нещо е кодировката на знаците.
Второто нещо, което трябва да опишем, което отново по-стандарт е първо, но няма как да стане "по-първо" от кодировката, това е <base> таг. Ако го използваме, трябва да го сложим отново възможно най-бързо в началото на <head>. <base> тагът - това е ако ще използваме релативни адреси с друга основа. Сега няма да навлизаме в подробности.
В повечето случаи за щастие не се налага това нещо да се използва, така че този таг го няма. Но ако ви се наложи да го има - втори, кодировката е по-важна. <base> тагът се слага колкото се може по в началото, тъй като в title-ът може да има микродата, която да съдържа адреси, мета информацията може да съдържа адреси, линковете, скриптовете... Всички тези неща могат да съдържат адреси, които да зависят от <base> тага. Така че и той трябва да е колкото се може по-напред, ако го имаме.
И чак след това идва ред на най-силното нещо в SEO т.е заглавието. Мисля, че там е ясно. След заглавието следват meta тагове. Независимо дали ще е meta таг за описание, за robots... Изписваме абсолютно всички meta тагове в една група на нашия сайт.
След meta таговете следват link таговете. Най-добре е първо да сложим canonical-ът, той се слага чрез link таг. След това да сложим CSS-ът, хубаво е да е само един CSS, всички стилове да са събрани в него. И след това, ако имаме примерно favicon и такива неща на нашия сайт ги слагаме отново чрез link таг. Това е групата на link таговете. Когато свършим с тях, няма как да е само един те са няколко, следват скриптовете.
Скриптовете като най-бавно нещо ги слагаме естествено най-накрая. Има един много голям мит и той е, че трябва да се слагат в края на документа, в края на <body>-то. Това е грешно и отново ще забави зареждането на вашия сайт. Правилното нещо е скриптовете да се слагат в <head> частта на документа и да са асинхронни, за да могат паралелно да започнат да се зареждат с останали неща от сайта, но да не бавят / блокират зареждането на страницата.
Скриптовете е добре да са колкото се може по-малко, всичко да е обединено, ако може в един файл. Няма как да са автоматично асинхронни, трябва самите скриптове да са програмирани, за да могат да работят асинхронно, т.е да няма document.write и такива други неща, които биха блокирали зареждането.
И това е общо взето, когато става въпрос за <head> частта на документа. Това е редът, който трябва да се спазва и се е приел като своеобразен стандарт.
Накрая нещо друго важно. Тъй като нещата в <head> са изключително важни за зареждането на една страница, хубаво е когато те бъдат изписани буферът по най-бързият начин да се праща към браузърът на клиента.
Това нещо можем да го направим примерно в PHP чрез flush() функцията. В Интернет всичко се предава на пакети. Целият <head> да бъде отделен в един самостоятелен пакет, който пръв да се изпрати на клиентът. Тъй като, когато това нещо го получи браузърът на клиентът той ще може да зарежда оттук разни иконки, стилове, скриптове и всякакви такива неща асинхронно. По този начин много по-бързо ще се зарежда самата страница.
Както виждате редът на тези неща има много голямо значение. За съжаление популярните CMS-и просто със скрипт на сървърно ниво някъде се изписват тези неща и няма никакво значение редът им, което създава много големи проблеми. Особено пък в една друга много известна система, където тези 2 неща (charset и title) са разменени и всичко се зарежда по 2 пъти.
Имайте ги това нещо предвид. Не е толкова сложно просто да си подредите нещата в ред. Това е за днес, до следващият път. Чао.