Selectați cel mai bun serviciu de compresie CSS online. Selectați cele mai bune servicii de compresie CSS online Optimizatorii de cod HTML gratuit
Optimizarea tehnică este setarea corectă a site-ului pentru cea mai mare interacțiune posibilă cu motoarele de căutare. Trebuie să se facă imediat după instalarea motorului și în timp ce lucrați cu umplutura primară a conținutului site-ului. Acum vă voi spune cât de importante ar trebui să se acorde aspecte de optimizare și să faceți mai întâi.
Conținutul articolului:
Structura site-ului organizației corespunzătoare
Orice site trebuie să aibă cea mai convenabilă structură. Ca și oamenii, motoarele de căutare privesc site-ul și evaluează confortul de utilizare. Orice resursă de Internet trebuie să aibă cuibărit nu mai mult de trei pagini. Adică, cu cea principală, maximum trei clicuri, utilizatorul ar trebui să ajungă la orice pagină.
Cea mai potrivită și simplă structură pentru site-ul informației va fi:
Categoriile definesc secțiunile. Dacă site-ul despre diferite boli, atunci categoriile pot fi: cardiologie, neurologie, chirurgie ...
Pentru proiecte mai complexe care acoperă mai multe informații, structura poate fi:
Astfel, structura se extinde, dar rămâne ușor de înțeles și logică. Un exemplu, pe acest site din categoria cardiologică poate conține subsecțiuni de boli cardiace și boli vasculare. Nu este interzisă plasarea materialelor legate de două sau mai multe secțiuni.
De exemplu, materialul despre hepatită poate fi în categoria și virologia hepatologiei în același timp. Principalul lucru este de a respecta ierarhia materialelor. Construcția structurii corecte este gândită în stadiul de planificare și colectare a kernel-ului semantic.
Overflow propriu-zis a paginilor site-ului
Am pregătit deja un material mai profund despre transfinement și va fi în curând. Perelinka - Prostanovka Link-uri din interiorul site-ului pentru navigarea convenabilă de navigare și transmisia de greutate a paginii.
Pentru a vedea un exemplu de supraaglomerare, deschideți orice articol din Wikipedia. Fiecare conține multe referințe la alte articole. Există chiar o glumă că, cu orice articol din Wikipedia în cinci clicuri puteți ajunge la un articol despre Hitler. Desigur, pe site-ul dvs. în articol nu ar trebui să fie 20 de legături cu alte materiale, dar sunt necesare 2-4 referințe.
O proprietate importantă a transletelor este transferul de greutate în alte pagini. Când toate paginile sunt asociate unul cu celălalt, se va crește în mod uniform ca CAMShare, iar pozițiile generale vor crește. Și când este promovată o anumită pagină, atunci greutatea din alte materiale pe acesta este trecut. Pentru a face mai clar, să presupunem că aveți nevoie pentru a promova o pagină medicală cu serviciul "Inspecția pediatrică". Pentru a face acest lucru, vom scrie mai multe articole despre bolile copiilor și peste tot, unde vom menționa nevoia de a inspecta pediatrul, vom pune referințe la serviciul nostru.
Adăugați prăjituri de pâine și îmbunătățirea utilizării
Structura bună nimic Dacă utilizatorul nu îl vede. În capul colțului, atunci când creați un site, este necesar să se punem utilitatea pentru persoana finală și ușurința utilizării. Dacă ați venit pe site, veți pierde și nu veți putea găsi mai multe materiale interesante pentru dvs., înseamnă că aveți probleme cu utilitatea.
Pâine de pâine sunt elemente de navigație care arată unde utilizatorul este situat în raport cu întreaga structură a site-ului. Aceste elemente sunt de obicei plasate în fața titlului de articole și permit un clic pentru a merge acasă în categoria de plasare a articolului sau în subcategoria sa.
Pâinea de pâine pot fi implementate cu ajutorul pluginurilor simple sau a modificării codului. Dacă nu sunt furnizate de șablonul utilizat. Dar utilitatea va trebui să lucreze. Trebuie să vă gândiți corect la meniu. Faceți-o vizibil vizibilă și convenabilă pentru utilizare. Gândindu-se în trivia diferită, deoarece chiar și butonul obișnuit de ridicare până la pagină mult mai ușor pentru viața utilizatorului, permițându-vă să mergeți la antet într-un singur clic și să nu parcurgeți cadrul deja citit.
Optimizarea codului site-ului HTML, JS, CSS, PHP
Astăzi, utilizatorii au devenit nerăbdători și dacă site-ul se deschide cel puțin o secundă mai lungă decât un concurent, ei vor merge la el. Acest lucru este conștient de acest lucru și motoarele de căutare utilizând viteza de descărcare ca fiind unul dintre factorii de clasificare. Prin urmare, este important să faceți rapid site-ul maximum de bani. Nu contribuie la imaginile grele, vivacitatea codului de aspect, răspunsurile greșite ale serverului.
Optimizarea codului site-ului
Acum voi vorbi despre optimizarea codului în general, astfel încât să obțineți o idee inițială. De asemenea, voi pregăti materialul în care vă voi spune în detaliu și faceți un cod pas cu pas pentru a optimiza codul. Deci, pentru a optimiza codul și pentru a face site-ul cel mai atractiv pentru motoarele de căutare, avem nevoie de:
- Strângeți imaginile, reducând greutatea, ceea ce va face descărcarea mai rapidă. Adesea, webmasterii neexperimentați sunt încărcați la un server de imagini de rezoluție mare. Care apoi de CSS sunt comprimate pentru afișare. Este corect să descărcați imagini în rezoluția în care acestea vor fi afișate pe pagină. Puteți să comprimați manual fotografiile, să le uscați în Photoshop sau să utilizați unul dintre numeroasele servicii care pot stoarce imaginile.
- Optimizați HTML, JS și CSS. Trebuie să faceți codul paginii cât mai simplu posibil. În ceea ce privește HTML, apoi eliminați toate comentariile codului, faceți un transfer normal de rânduri. Pentru scripturile JS, plasați-le după conținut, astfel încât informațiile semnificative să apară pe ecran mai devreme decât scripturile. Excepție - script și necesar pentru a afișa conținutul. Va fi puțin probabil să postați toate scripturile într-un singur fișier. CSS - Folosiți foi de stil pentru tot. Orice ieșire de informații ar trebui să apară în mod ideal prin CSS și nu încărcată de fiecare dată când un cod voluminos.
- Configurați redirecționările corecte, astfel încât toate paginile să răspundă la 200. Și unde aveți nevoie de o redirecționare cu transferul greutății paginii, de exemplu, la schimbarea adresei sale, a fost dată codul 301. Excludeți erorile 5xx și dacă acestea sunt repetate Găsiți cauza în pluginurile hosteterului, a terților și asta este ca și o rezolvați.
Concluzie
Optimizarea tehnică a site-ului este procesul este destul de consumator de timp și necesită cunoștințe speciale. Dar utilizarea recomandărilor și instrucțiunilor general acceptate, chiar și cel care a fost primul a turnat motorul pentru găzduirea ieri.
- Citiți articole pe această temă:
Salutări Prieteni, din acest articol veți învăța - cum să ștergeți codul HTML, cum să optimizați imaginile, cum să faceți posibilă și să optimizați Metategi, cum să faceți site-ul mai rapid, aflați ce trebuie să optimizați scripturile de pe site .
Unul dintre evenimentele importante pentru optimizarea internă a site-ului este optimizarea paginii. Datorită acestui fapt, puteți îmbunătăți calitatea generală a resurselor, creșteți viteza de încărcare a paginii, creșteți eficiența funcțiilor interactive.
Validarea și standardizarea HTML
Este fundamental important pentru promovarea căutării și furnizarea de experiențe pozitive ale utilizatorilor că site-ul poate funcționa la fel de bine în orice browsere, pe diferite sisteme de operare, în computere mobile și staționare.
Pentru a obține unificarea generală, toate siturile sunt dezvoltate pe baza versiunilor standard HTML. Cele mai relevante astăzi sunt versiuni ale HTML 4.1 și HTML5. Acesta din urmă, deși încă în etapa de dezvoltare, rețeaua a publicat deja un număr mare de astfel de site-uri.
Toate cele mai populare browsere - Opera, Google Chrome, Mozilla Firefox În cele mai recente versiuni, utilizați suportul noii hipership HTML5. Importanța utilizării HTML5 pentru a crea site-uri este, de asemenea, în faptul că computerele mobile bazate pe sistemul de operare Android nu suportă tehnologia Flash și utilizatorii nu vor putea vizualiza video în format SWF.
Site-urile bazate pe HTML5 sunt capabile să redea video fără a fi nevoie să descărcați și să instalați Adobe Flash Player. Tendința spre intermitentă se extinde, deci este utilă pentru funcționarea normală a site-urilor pentru a refuza treptat utilizarea video Flash și bannere animate din acest format.
Verificați validitatea site-ului codului HTML Puteți elibera site-ul oficial al consorțiului World Wide Web, de exemplu acest lucru
validator.w3gor.
Validatoarele încorporate sunt disponibile în constructorii de design și sisteme de gestionare a conținutului.
Curățarea codului HTML.
În procesul de creare și de editare ulterioară a paginilor web, programatorul lasă notele tehnice despre pagini, comentarii, uită să ștergă etichetele inutile. Toate acestea nu numai că încetinește activitatea site-ului, ci și reduce funcționalitatea. Datorită simplă îndepărtarea gunoiului HTML Puteți accelera descărcarea paginilor site-ului literalmente cu 35%.
Există, de asemenea, legături rupte, rupte care nu conduc oriunde, deoarece destinatarul a fost eliminat. Astfel de legături nu le place la motoarele de căutare. Prezența legăturilor întrerupte poate fi reflectată negativ în căutarea unei resurse.
Deoarece legăturile rupte au o proprietate din când în când să apară singuri, este necesar să le transportați în mod regulat și să le ștergeți. Acest lucru se aplică atât legăturilor externe, cât și interne. Dacă sistemul de gestionare a conținutului nu are opțiunile de opțiune de căutare, puteți utiliza servicii gratuite online.
http://creingonline.com/site_promotion/broken_link_checker.htm.
http://anybrowser.com/linkchecker.html.
Optimizarea conținutului grafic
Este important să acordați atenție optimizării graficelor, deoarece publicarea pe site-ul site-ului Toate imaginile trebuie procesate corespunzător.
- Pentru a publica fotografii, este recomandabil să utilizați format JPEG, deoarece acest tip de fișiere oferă o calitate mai bună cu o greutate minimă.
- Pentru a salva imaginile pentru care calitatea nu este foarte importantă, puteți selecta formatul PNG cu greutatea fișierelor de cel mult 100 sau 200 kB.
- Toate fișierele grafice sunt necesare, conform standardelor moderne, salvați într-un formular comprimat și într-un director separat de pe server, dar nu pentru a implementa în paginile web.
După editarea unei pagini care conține imaginea, trebuie să verificați viteza de descărcare. Pagina trebuie să apară în browser nu mai mult de cinci secunde. În caz contrar, eșecurile cresc brusc.
Toate imaginile și fotografiile au Metategi, care trebuie să fie optimizate prin adăugarea de cuvinte cheie și acest lucru îmbunătățește căutarea pe Internet. Cerința de bază pentru a optimiza metaseturile imaginii este unicitatea. Toate imaginile ar trebui să aibă nume diferite, sfaturi pop-up și texte alternative.
Metada de pagină web
Metagegi pentru diferite pagini ale site-ului trebuie să fie unice. Când sunt detectate etichetele duplicate, motorul de căutare se strălucește și o parte din pagini nu vor fi indexate. Experimentele au arătat că unicul de metetgs al site-ului îmbunătățește clasamentul și crește frecventarea cu aproximativ 18%.
O atenție deosebită trebuie acordată optimizării titlurilor și a etichetelor de descriere
- Titlul paginii trebuie să fie alcătuit din mai mult decât acesta este permis de sistemul de căutare al numărului de caractere și să păstreze cuvântul principal principal.
- Numărul optim de cuvinte pentru titlu este de șase.
- Descrierea paginii este întocmită ca un fel de text de vânzare pentru pagina de destinație și este de obicei alcătuită din două propuneri scurte. Prima propoziție conține cuvântul cheie principal, iar în al doilea - adițional.
- Cuvintele cheie metamatice nu sunt foarte importante, ci ar trebui să fie doar în cazul.
De exemplu, în general am eliminat partea din codul responsabil pentru Metatega de la motorul însuși.
Optimizarea elementelor software - scripturi
Principiile optimizării scripturilor sunt aceleași, KA pentru grafică - pe pagină Nu puneți, salvați într-un formular comprimat într-un director special.
Pagina dvs. ar trebui să fie curată, robotul care servește pe site-ul dvs. ar trebui să vadă doar pagina pură, pe care va fi doar un articol, bine, metatagurile necesare. Prin urmare, aveți nevoie de toate scripturile, contoarele etc. Plasați într-un fișier separat.
Optimizarea conținutului textului
Profesioniștii SEO au fost de mult timp cunoscuți că, împreună cu factorii de rangul extern și intern al site-urilor din motoarele de căutare în poziția în SERP, sunt influențate de așa-numitele. Factori comportamentali (personalizați). În ciuda acestui fapt, acesta din urmă plătește o atenție insuficientă. Există multe motive pentru acest lucru. În primul rând, nu toate companiile SEO, în special angajate în promovarea clientului "transportor", pot aloca resurse pentru a analiza influența factorilor comportamentali, a indicatorilor de monitorizare a eșecurilor și a numărului de opinii de pagină, analiza traficului care merge la site, etc. În al doilea rând, specialiștii la nivel mediu încă lucrează în conformitate cu principiul "Link-uri făcute - așteptând poziția". În al treilea rând, unii optimizatori nu acordă atenție factorilor personalizați pentru motivul pentru care nu consideră că este necesar, sunt lins sau doar nu știu despre ei.
Cu toate acestea, pe optimizarea conferințelor, reprezentanții lui Yandex clarifică faptul că rolul factorilor comportamentali devine din ce în ce mai semnificativ pentru motorul de căutare. Printre numeroasele criterii care afectează acești factori este optimizarea paginilor site-ului, din păcate, foarte des nu acordă atenție organizării resurselor de Internet.
Pentru ce ai nevoie?
Răspunsul este simplu. Optimizarea codului nu numai că va accelera încărcarea paginilor, ci și un site mai prietenos cu motoarele de căutare - codul va deveni curat și frumos, iar elementele sale vor fi amplasate în locurile potrivite. În plus, inițial sceptic perceput de optimizatoare în noiembrie 2009 declarația Google că viteza de descărcare a unui document web este unul dintre factorii de clasificare, confirmă doar faptul că optimizarea codului paginilor ar trebui angajată. În plus, optimizatorul poate afecta acest factor.
Componentele optimizării codului
Nu este un secret că roboții de căutare nu văd designul paginii - ci citesc codul ei și o fac atât de mult ca și o persoană - de sus în jos, de la stânga la dreapta. Informații În partea de sus a codului anumitor elemente, motoarele de căutare dau o prioritate mai mare. Astfel, atunci când SEO-crest, cele mai importante elemente sau pagini trebuie plasate deasupra elementelor secundare. Mai jos sunt câteva recomandări pentru a optimiza codul paginilor care va face o campanie pentru ao promova în motoarele de căutare mai eficiente.
1. Titlu,Descriere I.Cuvinte cheie - avem imediat o etichetă< head\u003e.
Factorii comportamentali au un impact semnificativ al unui aspect non-protever. Site-ul trebuie să fie la fel de bine afișat în toate browserele moderne cu permisiuni diferite. Destul de des, puteți vedea când browserul Internet Explorer afișează incorect conținutul site-ului și diferența cu Firefox și Opera Cardinal. Dacă la un astfel de site web, procentul de utilizatori IE va fi de 20%, apoi probabilitatea ca rata de eșec să crească semnificativ, crește. Utilizatorul nu va organiza mult timp pe acest site, este probabil că aduce imediat fila și nu se va întoarce niciodată la site din nou. Layout-ul site-ului ar trebui să fie atribuit profesioniștilor pentru care conceptele de "valabilitate" și "crossbrinity" nu sunt sunete goale.
8. Optimizarea imaginilor subweb.
Acest element se referă mai mult la utilitate, dar nu să spunem că este imposibil. Unii webmasteri nu plătesc optimizarea imaginilor sub atenție Web. Cu toate acestea, fiecare utilizator de Internet cel puțin o dată a ajuns la locul unde conținutul de text a fost încărcat rapid, iar imaginile grafice deschise cu mare dificultate.
Sa dovedit că punctul nu este în cea mai rapidă viteză de conectare la Internet, dar că mini-imaginile aparente au permisiuni uriașe, dar în loc de a stoarce imaginea într-un editor grafic, proiecția din codul paginii a prescris atributele din valorile "lățimii" și "înălțimii", de 15 ori mai mici decât rezoluția reală a fotografiilor. Uneori vine la punctul în care documentul web utilizează imagini în format.bmp, după cum știți, având mult volume mari în comparație cu imaginile identice în formates.jpg or.gif. De exemplu, puteți aduce pagina despre popularul Biatlon acum - http://magdalena-neuner.narod.ru/nowfoto.html. Pentru a vedea în încărcarea tuturor fotografiilor, utilizatorul va trebui să descărcați aproximativ 20 MB de trafic, deoarece 90% din imagini sunt efectuate acolo în formatul BMP.
Cum să fii și ce să faci în condițiile actuale?
În majoritatea cazurilor, în practică, se pare că clientul a ordonat crearea unui site într-un singur studio web sau freelanceri (din păcate, aceste categorii nu au întotdeauna vederea corectă și modernă a SEO-Layout) și au decis să promoveze în Una dintre companiile SEO, care, de regulă, astfel de probleme nu rezolvă și promovează ceea ce este metodele lor "transportor". Într-o campanie de succes SEO în Yandex, în realitățile actuale nu se întâmplă. Prin urmare, experții care oferă servicii profesionale pentru site-uri de promovare privind cererile extrem de competitive trebuie să aibă în arsenalul lor Departamentul de Programatori și Vertexers, precum și să ofere servicii pentru a crea site-uri. Pentru clienți, la rândul său, este de dorit să se concentreze asupra contractorilor care sunt implicați cu succes atât în \u200b\u200bcrearea, cât și în promovarea site-urilor în același timp sau, cel puțin, care are un sprijin tehnic bun.
Este demn de remarcat faptul că optimizarea codului paginii nu garantează o creștere a pozițiilor la cererile cheie, dar nu să acorde atenție factorilor matricei și comportamentali și este necesar să lucrăm acum.
Optimizați codul HTML și foile de stil cascading (CSS) trebuie să accelereze procesul de încărcare a site-ului și a conținutului plasat pe acesta. Economisirea timpului și a traficului, în general, o perioadă lungă de timp după optimizare, se va dovedi a fi semnificativă, chiar dacă schimbările de viteză nu vor fi foarte vizibile.
Optimizarea codului HTML
Pentru ca codul HTML să ajute la descărcarea rapidă a site-ului, trebuie să respecte mai multe condiții:
- Să fie simplă și informativă. După ce ați verificat valabilitatea, trebuie să corectați erorile astfel încât roboții să fie mai ușor de analizat. Codul trebuie să reprezinte în mod clar structura paginii.
- Principalele componente ale paginilor, cum ar fi titlurile, indicatoarele, blocurile de informații trebuie să fie ușor de determinat.
- Codul de exceptare din informațiile suplimentare, făcându-le în fișiere separate (de exemplu, puteți suporta CSS și JS), veți crește viteza de descărcare, care simplifică și lucrarea de roboți.
După ce a realizat îndeplinirea acestor condiții, site-ul poate fi făcut mai rapid, convenabil și crește eficiența indexării roboților de motoare de căutare.
Reducerea codului CSS și optimizarea
Puteți face codul site-ului mai ușor prin reducerea volumului său. Pentru aceasta trebuie să efectuați mai multe operațiuni.
În primul rând, ar trebui evitați tehnologii Flash, JavaScript, cadre, textul afișat prin imagine. Toate elementele, care poate, ar trebui să fie aranjate în fișiere separate, externe (de exemplu, CSS și JS, așa cum sa menționat deja mai sus). Va ajuta la optimizarea pluginurilor speciale ale codului. De exemplu, puteți instala pluginul de autoptimizare, care optimizează automat codul HTML, CSS, JS (dacă puneți căpușe corespunzătoare). Trebuie să configurați navigarea competentă și convenabilă prin intermediul site-ului, care va fi înțeleasă de utilizatori și recunoscută corect de motoarele de căutare. Acest lucru va crește viteza, calitatea descărcării și indexarea site-ului.
În ceea ce privește optimizarea CSS, aceasta se poate face în mod independent sau încredințată unei resurse sau unui program special. Optimizarea manuală este un proces consumator de timp și lung, în plus, puteți sări peste unele erori. Un program sau un serviciu de optimizare va fi mai bine eliminat de deficiențe, dar poate perturba unele funcții care au lucrat pe site și după verificare, conținutul nu poate fi afișat, deci trebuie să fie corectate.
Unele modalități de îmbunătățire a structurii CSS în modul manual:
- Îndepărtați golurile și rândurile inutile de șiruri de caractere care suprasolicite fișierul CSS și fac dificilă funcționarea roboților;
- Prescrieți proprietățile generalizării în loc de mai multe ori repetate comenzi similare;
- Utilizați descrieri laconice, ușor de înțeles în comentarii;
- Fonturi neobișnuite pentru a prescrie stiluri, nu imagini;
- Pentru imaginile creează Alt și titlul (diferite pentru fiecare imagine), astfel încât conținutul lor să fie recunoscut de boturile motoarelor de căutare;
- Aplicați la anteturile H1 Instrumente - și, în plus, acestea sunt recunoscute corect la indexare;
- Prescrie numai acele cuvinte cheie care sunt utilizate pe pagină pentru a minimiza numărul acestora;
- Utilizați o varietate de meta-etichete scurte.
CSS și optimizatoare HTML
Este convenabil și ușor optimizat direct în browser utilizând servicii speciale, de exemplu:
- CleanCss.com;
- CSS Optimizator;
- Compresor CSS;
- Cy-pr.com;
- pluginul de autoptimizare.
Specialiștii din SEO și sunt sfătuiți să utilizați CleanCss.com, deoarece vă permite să alegeți un raport de compresie de la scăzut la cel mai înalt sau să ridicați setările individuale. După cele mai ridicate și cele mai înalte niveluri de optimizare, codul site-ului are un aspect practic necitit, iar schimbările vor fi aproape imposibil de a face schimbări. Prin urmare, pentru a începe, utilizați optimizarea standard. Puteți selecta anumite moduri de compresie a conținutului sau puteți optimiza parametrii individuali: compresia fonturilor, imaginilor, îndepărtarea spațiilor.
Resursa CY-PR.com are, de asemenea, un instrument similar pentru optimizare, care facilitează structura CSS cu 25-30%, dar nu există posibilitatea de a crea un fișier cu codul după efectuarea operațiunii.
Restul serviciilor poate schimba radical codul astfel încât unele funcții pe site să nu mai funcționeze. Prin urmare, cu ajutorul lor, este mai bine să se producă doar schimbări locale ale parametrilor specifici ai site-ului.
După optimizare, trebuie să verificați performanța site-ului, afișând corect proiectarea, viteza de descărcare. Situația este situația în care opțiunile de pagini și site-urile utilizatorului sunt încărcate nu mai mult de 3-5 secunde.
Pentru a verifica gradul de optimizare și pentru a înțelege cât de eficient este înregistrat codul HTML, puteți utiliza astfel de servicii ca:
- optimizare.com;
- Portalul SEO-Cheklist;
- pluginul Firebug.
Aceste instrumente vor ajuta la verificarea dacă totul se face pentru a reduce cantitatea de cod HTML și pentru a-și îmbunătăți structura. La resursa SEO-Check List, puteți verifica lista, care a fost făcută deja pentru a optimiza și ceea ce nu este încă și setați marca pe afacerea perfectă.
Validare
Puteți verifica codul site-ului pentru erorile utilizând serviciile validator validator. Verificarea eficientă a codului este efectuată utilizând validator.w3c.org
Dacă sistemul din primul cec este dat mai multe erori semi-pioși, nu fi supărat. După fixarea unui anumit neajuns, puteți rula din nou testul și erorile vor deveni mult mai mici, deoarece un dezavantaj implică pe alții și vor dispărea când este corectată.
Site-ul cu un cod corectat și optimizat are mai multe șanse de poziții înalte în emiterea decât o resursă cu un cod HTML supraîncărcat în care sunt prezente erorile.
Nota: Versiunea adaptivă a site-ului este activată, care se ajustează automat la dimensiunea mică a browserului dvs. și se ascunde câteva detalii ale site-ului pentru citire. Vizionarea fericită!
Buna ziua. Astăzi vom continua subiectul optimizarea aspectului site-ului HTMLcare a început în articol despre.
Să găsim mai întâi de ce este important și apoi să ne întoarcem la sfaturi practice.
Format de site-ul Web realizat corect (sudat):
- Poate accelera în mod semnificativ încărcarea paginii (mai ales dacă înainte de a începe totul);
- Va simplifica lovirea paginilor dvs. în Utilitarul de căutare (nu numai din cauza descărcării rapide);
- Va crește șansele de browser complet, adică același afișaj al site-ului în toate browserele;
- Acesta va oferi o mică garanție că, după expirarea celor mai mulți ani, nu va trebui să vă relocați site-urile pentru browsere noi (sau pentru versiunile noi ale browserelor vechi).
Îți sugerez să merg de la lucruri simple la mai interesant.
Partea 1. Observați standardele HTML și CSS
Doar în cazul în care, voi spune că, în plus față de HTML și CSS, putem optimiza în continuare JS și PHP părți ale site-urilor noastre, care sunt mai sensibile la resurse și încetinesc semnificativ viteza de încărcare a paginii. Cu toate acestea, în plus față de viteza de descărcare a paginilor, componentele JS și PHP nu afectează promovarea site-ului (doar pentru a nu-l sparge), spre deosebire de marcajul HTML, adică, șablonul site-ului.
1.1 Închideți întotdeauna etichetele.
Inclusiv cele care nu sunt neapărat aproape, chiar dacă sunteți un standard Hater XHTML, este mai bine să adere la această regulă. Exemplu:
- Punct de listă
- Punct de listă
- Punct de listă
Fiecare etichetă Li este închisă, deși nu este necesară.
1.2 Respectați cuibarea corectă a etichetei.
Conform principiului: prima deschisă - cea din urmă închisă. Exemplu ca nu este corect:
Cât de corectă:
1.3 Nu descrie niciodată CSS și JS în interiorul aspectului HTML și atributele etichetelor.
Nu! Cu alte cuvinte, uitați de existența stilul de atribut și tag-ul stil.:
text
Descrieți toate stilurile din fișier separat.Css.
Puteți utiliza atributul de stil, trageți-l numai dinamic cu un JavaScript conform unor acțiuni. De exemplu, dacă faceți clic pe imagine, trebuie să modificați culoarea întregului text de pe pagină, apoi numai în acest caz puteți crea dinamic atributul de stil cu valorile dorite pentru eticheta dorită (în acest exemplu pentru corp). De ce? Deoarece roboții de căutare nu îl vor vedea oricum și nimeni (inclusiv utilizatorii) nu încărcați un cod excesiv, deoarece acțiunea are loc după ce pagina este plină.
Cu toate acestea, în astfel de cazuri, aș recomanda încă adăugarea unei clase CSS pre-descrise eticheta dorită, mai degrabă decât să adăugați atributul stilului. Acest lucru este cel puțin mai convenabil pentru editarea ulterioară.
Tot același lucru este adevărat pentru JS, întregul cod JS ar trebui să fie în fișier separat., nu în interiorul aspectului sau mai rău - printre atributele de etichete.
1.4 Uitați de blocarea capacelor și a literelor majuscule.
Scrieți toate etichetele, atributele și literele lor de valori (mici), același lucru se aplică meselor de stil CSS.
Aproape totul descris mai sus este în specificația oficială a HTML și CSS și se referă la valabilitatea documentului.
Astfel, ar trebui să menționez că lipirea standardelor W3C, adică prin respectarea valabilității documentului - obțineți următoarele avantaje SEO:
- Codul curat și, în consecință, încrederea suplimentară a motoarelor de căutare pe site-ul dvs.;
- Încărcarea accelerată a paginii, deoarece browserul nu trebuie să-și petreacă timpul pe depanarea unui document nevalid.
Cu toate acestea, nu merită să împrumuți validitatea, ar trebui să încercați să aderați la acesta, dar nu în detrimentul restului (timp, funcționalitate etc.).
Partea 2. Accelerați încărcarea paginii - unul dintre factorii de rang
2.1 Indicați dimensiunile actuale ale imaginilor.
Iată esența a două lucruri:
- Asigurați-vă că specificați atributele lăţime și Înălţime Pentru etichetă img.:
Acest lucru va accelera încărcarea imaginilor, deoarece browserul va ști în prealabil ce dimensiune trebuie afișată. - Asigurați-vă că introduceți imaginea de aceeași dimensiune, care specificată în atribute.
Dacă aveți nevoie de o imagine mai mare decât aveți nevoie, atunci nu aveți nevoie să economisiți timp cu privire la faptul că acesta poate fi redus cu ajutorul HTML sau CSS. Fiți amabili să vă petreceți timp, să mergeți la Photoshop sau la analogii săi și să reduceți imaginea la dimensiunile pe care doriți să le vedeți pe site, poate accelera în mod evident încărcarea paginii.
2.2 Utilizați CSS3 în loc de JS.
JS poate încetini în mod semnificativ descărcarea paginilor dvs. și, de asemenea, continuați să creați o încărcare după încărcarea paginii (o varietate de efecte, tipul de șir de rulare și alte lucruri dinamice), care poate frânge lucrarea browserului în timp ce fila cu fila Site-ul va fi deschis.
Astăzi, multe efecte frumoase și interesante pot fi realizate numai prin utilizarea proprietăților CSS3 (de exemplu, tranziția, umbra de box, raza de frontieră, opacitatea, transformarea, dimensiunea fundalului) și pricepută.
Toate cele de mai sus pot fi rezumate de o singură frază: oriunde puteți (suspectați cum) înlocuiți JS pe CSS3, utilizați CSS3 fără a fi informat! Pentru a căuta astfel de fragmente, vă sfătuiesc să explorați noile capabilități ale CSS3.
2.3 Mai puțin Photoshop - mai mult CSS 3.
Acest motto a folosit mult timp mulți webmasteri. Puteți crea butoane frumoase și elemente de proiectare cu un gradient neted, colțuri netezite, umbre (interne și externe) și un text frumos de sus datorită unui CSS. Oriunde puteți înlocui elementele de design grafic pe codul CSS - faceți-o! Exemplu:
În plus față de proprietățile CSS3 enumerate mai sus, este disponibil și formatul de descriere a culorii RGBA.
Pentru a crea un gradient încrucișat pe CSS, puteți utiliza servicii gratuite, cum ar fi acest Colorzilla.com.
2.4 Combinați imaginile în sprite CSS.
Aceste imagini pe care nu le-am putut trage cu CSS 3 ar trebui să fie unite într-un singur (în mod ideal). Acest lucru este necesar pentru a reduce numărul de solicitări către server la încărcarea paginii. Acest element poate reduce semnificativ sarcina de pe serverul dvs. web și, în același timp, și accelerează încărcarea paginii, imediat 2 Hare!
Pentru a înțelege mai bine despre ce vorbim, aruncăm o privire la CSS-ul meu sprite:
Nu e rău, nu-i așa? Imaginea de fundal este una pe toate elementele, o mutăm doar și înlocuim în fundalul unui anumit element partea dorită a imaginii datorită proprietății poziției de fundal, de exemplu, după cum urmează:
# Subs, # stânga, .mail, .Rss, .vk (fundal: URL (/ images/1.png) No-repetat) #subs (poziția de fundal: -28px -120px; -35px -20px;) .Mail (poziția de fundal: -43px -50px;) .Rss (poziția de fundal: -12px -8px;)
Va fi mai bine să faceți un sprite manual folosind Photoshop, dar vă poate părea suficientă dificultate, astfel încât să puteți utiliza servicii gratuite care vor face totul pentru dvs., inclusiv codul CSS pentru dvs. Îmi place mai mult serviciul spiteme. Dar nu voi fi obosit să repet: Este întotdeauna mai bine să o faceți manual, în special, astfel încât sprite poate funcționa semnificativ compact (în dimensiune și, prin urmare, în greutate), ceea ce înseamnă mai eficient.
2.5 Plasați corect fișierele JS.
Toate fișierele conectate ale fișierelor JS trebuie să fie amplasate cât mai puțin posibil în cod, nu este necesar să le conectați în interiorul "capului" site-ului (între etichetele capului) - încetinește semnificativ încărcarea paginii. Cea mai bună opțiune va conecta fișierele JS în fața etichetei de închidere a corpului, adică în partea de jos a paginii, nu există loc de mai jos.
Și un sfat mai util: În mod ideal, toate fișierele JS trebuie să fie combinate într-un singur, care este, am tăiat (CTRL + X) din toate fișierele și copiați-l la unul, astfel încât în \u200b\u200bcele din urmă vă aflați în partea de jos , în fața etichetei de închidere a corpului conectat un singur fișier:
...