Saveti oko izrade web sajtova

b0ne^
/srv/http/Posts: 22Administrator edited January 8 in PHP

[ Sadrzaj ]
[0] Uvod
[1] PHP poboljsanja
[2] HTML, CSS, JS poboljsavanje
[3] Apache poboljsavanje

[0] Uvod
Pozdrav svima. Odavno nisam kacio ni jednu objavu, a kamoli topic, i vreme je da se svi malo aktiviramo i vratimo ovom forumu kvalitet koji je i imao. Pocecu sa nekim korisnim tutorialima i zanimljivim topicima, a valjda ce mi se i ostali korisnici pridruziti u tome.

[1] PHP poboljsanja
U ovoj sekciju cu navesti neke osnovne korisne savete koji pomazu da se skripte brze izvrsavaju i sa manje trosenja resursa.

[ Loops ]
Petlje mogu trositi mnogo resursa ukoliko su velike, ali srecom postoje neke stvari koje mogu pomoci da se to svede na minimum. Pogledajmo sledeci kod:

    <?php
        /* Generisanje petlje, nebitan deo */
        $array = [];

        for($i = 0; $i < 100; $i++) {
            $array[] = ($i+rand(10, 100))*rand(5, 20);
        }

        /* Glavni kod */
        for($i = 0; $i < count($array); $i++) {
            echo $array[$i]."<br>".PHP_EOL;
        }
    ?>

Ovaj tip loopovanja kroz petlju se stalno koristim i svuda ga vidjamo, ali on ima jednu veliku manu na koju retki obracaju paznju. count($array) je funkcija koja nam vraca broj elemenata zadatog niza, ali u ovom kodu ce se ta ista funkcija izvrisiti pri svakom prolazu kroz petlju sto znaci da ce vremenska slozenost biti O(n^2) dok je u sledecom kodu O(n) za istu tu petlju.

    <?php
        /* Generisanje petlje, nebitan deo */
        $array = [];

        for($i = 0; $i < 100; $i++) {
            $array[] = ($i+rand(10, 100))*rand(5, 20);
        }

        /* Glavni kod */
        $count = count($array);

        for($i = 0; $i < $count; $i++) {
            echo $array[$i]."<br>".PHP_EOL;
        }
    ?>

U ovom kodu se count funkcija poziva samo jednom. Takodje, nikada ne definiste funkcije unutar petlje nego to uradite pre petlje.

[ Buffering ]
Kad god pravimo neki CMS sistem cesto sadrzaj generisemo pomocu PHP-a sa podacima iz baze podataka. Jedan nacin da se poboljsa load time stranice je da se CSS i JS skripte ucitavaju pre generisanja sadrzaja. To mozemo uraditi koriscenjem flush funkcija.

    <?php
        ob_start();
    ?>
    <!DOCTYPE HTML>
    <html>
        <head>
            <title>Naslov stranice</title>

            <link rel="stylesheet" href="...">
            <link rel="stylesheet" href="...">
            <link rel="stylesheet" href="...">
            <link rel="stylesheet" href="...">
        </head>
        <?php
            ob_flush();
            flush();
        ?>
        <body>
            <div id="wrapper">
                <?php
                    /* Generisanje sadrzaja pomocu PHP-a, nebitan deo */
                ?>
            </div>

            <script src="..."></script>
            <script src="..."></script>
            <script src="..."></script>
            <script src="..."></script>
        </body>
    </html>
    <?php
        ob_end_flush();
    ?>

U ovom kodu odmah nakon zatvaranja pozivamo funkcije ob_flush i flush kako bi se ispisao trenutni sadrzaj odnosno kako bi se ucitavale CSS skripte dok se generise sadrzaj.

[ File inclusion ]
Prilikom ukljucivanja fajlova nikada ne treba koristiti include_once i require_once funkcije zato sto im treba vise vremena da se izvrse zbog provere da li je fajl prethodno uklucen. Umesto toga treba koristiti include i require funkcije, a tokom pisanja koda obratiti paznju na to da se fajl ne ukljuci vise puta.

[ Functions ]
Ukoliko vec u PHP-u postoji funkcija koja obavlja ono sto vama treba - koristite je umesto da sami pisete funkciju koja bi to obavila. Pisanjem svoje funkcije ne mozete da nadmasite preformanse vec postojece funkcije zato sto vasu funkciju kompilator mora prvo da obradi i prevede na C, a zatim i na masinki jezik. Tu se povecava vreme izvrsavanja dok kod built-in funkcija toga nema.

[ Quotes ]
Jedna veoma jednostavna stvar na koju je veoma tesko da se naviknemo. Koristite single quotes ' umesto double quotes " kod funkcija za ispis. Zasto bi ovo poboljsalo preformanse? Pogledajmo sledeci kod:

    <?php
        $forum = "Ljuska.org";

        echo "Forum: $forum<br>".PHP_EOL;
        echo 'Forum $forum'.PHP_EOL;

Rezultat ovoga ce biti:

    Forum: Ljuska.org
    Forum $forum

Kada se koriste single quotes ne vrsi se provera da li neka promenljiva postoji i koja je njena vrednost nego se samo tako i ispise. Znaci kada koristimo single quotes ne izvrsava se provera za promenljive sto opet malo poboljsava preformanse.

[ Regular expressions ]
Ukoliko mozete da ih izbegnete, to i radite. Koristite str_replace i druge funkcije zato sto preg_ funkcije trose mnogo vise vremena nego obicne. Takodje, umesto da proveravate da li neka promenljiva sadrzi string umesto preg_match funkcije koristite strpos ili da li se zavrsava sa nekim stringom umesto preg_match("blabla$" sa strrpos.

[2] HTML, CSS, JS poboljsavanje
U ovoj sekciji nema mnogo toga da se kaze kao u prethodnoj, ali imaju neke stvari na koje treba obratiti paznju.
- Stavite tagove odmah pre zatvaranja body taga, prvo serviramo sadrzaj korisniku, a posle ucitavamo potrebne biblioteke

  • Prilikom razvoja aplikacija pisati CSS i JS pregledno i sa komentarima, a pre stavljanja aplikacije online napraviti minify verzije za CSS i JS i ucitavati njih. Stare (non-minify) verzije i dalje cuvajte ukoliko treba da uradite neku promenu da ne morate da se mucite sa nepreglednim minify verzijama.

    http://cssminifier.com/
    http://javascript-minifier.com/
    
  • Ukoliko koristite dosta slicica za dizajn ukombinujte ih u jednu sliku (sprites) onda ih koristite pomocu background-position i width i height. Primer koda sa w3schools-a

    #home {
        width: 46px;
        height: 44px;
        background: url(img_navsprites.gif) 0 0;
    }
    

0 0 oznacava poziciju na slici, a width i height koji deo sa slike se koristi

  • Ukoliko pravite sajt koji nije responsive, za svaki <img> tag navedite koje ce dimenzije slike biti
    <img src=".." width=".." height="..">

  • Ukoliko ucitavate mnogo razlicith CSS i JS fajlova, ukombinujte ih u jedan CSS i jedan JS fajl i tako ih ucitavajte. Poenta ovoga i koriscenje sprites jeste kako bi se smanjio broj requestova koji se salje.

  • Izbegavajte koriscenje inline CSS i JS

  • Smanjite dimenzije slika na onu u kojoj ce se prikazivati, ili makar na maksimalnu koja ce se prikazivati. Ucitavace se slike koje zauzimaju manje memorije. Takodje nije lose propustiti ih prvo kroz:
    https://tinypng.com/
    https://tinyjpg.com/

  • Izbegavajte koriscenje query tagova za CSS i JS fajlove jer se cesto nece kesirati. Kako to izgleda kada se koristi query tag
    <link rel="stylesheet" href="style/css/main.css?version=1.6.9">

[3] Apache poboljsavanje
Ovde cu navesti neke stvari koje mozete dodati u svoj .htaccess fajl koje poboljsavaju preformanse.

[ Caching ]
Navedite vreme trajanja fajlova kes memoriji kako bi pretrazivac znao posle koliko treba da zahteva nove verzije. Primer koda:

    <IfModule mod_expires.c>
       ExpiresActive on
       ExpiresDefault "access plus 1 month"

       ExpiresByType image/x-ico "access plus 1 year"
       ExpiresByType image/jpg "access 1 year"
       ExpiresByType image/jpeg "access 1 year"
       ExpiresByType image/gif "access 1 year"
       ExpiresByType image/png "access 1 year"
       ExpiresByType text/css "access 1 month"
       ExpiresByType application/javascript "access plus 1 year"
    </IfModule>

[ Deflate ]
Dodavanjem sledeceg koda omogucavamo da se fajlov kompromisuju pre nego sto se salje korisniku. Moze se koristiti i gzip umesto deflate-a, ali deflate ima bolje preformanse zato sto ne obavlja checksum header-a i footer-a.

    <IfModule mod_deflate.c>
       AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
    </IfModule>

[ Koristite CDN ]
CDN (content delivery network) sluzi kako bi se korisniku servirali staticni fajlovi sa servera sto blizem njemu zato sto prosto zahteva manje vremena. Moj savet vam je da koristite najbolji i besplatni CDN:
cloudflare.com

If you don't know who I am, then maybe your best course would be to tread lightly.

Comments

  • 5 Comments sorted by Votes Date Added
  • b0ne^
    /srv/http/Posts: 22Administrator

    @Panajotov ,

    [1] Totalno nerelevantno sa ovom temom
    [2] Za nekoga ko ne voli da se igra sa JS meni je ovaj nacin minifakcije prijatniji, vremenska razlika je izmedju gulp-a, grunt-a itd i rucne minifakcije je u minutima. Ne vidim u kojoj varijatni je bolje koristiti base64 za slike - zastarela metoda i ne dobija se nikakavo znacanjo poboljsanje, a uopste nije zgodno za odrzavanje sajta. Tesko da ces ukupno imati jednu ili dve male slicice pa da se i kao isplati da koristis base64:
    - Ako su male slicice -> koristi sprite
    - Ako se velike slike -> ne budi lud da koristis base64
    [3] Pricas gluposti, to je isto jedan vazan deo optimizacije

    If you don't know who I am, then maybe your best course would be to tread lightly.

  • Panajotov
    cp6Posts: 11Member

    Nisam ni mislio da je vezano sa ovom temom, samo hint.
    Ne znam kojom logikom je bolje rucno da minifikujes, al ajd. :)
    Zasto base64 iako je zastareo? Kao sto sam napisao, manje requestova, logo i staticne slike su sasvim ok primer.

  • b0ne^
    /srv/http/Posts: 22Administrator

    @Panajotov,

    Ja licno ne volim npm, node itd, a i kao sto sam rekao, razlika sa njim i rucnom minifkacijom je u minutima (osim ako konstano ne menjas css/js na sajtu koji je vec online pa stalno mora minify)... Ako ces ukupno imati 1-3 slike na sajtu onda mi je i ok, ali u suprotnom ne. Base64 je nezgodan za odrzavanje i u ovom tvom primeru bih ja za logo stavio jednu sliku, ostale kao sprite (osim ako nisu neke vece dimenzije). Mislim ako ti imas par slika na sajtu tih par requestova ne pravi veliku razliku.

    If you don't know who I am, then maybe your best course would be to tread lightly.

  • Panajotov
    cp6Posts: 11Member

    To sto tebe mrzi to je druga stvar :dizzy: Ako ne radis sa sass/less, onda te i razumem.
    Naravno da neces svaku sliku pretvarati u base64 xD ali radi smanjivanja requestova, bar zbog neke optimizacije, dobro je da ih smanjis. xD

  • Panajotov
    cp6Posts: 11Member edited January 10

    [1] PHP poboljsanja, ovo je uglavnom problem kod php-a, u svakoj iteraciji opet broji niz, takođe mislim da isti problem se javlja i kod javascript-a, dok kod jave, c, c++, to nije problem, izbrojani niz ostaje na steku.

    [2] HTML, CSS, JS poboljsavanje, ovo što si naveo je početnički primer, uvod u minifikaciju, ne treba se raditi, niti se radi tako u praksi. Postoji gulp, grunt.
    Ako imate mnogo sličica, ikonica koje su u jpg/png formatu, obavezno uraditi sprite, manje request-ova prema serveru, manje zauzimaju zajedno.
    spritecow.com/
    Još jedan hint. Ukoliko možete, slike pretvorite u base64. Naravno, ne treba na svakoj to raditi, ali radi smanjivanja request-ova poželjno je.
    https://base64-image.de/

    [3] Apache poboljsavanje, zajebi apache :D

Sign In or Register to comment.