sk | en
Advanced Web & It Solutions

Niekoľko tipov ako optimalizovať a zrýchliť TYPO3 web stránky

Dôležitosťou a nutnosťou optimalizácie a rýchlosti načítania pre Vašu web stránku sa v tomto článku zaoberať nebudeme. Zhrnieme vám niekoľko užitočných rád, ktoré váš TYPO3 redakčný systém udržia rýchly, výkonný, spoľahlivý a hlavne vždy dostupný.

1. Buďte vždy aktuálny

Ideálne pre projekt je mať vždy aktuálnu LTS (Long-term support) verziu TYPO3. Je to z dôvodu bezpečnosti a dostupnosti najnovších nástrojov a vylepšení.

2. Správny výber hostingu optimalizovaného pre TYPO3

Vždy pred výberom hostingového partnera sa uistite, že má podporu pre typo3 cms, vie rýchlo reagovať na požiadavky a taktiež je dostatočne flexibilný v prípade, že sa Váš projekt rozrastie.

3. Zapnutie TYPO3 cache

Najjednoduchší a najúčinnejší spôsob, ako budú vaše stránky fungovať optimálne, je ukladanie do vyrovnávacej pamäte. Aktivujte interný systém TYPO3 vyrovnávacej pamäte pomocou nasledujúcich nastavení v jazyku TypoScript.

  • #Setup
    config.no_cache = 0

4. Optimalizácia obrázkov

4.1 optimalizujte už na vstupe

Zmenšujte veľkost obrázkov už pri nahrávaní ručne za pomoci grafického programu alebo niektorého z on-line nástrojov.

príklad pre on-line tool:

4.2 zmenšujte obrázky na požadovanú veľkost priamo v typo3 template

Použitím špeciálnych obrázkových tagov napr. pre fluid template tool:

  • <f:image src="fileadmin/test.jpg" alt="Test" width="50c" height="50c" />

4.3 Optimalizujte kvalitu obrázov pri renderovaní stránky

Globálne nastavenie kompresie kvality obrázkov spracovaných typo3 pri renderovaní template.

  • #typo3conf/LocalConfiguration.php
    $TYPO3_CONF_VARS['GFX']['jpg_quality'] = '65';

5. Komprimujte a zlučujte CSS / JS

Výhodou minimalizácie kódu HTML je, že eliminuje ďalšie medzery.

  • #Setup
    config.compressCss = 1
    config.compressJs =1

Ďalší improovement pridá spojenie všetkých CSS a JS do jedného balíka.

  • #Setup
    config.concatenateJsAndCss = 1

6. Komprimujte Frontend a Backend čo najviac

v tomto prípade kompresia nieje na úkor kvality, štandardne je level 5 ale čím vyššia kompresia tým rýchlejšie.

  • #typo3conf/LocalConfiguration.php
    $GLOBALS['TYPO3_CONF_VARS']['BE']['compressionLevel'] = 9;
    $GLOBALS['TYPO3_CONF_VARS']['FE']['compressionLevel'] = 9;

7. CSS hore, JS dole

Prednastavené nastavenie umožňuje, aby sa jazyk JavaScript presunul do dolnej časti dokumentu HTML.

  • #Setup:Presunie všetky JavaScripty do footra
    config.moveJsFromHeaderToFooter = 1

    #Setup: Presunie individuálne JavaScripty do footra
    page.includeJSFooter {
      Jquery = jquery.min.js
      Bootstrap = bootstrap.min.js
    }

8. Optimalizácia typoscriptu vo webe

Optimalizácia kódov je vždy jasný nápad, ale mnohí majitelia webových stránok to nedokážu pochopiť. Optimalizujte TypoScript z vášho Template (FLUID) kódu pomocou:

  • Odstránenia nepotrebného TypoScript kódu,
  • Pridaním iba požadovaného rozšírenia šablóny,
  • Modulárny TSConfig & TypoScript
  • Buďte efektívnejší! Vytvorte vlastné rozšírenie v TYPO3 pre Templovanie s napísaným TypoScriptom, atď.
  • Zahrňte TSConfig a TypoScript pomocou INCLUDE_TYPOSCRIPT - <INCLUDE_TYPOSCRIPT: source="FILE:EXT:extkey/Configuration/TypoScript/setup.ts">

9. Použite CDN

Používanie siete na poskytovanie obsahu [Content Delivery Network - CDN] vám poskytuje luxus pri hosťovaní svojich webových stránok na viacerých serveroch počas distribúcie súborov a ich načítaní vo viacerých systémoch.

Hlavné výhody:

  • Dostupnosť rôznych domén
  • Súbory môžu byť vopred uložené do vyrovnávacej pamäte
  • Vysokokapacitné infraštruktúry
  • Distribuované dátové centrá
  • Zabudované ovládanie verzie
  • Analýza používania
  • Zvyšuje výkon a šetrí peniaze

10. Optimalizujte počet HTTP requestov

Táto časť je jednoduchá, čím menej požiadaviek, tým rýchlejšie bude načítanie web stránok.

11. Využívajte vyrovnávaciu pamäť prehliadača

 #.Htaccess
ExpiresActive On
ExpiresByType text / css "access plus 7 days"
ExpiresByType image / gif "access plus 6 months"
ExpiresByType image / jpeg "access plus 6 months"
ExpiresByType image / png "access plus 6 months"
ExpiresByType image / jpg "access plus 6 months"
ExpiresByType image / x-icon "access plus 6 months"
ExpiresByType application / font-woff "access plus 6 months"
ExpiresByType application / x-font-ttf "access plus 6 months"
ExpiresByType application / svg + xml "access plus 6 months"
ExpiresByType application / vnd.ms-fontobject "access plus 6 months"
ExpiresByType application / x-shockwave-flash "access plus 6 months"
ExpiresByType application / javascript "access plus 7 days"
ExpiresByType application / x-javascript "access plus 7 days"

12. Použitie GZIP kompresie

Rýchlosť načítania a šírka pásma [bandwidth] ide ruka v ruke, pri použití GZIP kompresie ušetríte až 50-80% šírky pásma.

  • #.Htaccess
    <FilesMatch "\.js\.gzip$">
        AddType "text/javascript" .gzip
    </FilesMatch>
    <FilesMatch "\.css\.gzip$">
        AddType "text/css" .gzip
    </FilesMatch>
    AddEncoding gzip .gzip

13. Prefetching

viac info tu:

https://www.keycdn.com/support/prefetching/

14. Kombinujte obrázky do jedného - css sprity

Ideálne je spájať obrázky do jedného veľkého a poziciovať ich za pomoci css. Je to rýchlejšie ako stahovať pri načítaní web stránky každý zvlášť.

Kategórie noviniek: