Viteza blogului

Voi prezenta în acest articol câteva metode pentru a îmbunătăți viteza de încărcare a blogului. Majoritatea sunt simple și nu necesită cunoștințe avansate de development.

  Înainte de toate ca să nu-mi dați cu măciuca în cap că v-am stricat blogul, faceți o copie de siguranță a fișierelor (backup) iar în cazul în care ceva nu funcționează corect puteți restaura datele salvate.

Optimizare cu ajutorul scripturilor

  • Vom adauga funcția flush care rescrie buffer-ul serverului, aceasta trimite către browser atunci când intrăm pe o pagină părțile care au fost executate chiar dacă nu a fost executat tot fișierul PHP. Acest cod trebuie adăugat între eticheta de închidere head și eticheta de deschidere body:
      //Codul trebuie adăugat între </head> și <body>
      
      <?php flush(); ?>
       

    flush
  • Mutăm codurile javascript din header în cadrul paginii astfel header-ul va fi încărcat mai repede, conținutul va fi afișat datorită funcției flush mai sus menționată iar codurile javascript care se încarcă din fișiere externe sau de pe site-uri externe vor fi încărcate la urmă însă conținutul va fi afișat deja (e mai mult iluzia de încărcare rapidă deoarece conținutul este afișat mai repede iar cititorul se poate bucura de acesta scripturile fiind încărcate la urmă însă timpul de încărcare al blogului nu scade ci scade timpul de afișare al elementelor esențiale)

    javascript dupa body #1  javascript dupa body #2
  • Comprimăm codul CSS cu CSS Compressor (Compression mode: Normal iar Comments handling: Strip ALL comments). În imaginile următoare puteți observa schimbarea:

    comprimare CSS #1  comprimare CSS #1

    Dacă apar probleme în temă după comprimare folosiți modul Light !

  • Edităm fișierul .htaccess și introducem codul următor care va mări cache-ul, fișierele trimise către browser vor fi memorate pe o perioadă mai lungă de timp iar acesta nu va mai trebui să le descarce la fiecare intrare pagina web fiind afișată într-un timp mai scurt:
    # BEGIN Marirea cache-ului pentru viteza
    <ifmodule mod_headers.c>
        # O saptamana pentru imagini
        <filesmatch ".(jpg|jpeg|png|gif|swf)$">
            Header set Cache-Control "max-age=604800, public"
        </filesmatch>
        # 3 ore pentru texte
        <filesmatch ".(txt|js|css)$">
            Header set Cache-Control "max-age=10800"
        </filesmatch>
    </ifmodule>
    # END Marirea cache-ului pentru viteza

    Tot în .htaccess introducem următorul cod care comprimă fișierele trimise către browser:

    # BEGIN Comprimarea fisierelor trimise
    AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/javascript text/css application/x-javascript
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch ^Mozilla/4.0[678] no-gzip
    BrowserMatch bMSIE !no-gzip !gzip-only-text/html
    # END Comprimarea fisierelor trimise

    Codurile trebuie introduse după sintagma # END WordPress ca în imaginea următoare:

    .htaccess

Optimizarea elementelor grafice

  • Pentru a micșora dimensiunile imaginilor din temă ne putem folosi de site-ul Smush.it, în cadrul acestuia selectăm tab-ul „UPLOADER”, apăsăm pe butonul „Select Files and Smush” și selectăm imaginile din temă iar site-ul le va comprima. Downloadăm fișierele rezultate și (în cazul fișierelor al căror nume este format din două sau mai multe cuvinte site-ul va înlocui spațiul cu simbolul +, va trebui să îl reînlocuiți manual cu spațiu ca mai apoi să) le suprapunem fișierelor initiale.

    Smush.it

    Eu folosesc acest tool și pentru imaginile din articole !

  • Pentru un timp de încărcare cât mai mic „aerisiți” designul prin eliminarea elementelor „mișto” dar nefolositoare pentru useri. Sidebar-ul fiind primul vizat iar despre acesta am vorbit aici.

  Acestea sunt doar câteva dintre măsurile pe care un blogger trebuie sa le ia în scopul obținerii unei viteze de încărcare mai bună. Dacă aveti sugestii sunteți invitați să le împărtășiți cu noi !

Sursa imaginii.

Etichete: ,

5 comentarii

  1. Salut, spune-mi si mie te rog mult , cum gasesc fisierul HTML cu pagina de home sau exista un fisier ? Ori le combina si-ti arata pagina de home ?
    Ma refer la ce spune Google PageSpeed cu reducerea resursei html și-ti da link-ul site-ului…
    Si in acest fisier se adauga acea functie flush ?
    Si tot aici gasesc si scripturile js și css care blocheaza redarea continutului din partea superioara a paginii ?
    Astea ar trebui mutate cum arati in poză, din hesd mai jos intre header si body ?

    Stiu , cam multe intrebari , dar la fel de bine cred că și știi ce de intrebari are un incepător cand nu stie incotro s-o apuce…. 🙂
    Multumesc !

    1. Am să-ți răspund punctual:

      • Limbajul de programare PHP (cel pe baza căruia este construit WordPress) combină mai multe fișiere pentru a afișa conținutul. Un site în HTML trebuie sa afișeze fiecare pagină din nou, atunci când intri pe ea, chiar dacă partea de sus (header-ul) și partea de jos (footer-ul) sunt aceleași – deci se repetă. În PHP ai un fișier care conține header-ul, altul care conține footer-ul și altul în care este înmagazinat conținutul, astfel browserul încarcă o singură dată partea de sus și partea de jos, iar când accesezi o alta pagină ceea ce se schimbă este doar conținutul.
      • Fișierul în care se face apel la partea de sus (header), la conținut și la partea de jos (footer) a site-ului tău, poate fi găsi în folderul temei și se numește, de obicei, index.php sau home.php.
      • La ce se referă Googpe PageSpeed când spune că procentul de cod HTML este mai mare decât conținutul este că toate codurile care înconjoară conținutul propriu-zis de pe prima pagină sunt mai mari decât conținutul general. Pentru a rezolva această problemă trebuie să afișezi descrieri pe pagina principală sau, dacă afișezi deja, să setezi ca acestea să fie mai lungi. De asemenea, ai putea afișa mai multe articole în prima pagină a site-ului tău.

        Lucrurile acestea le poți face din cadrul setărilor temei și din cadrul setărilor (read / citire) WordPress.

      • Script-urile și codurile CSS le găsești în fișierul header.php din folderul temei pe care o folosești pe blog. Mută codurile care încep cu
    1. Site-ul se încarcă într-adevăr foarte greu. Scripturile există, trebuie doar sa le cauți (vezi fișierul următor), dar și să comprimi codul CSS respectiv să-l încarci într-o singură linie, sunt prea multe apeluri catre fișiere CSS: http://i.imgur.com/xWjiPhI.png

      Pentru încarcarea codului CSS / JS inline folosește plugin-ul Minify.

  2. Am incercat si plugin-ul Minifi și a creat o porcarie mare, nu se intelege cu Wp Rocket , iar treaba cu incarcatul intr-o singură linie, chiar ma depăseste… Asta e, poate reusesc sa-i dau de cap, daca nu , asa i-l las…

Lasă un răspuns

Adresa de email nu va fi publicată. Câmpurile marcate cu * sunt obligatorii.