Juraj Ladecky | Programmer

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:

• https://compressor.io/
• https://tinyjpg.com/

4.2 zmenšujte brá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ášť.