Structura
<!DOCTYPE>
<html>
<head>
<meta/>
<title/>
<link/>
<style/>
</head>
<body>
<div id="page-content">
<header/>
<main/>
<footer/>
</div>
<script/>
</body>
</html>
Prezența tuturor blocurilor mentionate este obligatorie.
<!DOCTYPE>
Declarația în cauză trebuie să fie prima declarație din pagină, ea nu este o declarație de tip tag html.
Întotdeauna trebuie să fie prezentă în pagină, și se utilizează la declararea tipului de conținut html care urmează în pagină.
Declarația trebuie să fie <!DOCTYPE html> - ceea ce îi indică browserului că urmează conținut de tip html5.
<html>
Parametri optionali:
lang
- primeste valori conform standardului ISO 639-1.
- exemplu <html lang="ro">
- indică limba în care e scris conținutul
- se utilizează de către motoarele de căutare pentru indexarea corectă a conținutului paginii.
- daca pagina este predestinata pentru a fi indexata de catre motoarele de cautare parametrul este obligatoriu.
<meta/>
Acest bloc poate conține mai multe declarații.
<meta name="viewport" content="width=device-width, initial-scale=1">
Această declarație este obligatorie și se utilizează pentru compatibilitatea cu dispozitivele mobile. Reguli de utilizare.
<meta name="robots" content="index, follow">
Această declarație e obligatorie și se utilizează de către motoarele de căutare. Reguli de utilizare.
<meta name="description" content="aici se indica descrierea">
Această declarație e obligatorie și se utilizează de către motoarele de căutare la afișarea rezultatelor ca descriere a paginii. Maxim 160 caractere.Reguli de utilizare.
Declaratii meta pentru optimizarea experienței de interacțiune cu rețelele sociale
În cazul în care se dorește implementarea cu rețeaua de socializare în cauză, toate declarațiile de tip
de mai jos sunt obligatorii. Ele vor defini conținutul care este utilizat la afișarea paginii în Facebook.
<meta property="og:url" content="https://domeniu.md/pagina.html" />
Descriere: Adresa URL (canonical url) a paginii în cauză.
Mențiuni: Adresa URL NU trebuie să conțină parametri de sesiune, de contorizare, de identificare a utilizatorilor și/sau a anumitor elemente sau stări ale paginii. În cazul utilizării unui subdomeniu dedicat pentru dispozitivele mobile, adresa URL trebuie să indice adresa URL a paginii Desktop.
<meta property="og:title" content="Titlul Paginii" />
Descriere: Titlul paginii fără indicarea numelui site-ului, organizației, sau a sloganelor.
<meta property="og:description" content="Descrirea Paginii" />
Descriere: Descrierea concisă a paginii în cel mult 3 propoziții.
<meta property="og:image" content="https://domeniu.md/adresa.jpg" />
Descriere: Imaginea reprezentativă a paginii, care va apărea la acțiunea de share.
Mențiuni: Imaginile care sunt mai mari de 600px x 315px, vor fi afișate ca imagini mari în rețeaua de socializare. Se recomandă imagini mai mari de 1200px x 630px cu capacitatea nu mai mare de 8MB
În cazul în care se dorește implementarea cu rețeaua de socializare în cauză, toate declarațiile de tip
de mai jos sunt obligatorii. Ele vor defini conținutul care este utilizat la afișarea paginii în Twitter.
<meta name="twitter:card" content="summary" />
Descriere: Tipul cardului pe twitter.
<meta name="twitter:description" content="descriere" />
Descriere: Descrierea concisă a paginii.
Mențiuni: Maxim 200 caractere
<meta name="twitter:title" content="Titlul Paginii" />
Descriere: Titlul paginii fără indicarea numelui site-ului, organizației, sau a sloganelor.
Mențiuni: Maxim 70 caractere
<meta name="twitter:image" content="https://domeniu.md/adresa.jpg" />
Descriere: Imaginea reprezentativă a paginii, care va apărea la acțiunea de share.
Mențiuni: Fișier nu mai mare de 1MB
<title/>
Acest bloc este obligatoriu.
Descriere: Definește titlul paginii în bara de titlu a browser-elor, în motoarele de căutare etc.
<link/>
Acest bloc poate conține mai multe declarații.
<link rel="stylesheet" href="http://domeniu.md/fisier.css" />
Descriere: Încărcarea fișierelor/declarațiilor CSS.
<link rel="canonical" href="http://domeniu.md/pagina.html" />
Descriere: Adresa URL (canonical url) a paginii în cauză. Se utilizează de către motoarele de căutare.
Mențiuni: Adresa URL NU trebuie să conțină parametri de sesiune, de contorizare, de identificare a utilizatorilor și/sau a anumitor elemente sau stări ale paginii. În cazul în care pagina e accesibilă la mai multe adrese url, în toate paginile de la adresele url corespondente va fi indicat un singur canonical url.
<link rel="dns-prefetch" href="//maxcdn.com" />
Această declarație nu e obligatorie
Descriere: Se utilizează pentru a face resolve la domeniile care vor fi utilizate în paginile accesate ulterior, pentru a micșora timpul de încărcare a paginilor ulterioare. Reguli de utilizare.
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
Această declarație nu e obligatorie
Descriere: Se utilizează pentru a indica o pictogramă pentru afișarea în bara de titlu a browser-elor sau/și dispozitivelor mobile a paginii. Reguli de utilizare.
<header/>
În acest bloc se plasează tot ce se află în antetul paginii.
Antetul constă din 2 bare de navigare. care includ meniuri de navigare.
Acest bloc este obligatoriu.
Atribute suplimentare ale elementelor HTML
data-bg="url"
Exemplu: <div data-bg="https://domain.com/image.jpg"></div>
Descriere: imaginea indicata ca valoare a parametrului va servi ca fundal (background-image) a elementului si il va acoperi in totalitate (background-size:cover)
data-toggle="tooltip"
Exemplu: <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Informatie sus">Informatie sus</button>>
Descriere: Textul indicat ca valoare parametrului va fi afișată la acțiunea de mouse over pe element.
data-toggle="popover"
Exemplu: <button type="button" class="btn btn-default" data-toggle="popover" title="Titlul" data-content="Lorem Ipsum dolore sit amet !!!">Click to toggle popover</button>
Descriere: Textul indicat ca valoare parametrului va fi afișată la acțiunea de click pe element
Performanță
HTML
În codul HTML, declarațiile CSS trebuie să fie amplasate ca ordine înaintea declarațiilor JS.
Pentru a asigura caching-ul conținutului static, evitați utilizarea parametrilor URL (prin "?").
Proxy serverele mai vechi nu fac caching la resursele ce conțin "?".
Reduceți la minim numărul de elemente în DOM utilizate, unde e posibil.
Evitați încărcarea resurselor care se redirecționează (30x) sau nu există (404).
Cu cât mai mare este numărul domeniilor/subdomeniilor din care are loc încărcarea resurselor în pagină, cu atât timpul de încărcare a paginii va fi mai mare, datorită cererilor DNS.
CSS
Blocurile <style> și <link> trebuie să fie amplasate în <head>.
Evitați utilizarea CSS @import.
Codul CSS trebuie minificat - să nu conțină comentarii și caractere de tip white-space.
CSS-ul poate fi minificat la adresa: https://cssminifier.com/
Codul CSS de dimensiuni mici nu trebuie amplasat în fișiere separate ci direct în pagină, <style>.
Evitați utilizarea stilurilor inline pentru elementele din pagină.
Evitați încărcarea multiplă a aceluiași fișier în aceeași pagină.
Evitați AlphaImageLoader, utilizarea acestuia sporește considerabil durata încărcării paginilor în care se utilizează.
JS(JavaScript)
Blocurile <script> trebuie să fie amplasate înaintea închiderii tagului <body>.
Scripturile de dimensiuni mici nu trebuie amplasate în fișiere separate ci direct în pagină, inline.
Fișierele JS trebuie minificate - să nu conțină comentarii și caractere de tip white-space. JS-ul poate fi minificat la adresa: https://jscompress.com/
Evitați încărcarea multiplă a aceluiași fișier în aceeași pagină.
Garnituri de text
Fișierele de tip font nu trebuie să fie incluse în cod ca accesate din Google Fonts, deoarece fișierele din Google Fonts astfel accesate nu se stochează în memoria cache a browser-ului.
Fișierele de tip font trebuie descărcate și deservite dintr-o resursă care permite browser-ului să facă cache.
Imagini
Imaginile <img> trebuie întotdeaună să conțină atributele width și height, pentru a preveni redimensionarea imaginilor/conținutului în timpul încărcării paginii.
Imaginile trebuie optimizate (fără pierdere de calitate) pentru a micșora la maxim mărimea lor.
Standalone:
- PNG - OptiPNG
- JPG - jpegoptim
Online:
Mărimea imaginilor nu trebuie să fie mai mare decât ele apar în conținut.
Fișierul favicon-ul trebuie să fie mic ca mărime de stocare și cacheable.
Unde e posibil utilizați CSS în loc de imagini.
HTTP Server
Toate fișierele statice (img/css/ttf/woff/jpeg/png/js) trebuie să fie hostate pe subdomenii care nu utilizează cookie.
Toate fișierele statice (img/css/ttf/woff/jpeg/png/js) trebuie să returneze în HTTP header Last-modified sau ETag.
Aceasta permite browser-elor/proxy serverelor să profite la maxim de posibilitățile încorporate de caching și micșorează esențial traficul către serverul web.
Pentru compatibilitatea cu IE9, evitați indicarea tagului meta charset. Charset-ul trebuie să fie indicat în HTTP header.
Pentru compatibilitatea cu proxy serverele care sunt configurate incorect, și pot oferi conținut compresat clienților care nu pot citi conținutul compresat, specificați HTTP header Vary: Accept-Encoding, care permite proxy-serverelor să păstreze paginile compresate și necompresate.
Activați opțiunea Keep-Alive, aceasta va permite conexiunilor HTTP să fie persistente ceea ce va micșora latența cererilor ulterioare.
Dacă e posibil utilizați HTTP/2.
Adăugați HTTP header Expires, pentru a indica browserului dacă poate sau nu să fie utilizat conținutul din cache.
Utilizați compresia gzip la nivel de server HTTP.
În cazul în care e posibil și oportun marcați răspunsurile la cererile AJAX cacheable.
Integrare Rețele Sociale
Paginile care pot fi distribuite pe rețelele sociale trebuie să conțină tag-uri <meta> OpenGraph: og:title, og:site_name, og:description, og:url, og:image
Optimizare Mobil / Touch Screen
Mărimea suprafeței de contact a degetului unui adult cu ecranul tactil este de 10mmx10mm, Recomandările pentru dezvoltatorii Android indică 7mm. Ca rezultat, pentru a crea un element utilizabil pentru dispozitivele touchscreen, el nu trebuie să fie mai mic de 48px.
Elementele din pagină care sunt mai mici de 48px și sunt funcționale (link-uri, text, iconițe) pe dispozitivele touch-screen trebuie să nu fie amplasate mai aproape de 32px unul de celelălt atât vertical cât și orizontal.
Mărimea garniturii de text trebuie să nu fie mai mică de 12px, se recomandă utilizarea mărimii 16px.