Make Your TYPO3 Web Sites Fly

Make Your Web Sites FlyJochen Weiland

Freitag, 15. Juni 12

Jochen Weiland

• TYPO3 since 2002

• Member Security Team

• Member BCC

• jweiland.net

Why Speed Matters

• User experience

• Increased use of mobile platforms

• Fast sites sell better

• Fast sites rank better

Google Webmaster ToolsLabs - Site Performance

What do do?

• Analyze!

• Optimize!

• Test!

Example

Analyze!

• Firebug

• Chrome Developer Tools

• YSlow!

• Google Page Speed

Request/Response Headers

YSlow! - Grade

YSlow! - Components

YSlow! Components Detail

YSlow! - Statistics

Chrome Developer Tools

Let's Start Optimizing!

1. Compress with gzip

Enable in Install Tool

.htaccess File

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

That saved 5%...so what?

Let's add some TypoScript

config.compressJs = 1config.compressCss = 1

*requires TYPO3 4.6 or higher

57% less

2. Use cookieless domains

Cookie is sent with every request

Ext: ja_replacerconfig.tx_ja_replacer.search { 10="/typo3temp/ 11="typo3temp/ 12="/fileadmin/ 13="fileadmin/ 14="/typo3conf/ 15="typo3conf/}

tx_ja_replacer.unsecure = COAtx_ja_replacer.unsecure { 10="http://static.typo3-workshop.net/typo3temp/ 11="http://static.typo3-workshop.net/typo3temp/ 12="http://static.typo3-workshop.net/fileadmin/ 13="http://static.typo3-workshop.net/fileadmin/ 14="http://static.typo3-workshop.net/typo3conf/ 15="http://static.typo3-workshop.net/typo3conf/}

config.tx_ja_replacer.replace < tx_ja_replacer.unsecure

No cookies anymore

3. Use Browser Cache

.htaccess:

ExpiresActive OnExpiresDefault "access plus 31 days"

ExpiresByType application/javascript A900ExpiresByType application/x-javascript A900ExpiresByType text/javascript A900ExpiresByType text/html A1800ExpiresByType text/xml A90ExpiresByType text/css A900ExpiresByType text/plain A90ExpiresByType image/gif A604800ExpiresByType image/jpg A604800ExpiresByType image/jpeg A604800ExpiresByType image/png A604800ExpiresByType image/bmp A604800ExpiresByType application/x-shockwave-flash A604800

config.sendCacheHeaders = 1

4. Use Sprites

sprites.pngOne Image File with 17 Symbols

article ul.csc-menu li { margin-left: 0.5em; padding-left: 1.75em; margin-bottom:0.5em; font-size: 1em; line-height: 1.25em;

before:

background: url(../img/icon-arrow-down.png) 0 0.3em no-repeat;

after:

background: url(../img/sprites.png) -20px -95px no-repeat;}

From 19 to 12 image request

5. Use a CDN

Using a CDN

• Webserver located in Munich, Germany

• Static files stored on Amazon S3 in Irelandat http://jweilandawstest.s3-website-eu-west-1.amazonaws.com/

• Amazon CloudFront for worldwide distribution

config.tx_ja_replacer.search { 10="/typo3temp/ 11="typo3temp/ 12="/fileadmin/default/templates/ 13="fileadmin/default/templates/ 14="/typo3conf/ 15="typo3conf/ 16="/uploads/ 17="uploads/}

tx_ja_replacer.http = COAtx_ja_replacer.http { 10="http://static.typo3-workshop.net/typo3temp/ 11="http://static.typo3-workshop.net/typo3temp/ 12="http://cdn.typo3-workshop.net/cdn/fileadmin/default/templates/ 13="http://cdn.typo3-workshop.net/cdn/fileadmin/default/templates/ 14="http://static.typo3-workshop.net/typo3conf/ 15="http://static.typo3-workshop.net/typo3conf/ 16="http://cdn.typo3-workshop.net/cdn/uploads/ 17="http://cdn.typo3-workshop.net/cdn/uploads/}

config.tx_ja_replacer.replace < tx_ja_replacer.http

Using a CDN

Before:

After:

Before:

After:

Before:

After:

Chrome Timeline

Make Your TYPO3 Web Sites Fly

Technology

Transcript of Make Your TYPO3 Web Sites Fly

Newsletter using TYPO3

TYPO3 Congres 2012 - Test-Driven Development binnen TYPO3 Flow en Neos

GENERAL MEETING INLAND EMPIRE FLY FISHING CLUB …kamloopsflyfishers.org/sites/default/files/attachements/The Fly Leaf... · Inland Empire Fly Fishing Club—Spokane, Washington FLY

Fluid powered TYPO3

Typo3 Tutorial

TYPO3 47 release

Typo3 API Handbuch

Build digital relationships with TYPO3 Neos – TYPO3 Congres in Amsterdam

TYPO3 Government Package

TYPO3 and CMIS

TYPO3 Inc. slides for TYPO3 Camp Venlo 2016

Presentation has Typo3

T3CON14EU: Migrating from TYPO3 CMS to TYPO3 Flow

Architecture & TYPO3

T3CON12-DE The New TYPO3 Association and the TYPO3 Universe

TYPO3 Training I

Apache Solr for TYPO3 at TYPO3 Usergroup Day Netherlands

TYPO3 Infrastructure

GENERAL MEETING INLAND EMPIRE FLY FISHING CLUB …kamloopsflyfishers.org/sites/default/files/attachements/The Fly Leaf... · Fly Fisherman Magazine, Catch Magazine, Fly Fishing Film

Typo3 themes