30 Tips & Tricks for Optimum TYPO3 Website Speed and Performance

30 Tips & Tricks for Optimum TYPO3 Website Speed and Performance

 

30-Tips-Tricks-for-Optimum-TYPO3-Website-Speed-and-Performance

 

How would you rate the performance of your TYPO3 website in its desktop (tablet too) and/ or mobile versions – good, average or poor? In case this question has left you with a frown then it’s the right time to optimize your portal for superior returns. It’s just not enough to deploy the best TYPO3 development strategies for your business website; it also has to be optimized for the highest speed and best performance metrics on different devices. Here are the top TYPO3 tips & tricks for making your TYPO3 website faster, more reliable and value-bearing.

 

Why do TYPO3 websites need optimization?

Page speed matters to Google: “Google Wants Your Site to Load in Less Than a Second,” thus goes the 2010 announcement by the search engine giant. Ever since, the speed at which website pages load, has been used as an important ranking signal by Google.

 

Page speed matters to Visitors: Page speed also impacts user experiences.  It is no secret that positive user experiences lead (more often than not) to better conversions.

 

Speed Matters

TYPO3-Website-Speed-Matters-Statistics

 

     

  • 73% of mobile internet users say that they’ve encountered a website that was too slow to load.
  • 38% of mobile internet users say that they’ve encountered a website that wasn’t available.
  • 47% of consumers expect a web page to load in 2 seconds or less.
  • 40% of people abandon a website that takes more than 3 seconds to load.
  • If an e-commerce site is making $100,000 per day, a 1 second page delay could potentially cost you $2.5 million in lost sales every year.

  •  

 

Analyze your Page Download Speed

At the very onset, it is essential to test the speed of your TYPO3 website by using one of the tools & techniques mentioned below. This will help you assess the exact reasons behind the unsatisfactory performance of your online presence.

 

Google Page Speed

developers.google.com/speed/pagespeed/insights/

TYPO3-Optmize-Speed-Testing-Website-for-Google-Page-Speed

 

Pingdom

tools.pingdom.com

TYPO3-Pingdom-Website-Testing

 

Web Page Test

www.webpagetest.org

TYPO3-Pages-Speed-Testing-Web-Page-Test

 

 

TYPO3 Website Speed/Performance Optimization


 

Tips #1: Choose Reliable Web Hosting Services

Choosing a reliable and fast server, and effective web hosting services, can be among the most important decisions that you will make in the process of figuring out how to make your TYPO3 website faster.

Here is a list of few popular TYPO3 Hosting providers:

TYPO3-Choose-Reliable-Web-Hosting-Services


 

Tips #2: Keep TYPO3 updated

Upgrade-toTYPO3-to-Imrpove-Speed

 

Its always a good idea to always upgrade your site to latest TYPO3 LTS version. Checkout latest TYPO3 LTS version at typo3.org/download/. NITSAN is providing service of TYPO3 Upgrade/Updates.


 

Tips #3: Enable TYPO3 Cache

Activate the internal, very powerful caching system by using the below settings in Typoscript. It will cache the whole site and make site faster.

#Setup

config.no_cache = 0


 

Tips #4: Static File Caching

TYPO3-Core-Default-Cache

 

Transparent static file cache solution using mod_rewrite and mod_expires. Increase response times for static pages by a factor of 230.

No matter how much you tune your system, each request for a TYPO3 page involves several SQL queries and heavy PHP logic. If your site has many static pages that are rendered the same way several times, even with TYPO3's cache you won't get a performance similar to static HTML files. That's why you should use the static file cache extension nc_staticfilecache.

 

Install & configure the TYPO3 EXT:nc_staticfilecache

TER: typo3.org/extensions/repository/view/nc_staticfilecache

Exension Manual: docs.typo3.org/typo3cms/extensions/nc_staticfilecache/


 

Tips #5: Image Optimization

Mostly websites are slow due to heavy size images, Please perform below steps to optimize the images on your TYPO3 website.

 

1. Manually decrease size of images (using online tools or photoshop)

 

2. Crop/Resize images by using Fluid Templating <f:image> Read more at docs.typo3.org/typo3cms/ExtbaseGuide/stable/Fluid/ViewHelper/Image.html

<f:image src="fileadmin/user_upload/demo_test.jpg" alt="Demo/Test" width="100c" height="100c" />

 

3. Configure the image quality 

#typo3conf/LocalConfiguration.php

$TYPO3_CONF_VARS['GFX']['jpg_quality'] = '65';

 

Also recommended to read these:

typo3worx.eu/2016/02/image-cropping-typo3-backend/

docs.typo3.org/typo3cms/TyposcriptReference/Functions/Imgresource/Index.html

TYPO3-Image-Quality-Chart


 

Tips #6: Minify HTML

Optimization of the final page: re-formatting the html output, removal of newlines, and quotes. Install & configure EXT:sourceopt extension.

TER: typo3.org/extensions/repository/view/sourceopt

Extension Manual: docs.typo3.org/typo3cms/extensions/sourceopt/


 

Tips #7: Minify CSS & JS

Minification will remove all excess space. Setup below TypoScript code,

#Setup

config.compressCss = 1

config.compressJs =1


 

Tips #8: Concatenate/Merge CSS & JS

Bundles JS and CSS files at frontend with below TypoScript.

#Setup

config.concatenateJsAndCss = 1


 

Tips #9: Compression of TYPO3 Backend & Frontend

TYPO3-Website-Pages-Size-Matters

 

Setup below configuration in Install tool or directly configuration file.

#typo3conf/LocalConfiguration.php

$GLOBALS['TYPO3_CONF_VARS']['BE']['compressionLevel'] = 9;

$GLOBALS['TYPO3_CONF_VARS']['FE']['compressionLevel'] = 9;


 

Tips #10: CSS to the Top & JS to the Bottom

If set, all JavaScript (includes and inline) will be moved to the bottom of the HTML document, which is after the content and before the closing body tag. Setup below code to achieve it.

 

#Setup: Moves all JavaScripts into the footer

config.moveJsFromHeaderToFooter = 1

 

#Setup: Move individual JavaScripts to the footer

page.includeJSFooter {

  Jquery = jquery.min.js

  Bootstrap = bootstrap.min.js

}


 

Tips #11: Disable TYPO3 Logs

TYPO3 is a huge system and always maintains logs for many things, so you can disable it with below settings.

#typo3conf/LocalConfiguration.php;

$TYPO3_CONF_VARS['SYS']['enableDeprecationLog'] = '0';

$TYPO3_CONF_VARS['SYS']['syslogErrorReporting'] = '0';

$TYPO3_CONF_VARS['SYS']['belogErrorReporting'] = '0';

$TYPO3_CONF_VARS['SYS']['systemLogLevel'] = '4';

$TYPO3_CONF_VARS['SYS']['sqlDebug'] = false;

$TYPO3_CONF_VARS['SYS']['no_pconnect'] = '1';

$TYPO3_CONF_VARS['BE']['versionNumberInFilename'] = '1';


 

Tips #12: TypoScript Code Optimization

It is always good practice to optimize TypoScript code from your templating code eg.,

     

  • Remove unnecessary TypoScript code,
  • Include only required template extension,
  • Delete extra spaces
  • Avoid TYPO3 backend template for TypoScript & Setup file based TypoScript
  • Modular TSConfig & TypoScript
  • Always good practice to create custom TYPO3 Extension for Templating with writing structure TypoScript for Packageable, Auto-loading abilities, Re-usability of code etc.,
  • Include TSConfig & TypoScript via INCLUDE_TYPOSCRIPT
  •  

TYPO3-Modular-Optimization-TypoScript

<INCLUDE_TYPOSCRIPT: source="FILE:EXT:extkey/Configuration/TypoScript/root.ts">

<INCLUDE_TYPOSCRIPT: source="FILE:EXT:extkey/Configuration/TSConfig/root.ts">


 

Tips #13: Reduce HTTP Requests

TYPO3-Minimum-HTTP-Request

Sending fewer HTTP requests to the server can improve the loading times of your website.


 

Tips #14: Use a Content Delivery Network (CDN)

TYPO3-Integrate-Implment-CDN

 

Content Delivery Networks (CDNs) have revolutionized web hosting during the past few years. Rather than hosting your website on a single server, you can distribute the files and load across multiple systems. There are a number of free CDNs offered by Google, Microsoft, Yahoo and other large web organizations.

Example.,

 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js.js"></script>

#or 

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.min.js"></script>

 

There are several reasons why a CDN could benefit your website and company.

     

  • Different domains
  • Files may be pre-cached
  • High-capacity infrastructures
  • Distributed data centers
  • Built-in version control
  • Usage analytics
  • Boosts performance and saves money
  •  

 

CloudFlare is one of the most popular CDN, You may checkout this post of Installation & Configuration of TYPO3 at CloudFlare www.edge-cloud.net/2015/07/20/typo3-with-cloudflare/.


 

Tips #15: Reduce Number of TYPO3 Extensions

Deactivate all the TYPO3 extensions which are not necessary at your website.


 

Tips #16: Gzip Compression (.htaccess)

GZIP compression saves 50% to 80% bandwidth and will therefore significantly increase the website’s loading speed.

 

#.Htaccess

<FilesMatch "\.js\.gzip$">

AddType "text/javascript" .gzip

</FilesMatch>

<FilesMatch "\.css\.gzip$">

AddType "text/css" .gzip

</FilesMatch>

AddEncoding gzip .gzip


 

Tips #17: Leverage browser caching (.htaccess)

#.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"

 

FYI: From onwards TYPO3 7 already have this code at .htaccess file.


 

Tips #18: Disable Hotlinking and Leaching of Your Content

TYPO3-How-to-set-Hotlinking-at-Htaccess

 

#.Htaccess

#Let's disable hotlinking for images with either forbidden or providing custom image option

RewriteEngine on

RewriteCond %{HTTP_REFERER} !^$

RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yoursite.com [NC]

RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC]

RewriteRule \.(jpg|jpeg|png|gif)$ – [NC,F,L]


 

Tips #19: Enable Keep Live

#.Htaccess

Header set Connection keep-alive


 

Tips #20: Avoid 301 Redirections

Try to avoid 301 Redirections.


 

Tips #21: Fix 404 Errors

TYPO3-404-Error-Handling

 

Create one page with the title “404”, And setup below code at Install tool.

#typo3conf/LocalConfiguration.php;

$GLOBALS['TYPO3_CONF_VARS']['FE']['pageNotFound_handling'] = '/404/';


 

Tips #22: TTFB

TYPO3-TTFB

 

Time to first byte (TTFB) is the measurement of the responsiveness of a web server. Basically it is the time it takes your browser to start receiving information after it has requested it from the server. A website’s TTFB is calculated as:

HTTP request time + Process request time + HTTP response time


 

Tips #23: Combine Your Images Into One – CSS Sprites

TYPO3-CSS-Sprites

 

The idea of CSS sprites is pretty genius. For those of you who are unaware, a sprite is basically a set of multiple graphics compiled into one image. Read more at css-tricks.com/css-sprites/

Online tool to general CSS Sprites: csssprites.com


 

Tips #24: Async Javascript

Async allows the script to be downloaded in the background without blocking.

<script async src="foobar.js"></script>


 

Tips #25: Use Lazy Load For Videos & Images

Images: Lazy load images to improve site performance, load times and reduce server bandwidth by only loading images when they're visible. Eg., jquery.eisbehr.de/lazy/

Video: Speed up your site by replacing embedded Youtube and Vimeo videos with a clickable preview image. Visitors simply click on the image to play the video.


 

Tips #26: Prefetch and Preconnect

TYPO3-Pre-fetching

 

Prefetch

Prefetch Google Fonts:

<link rel="dns-prefetch" href="//fonts.googleapis.com">

Prefetch Google Code (jQuery)

<link rel="dns-prefetch" href="//ajax.googleapis.com">

Prefetch Google Analytics

<link rel="dns-prefetch" href="//www.google-analytics.com">

 

Preconnect allows the browser to set up early connections

<link href='https://cdn.keycdn.com' rel='preconnect' crossorigin>


 

Tip #27: Avoid to use TYPO3 EXT:indexed_search

Do not use indexed_search for searching web sites until it implements FULLTEXT indexing. FULLTEXT indexing should be faster than current way. But currently indexed_search is not suitable for sites with more than 100 pages. It is terribly slow and puts huge load on the TYPO3 database. Remove it and you will notice how the server load drops and performance of website increases.


 

Tip #28: Regularly Clean-up MySQL Database Caches & Temporary Files

 

1. Clear Cache Files

clear-caches.sh

#!/bin/sh

#clear all TYPO3 caches

#requires TYPO3 extension coreapi

set -e

 

rm -rf /var/www/site/htdocs/typo3temp/*

su -c "cd /var/www/site/htdocs && ./typo3/cli_dispatch.phpsh extbase cacheapi:clearsystemcache"\

   -s /bin/sh\

   www-data

su -c "cd /var/www/site/htdocs && ./typo3/cli_dispatch.phpsh extbase cacheapi:clearallcaches"\

   -s /bin/sh\

   www-data

 

2. Clear MySQL Cache Tables

clear_typo3_cache.sql

SET foreign_key_checks = 0;

TRUNCATE TABLE `cache_md5params`;

TRUNCATE TABLE `cache_treelist`;

TRUNCATE TABLE `cf_cache_hash`;

TRUNCATE TABLE `cf_cache_hash_tags`;

TRUNCATE TABLE `cf_cache_imagesizes`;

TRUNCATE TABLE `cf_cache_imagesizes_tags`;

TRUNCATE TABLE `cf_cache_pages`;

TRUNCATE TABLE `cf_cache_pagesection`;

TRUNCATE TABLE `cf_cache_pagesection_tags`;

TRUNCATE TABLE `cf_cache_pages_tags`;

TRUNCATE TABLE `cf_cache_rootline`;

TRUNCATE TABLE `cf_cache_rootline_tags`;

TRUNCATE TABLE `cf_extbase_datamapfactory_datamap`;

TRUNCATE TABLE `cf_extbase_datamapfactory_datamap_tags`;

TRUNCATE TABLE `cf_extbase_object`;

TRUNCATE TABLE `cf_extbase_object_tags`;

TRUNCATE TABLE `cf_extbase_reflection`;

TRUNCATE TABLE `cf_extbase_reflection_tags`;

TRUNCATE TABLE `cf_extbase_typo3dbbackend_queries`;

TRUNCATE TABLE `cf_extbase_typo3dbbackend_queries_tags`;

TRUNCATE TABLE `cf_extbase_typo3dbbackend_tablecolumns`;

TRUNCATE TABLE `cf_extbase_typo3dbbackend_tablecolumns_tags`;

TRUNCATE TABLE `cf_fluidcontent`;

TRUNCATE TABLE `cf_fluidcontent_tags`;

TRUNCATE TABLE `cf_flux`;

TRUNCATE TABLE `cf_flux_tags`;

TRUNCATE TABLE `cf_schemaker`;

TRUNCATE TABLE `cf_schemaker_tags`;

TRUNCATE TABLE `cf_vhs_main`;

TRUNCATE TABLE `cf_vhs_main_tags`;

TRUNCATE TABLE `cf_vhs_markdown`;

TRUNCATE TABLE `cf_vhs_markdown_tags`;

 

3. Clear Log History

clear_typo3_log_history.sql

SET foreign_key_checks = 0;

TRUNCATE TABLE `sys_history`;

TRUNCATE TABLE `sys_log`;

Note: Make sure, If you really wants ‘history’ of pages/content elements then do not touch sys_history table.

 

4. Clear RealURL Cache

clear_realurl_cache.sql

SET foreign_key_checks = 0;

TRUNCATE TABLE `tx_realurl_chashcache`;

TRUNCATE TABLE `tx_realurl_pathcache`;

TRUNCATE TABLE `tx_realurl_urldecodecache`;

TRUNCATE TABLE `tx_realurl_urlencodecache`;

 

Read more about MySQL Optimization at wiki.typo3.org/Performance_tuning


 

Tip #28: Server Optimization

TYPO3-Server-Optimization-Linux-Apache

 

1. PHP

PHP Configuration

memory_limit = 64M

upload_max_filesize = 100M

post_max_size = 100M

 

PHP Opcode Caching: wiki.typo3.org/Opcode_Cache

Install eAccelerator using the following minimal configuration for one(!) average website (in our case, the Quickstart package):

 

eaccelerator.shm_size="32"

eaccelerator.enable=1

 

2. MySQL Configuration

Adjust the caching parameter of your mysql Installation. Below general settings will help to get a performance boost

#Disable bin log

log-bin

 

#Switch on and increase query_cache

query_cache_limit = 2M #default was 1M

query_cache_size = 64M #default was 0

query_cache_type = 1

 

#Increase table_cache

table_cache = 256 #default was 64

 

#Increase key_buffer

key_buffer_size = 64M #default was 8M

 

3. Apache Settings

Adapt MaxClients to find a balance between performance and server capacity, a conservative start value is 32.

 

#Disable excessive logging

LogLevel warn

 

#Disable DNS lookups, your log file analyser can do this afterwards

HostNameLookups off


 

Tip #29: TYPO3 Source & General

     

  • If you are hosting more than one site, use the same source directory for all sites. eg., Using symlinks.
  • Make as many pages cacheable as possible.
  • Watch out for performance killer extensions from TER by constantly testing their impact on performance.
  • Custom extension should be developed using standards of TYPO3 Extbase/Fluid
  •  


 

Tip #30: Find your own Techniques

Generic tips, like the ones given above, are applicable to any server that runs TYPO3. However, by investing in a unique, customized server, you can add volumes to your website hosting strategies. It certainly pays back to watch how your server behaves at all times……And try out innovative ways of optimize the same!


 

Summary

Last but certainly not the least; remember to keep a close watch on your portal’s TYPO3 performance as “Optimization should not stop”. From choosing a good host and server to TYPO3 Configuration, front-end techniques, ways of implementing a CDN, database cleanups, server optimization, and more, there’s a lot that can be done to extract the best speed and performance from TYPO3 websites. Through this helpful post, we have strived to lay down the best ways to speed up TYPO3 and the many options it entails.

 

We would love to hear from you. Do share some other TYPO3 website speed enhancement strategies that we might have not mentioned here.

Leave A Comment