TYPO3 and Google Lighthouse FTUG

1 / 58
TYPO3
&
Google Lighthouse
by markus@timtner.de
TYPO3 Summer BBQ @Browserwerk
2018-08-08

Markus Timtner TYPO3 Summer BBQ @Browserwerk 2 / 58
● Warum ich heute hier Lighthouse vorstelle
● Was macht eine performante Website überhaupt aus?
● … Und wie lässt sich das mit TYPO3 umsetzen?!

● markus@timtner.de
● selbständiger IT-Berater und Software-Entwickler
● TYPO3 seit 2003

● Since July 2018, Speed is now a landing page factor for
Google Search and Ads.
https://developers.google.com/web/updates/2018/07/search-ads-speed
https://searchengineland.com/google-speed-update-is-now-being-released-to-all-users-301657
https://www.searchenginejournal.com/google-introduces-the-mobile-speed-score-grading-pages-on-a-10-point-scale/261005/
● SEO Agencies are now calling Site Owners / Customers
and talk to them about their low Performance score in
Lighthouse (spreading some FUD)

Google Lighthouse
https://developers.google.com/web/tools/lighthouse/

Google Lighthouse
● "Pagespeed is dead"
"(We need) more meaningful metrics"
https://thirtybees.com/blog/pagespeed-is-dead/
● "Google Lighthouse Audit is Changing the SEO Game"
https://www.thehoth.com/blog/google-lighthouse-audit-works/

Google Lighthouse
● "This is the frst time, in a long time, that web developers
are getting an upper hand on SEO."
"The Google Lighthouse audit is taking a lot of the
guesswork out of web development and performance."
https://www.thehoth.com/blog/google-lighthouse-audit-works/

Google Lighthouse
● in Chrome DevTools since Chrome 60 (ca. 2017-07)
● standalone als CLI-Tool
[ npm i -g lighthouse ]
● GitHub/Travis/CI integration
● Note to self:
use lighthouse only in incognito mode or from CLI
[lighthouse --quiet --view --chrome-flags="--headless" [url] ]
● the --chrome-flags="--headless" mode in CLI
seems to work now!
https://github.com/GoogleChrome/lighthouse/issues/2675#issuecomment-350799018

Google Lighthouse

Google Lighthouse
● What is Lighthouse, and How It Works
When running tests, Lighthouse by default runs from a cold cache (no fles in cache),
emulating 3G networks speeds and average mobile device hardware by throttling the
network and slowing down the CPU by 4x from the machine's default speed. The reason
this is done is to attempt to emulate real-world browsing conditions for users on
average mobile hardware (slow networks, slow hardware, small and likely fushed
caches); the fastest growing, and in many areas, largest demographic of Internet users.
https://snugug.com/musings/lighthouse-web-performance-architecture-and-you/

Google Lighthouse
There are fve main audits that lighthouse will perform
during an audit:
● Accessibility
● Best practices
● SEO
● PWA
● Performance

Google Lighthouse
Accessibility
„This section covers how easy it is for people to use your site (or
web app). It’s more of an extension of previous Google WebDev
tools, e.g. measuring when buttons are too close together.“
https://www.harvestdigital.com/blog/news/using-google-lighthouse-page-speed/

Google Lighthouse
Best Practices
„This section covers what Google refers to as ‘recommendations for
modernizing your web app and avoiding performance pitfalls’.
Some of the audits here are useful but don’t get too hung up on
the score here.“

Google Lighthouse
SEO
„The SEO section is a new feature and is still incredibly basic. It
features 10 basic SEO audits, including whether the page has a
title.“
„If you’re not scoring 100 on this section already,
I’m (a little) worried for you!“

Google Lighthouse
PWA ( Progressive Web App ) Howto:
1)Create a Web App Manifest and Icons
2)Add meta tags
3)Create a Pre-cache Service Worker
4)Register the Service Worker
5)Glue all together
Examples: https://pwa.rocks/

Google Lighthouse
PWA ( Progressive Web App )
● Pros:
✔ installable such a native app
✔ fully working offine
https://alexjoverm.github.io/2017/08/07/How-I-made-a-Progressive-Web-App-out-of-my-Blog/
https://14islands.com/blog/2017/01/19/progressive-web-app-from-scratch/
https://www.linkedin.com/pulse/pwa-100-lighthouse-score-luiz-felipe
https://medium.freecodecamp.org/how-to-crank-your-progressive-web-apps-google-lighthouse-score-up-to-100-cfc053eb7661
● Cons:
✗ Extra effort for development and testing

Google Lighthouse
Performance
● Performance metrics. What’s this all about?
● Can improve user experience
● Bring more users to the application
● Increase benefts for product owners
(users, customers, money)

Google Lighthouse
Performance
1)“Is it happening?”
2)“Is it useful?”
3)“Is it usable?”
4)“Is it delightful?”

Google Lighthouse
Performance
1) “Is it happening?”
Has my navigation started successfully
(the server has responded, etc.)?

Google Lighthouse
Performance
2) “Is it useful?”
Has the page painted enough critical content
that I could engage with it?

Google Lighthouse
Performance
3) “Is it usable?”
Can I actually engage with the page or is it still busy?

Google Lighthouse
Performance
4) “Is it delightful?”
Was I pleasantly surprised by the lack of scrolling jank,
animation jank, FOUC, slow webfonts, etc?

Google Lighthouse
Performance
Timeline trace of typo3.org measured using ChromeDevTools

Google Lighthouse
Performance
1)“Is it happening?” First Contentful Paint (FCP)→
2)“Is it useful?” First Meaningful Paint (FMP)→
3)“Is it usable?” Time to Interactive (TT*I)→
4)“Is it delightful?” Visually Complete / Speed Index→

Google Lighthouse
DEMO TIME
● https://www.google.de/
● https://www.amazon.de/
● https://typo3.org/
● https://typo3.com/

Google Lighthouse

Google Lighthouse
DEMO TIME – Best Practice
● https://shop.polymer-project.org/
● https://page-load-speed-demo.frebaseapp.com/pageload0.html
● https://trends.now.sh/

Google Lighthouse

All right, give me the performance!
Bad News!
● Getting a good performance score
doesn‘t start with TYPO3
:/
● Aaand, it doesn‘t end with it
:‘(
● BUT: TYPO3 is a magnifcient tool to reach good scores.
Fast!
:D
● More on that in an instant

Performance
Why performance is a big deal
● 1. Economics and The Competition
● 2. User/Customer Experience + Brand Equity
● 3. Technical Hygiene
https://blog.prototypr.io/getting-up-to-speed-with-high-performance-web-58b740042892

Performance
Some core tenets of web performance
● The best code is no code !
● Content is king
● Less is more
● If a computer can do it, let the computer do it
● There is no one-size solution
● Use optimizations already provided through browsers
● Aim for no lower than IE11 support

Performance
Understanding Web Performance and Where to Optimize
1KB JS > 1KB Images > 1KB CSS > 1KB HTML

Performance
Practical performance work
● unblock rendering so content can be seen faster
(the so-called Critical Rendering Path or Above-the-Fold content)
● request the least number of assets possible.
● the assets should be as small as possible.
● receive multiple assets at the same time
(if possible).
● only request what is needed right now.
https://blog.prototypr.io/getting-up-to-speed-with-high-performance-web-58b740042892

Performance
● Set up a performance budget!
http://www.performancebudget.io/
http://bradfrost.com/blog/post/performance-budget-builder/
● Complete the Front-End Checklist.
https://frontendchecklist.io/
https://www.smashingmagazine.com/2018/01/front-end-performance-checklist-2018-pdf-pages/

Performance
Critical Rendering Path (CRP)
1)Minimize the number of critical resources
2)Minimize the number of critical bytes
3)Minimize the critical path length
https://blog.stackpath.com/glossary/critical-rendering-path
● Hardcore: Using the Paint Timing API
https://css-tricks.com/paint-timing-api/

Performance
On the horizon: The PRPL pattern
● P ush - R ender - P re-Cache - L azy load
https://developers.google.com/web/fundamentals/performance/prpl-pattern
● For most real-world projects, its frankly too early to
realize the PRPL vision in its purest, most complete form
● but its defnitely not too early to adopt the mindset

Performance
Available Today: Finite State Machines
● Finite State Machine logic might reduce the overall
amount of code in your application
● And might help you already during
concept and design stage of your project
● Very inspiring entrypoint is this article from Vince Shao:
„How to design UI states and communicate effectively
with developers using the Finite State Machine table“
https://medium.freecodecamp.org/designing-ui-states-and-communicate-with-developers-effectively-by-fsm-fb420ca53215

Performance
Finite State Machines > Combinational Logic
● The current „hot fuzz“ in webdev
https://www.smashingmagazine.com/2018/01/rise-state-machines/
● But the concept is actually much older than the web
https://en.wikipedia.org/wiki/Automata_theory
Warren McCulloch and Walter Pitts, two neurophysiologists, were the frst to present a description of fnite automata in 1943 (!)
https://cs.stanford.edu/people/eroberts/courses/soco/projects/2004-05/automata-theory/basics.html
● Takeaway for now:
Do not think in transitions,
Think in States!

Performance
Some more FSM Background Intel
● (Automata Theory)
https://hackernoon.com/upgrade-your-react-ui-with-state-machines-30d1298e90be
● Understanding State Machines
https://medium.freecodecamp.org/state-machines-basics-of-computer-science-d42855debc66
● Finite-state machine in web-development
https://blog.4xxi.com/fnite-state-machine-in-web-development-dc1dc6f67d7c
● How to design UI states and communicate effectively
with developers using the Finite State Machine table
https://medium.freecodecamp.org/designing-ui-states-and-communicate-with-developers-effectively-by-fsm-fb420ca53215
● Set up Web applications as fnite state machines
https://www.techrepublic.com/article/set-up-web-applications-as-fnite-state-machines/

Performance
Remarks:
● Performance is easy to overthink,
so don’t make it harder than it is (it’s not so hard).
● Performance is easier to work with
if there are clear targets.
● Performance cannot be a one-man show,
at least for long.

Performance … and TYPO3
Finally :)

The top 4 things you should do right now
● Do a round of thorough testing with at least 3 different
tools before doing anything
https://developers.google.com/web/tools/lighthouse/
https://gtmetrix.com/
https://www.webpagetest.org/
https://www.sitespeed.io/
https://sonarwhal.com/
https://tools.pingdom.com/
● Add defer (to your own fles) and async (to external fles)
● Optimize your images
● Serve exclusively from HTTPS, and use HTTP2

● Optimize Images.
● Optimize Images!
● OPTIMIZE IMAGES!!
SRSLY.
● Author's choice: RIOT (win only, sorry guys 8)
http://luci.criosweb.ro/riot/
● quite current list (for the rest):
https://cssauthor.com/image-optimization-tools/

Lazyload Images
● Author's choice: B-Lazy
http://dinbror.dk/blog/blazy/
● Overview:
http://blog.dynamicdrive.com/5-brilliant-ways-to-lazy-load-images-for-faster-page-loads/
● Some tweaks to FE-fuid templates necessary.

TYPO3 Performance Quick Win:
● if your server supports it
(most of them do, nowadays)
https://http2.akamai.com/demo
● EXT:http2_push
https://extensions.typo3.org/extension/http2_push/
● Instant 30+ Score gain!

typoscript setup tweaks:
config {
doctype = html5
xmlprologue = none
metaCharset = utf-8
# a little housekeeping...
removeDefaultJS = 1
inlineStyle2TempFile = 0
disablePrefixComment = 1
disableImgBorderAttr = 1
# TYPO3 Compression
compressCss = {$compress}
concatenateCss = {$concatenate}
compressJs = {$compress}
concatenateJs = {$concatenate}
pageRendererTemplateFile = {$path2template}/PageRenderer.html
}

###XMLPROLOG_DOCTYPE###
###HTMLTAG###
###HEADTAG###
###METACHARSET###
###INLINECOMMENT###
###BASEURL###
###SHORTCUT###
###TITLE###
###META###
###CSS_LIBS###
###CSS_INCLUDE###
###CSS_INLINE###
###JS_LIBS###
###JS_INCLUDE###
###JS_INLINE###
###HEADERDATA###

</head>
###BODY###
###JS_LIBS_FOOTER###
###JS_INCLUDE_FOOTER###
###JS_INLINE_FOOTER###
###FOOTERDATA###
</body>
</html>
###XMLPROLOG_DOCTYPE###
###HTMLTAG###
###HEADTAG###
###METACHARSET###
###INLINECOMMENT###
###BASEURL###
###SHORTCUT###
###TITLE###
###META###
###CSS_INLINE###
###JS_LIBS###
###JS_INCLUDE###
###JS_INLINE###
###HEADERDATA###
</head>
###BODY###
###CSS_LIBS###
###CSS_INCLUDE###
###JS_LIBS_FOOTER###
###JS_INCLUDE_FOOTER###
###JS_INLINE_FOOTER###
###FOOTERDATA###
</body>
</html>
Default fle (found here, btw):
typo3/sysext/core/Resources/Private/Templates/PageRenderer.html
Custom fle for my setup:

Typoscript setup tweaks contd.
page.includeJS {
blazy = {$path2template}js/libs/blazy.min.js
whateverLocal = {$path2template}js/whatever.js
whateverLocal {
defer = 1
excludeFromConcatenation = 1
}
whateverExternal = //somewhere.com/whatever.js
whateverExternal {
async = 1
external = 1
excludeFromConcatenation = 1
}
}

Responsive Images
●
Still need an extension to work in a convenient way :/
● IMG-Tag with srcset
● IMG-Tag with data-Attributes
● Picture-Tag with Source-Childs
https://techblog.sitegeist.de/responsive-images-with-typo3-8-7/
https://typo3worx.eu/2016/03/responsive-images-on-typo3-websites/
https://ueberdosis.io/artikel/responsive-images-mit-typo3-7-6-und-fuid-styled-content
● responsive images im TER
https://extensions.typo3.org/?tx_solr%5Bq%5D=responsive+images&tx_solr%5Bflter%5D%5B0%5D=tags%3Aresponsive&tx_solr%
5Bflter%5D%5B1%5D=typo3%3A8+LTS

● Stop Using jQuery…
…when you don’t need to. If you use jQuery mostly for
DOM traversal, you should defnitely get rid of it.
http://youmightnotneedjquery.com/
● NO Bootstrap! Because it depends on jQuery.
Author‘s Choice: semantic ui
https://semantic-ui.com/
https://github.com/morganbarrett/Vanilla-Semantic-UI
● Transition to (plain|pure|vanilla) Javascript instead!
https://devhints.io/es6

● DEMO, or it didn‘t happen ;)

Thank you!
<3

Changelog
[2018-08-09]
● Fixed some typos
● Small styling touchups
● Added browser images for demo slides
● Fixed the pagerenderer varialbe (thx, GS ;)
● Added links for online testing tools (thx, MS !)
● Added some links to the nojquery-slide
● Added a slide to the FSM section to add some more explanation
● Added the PageRenderer Files

TYPO3 and Google Lighthouse FTUG

Recomendados

Recomendados

Mais conteúdo relacionado

Último

Último (20)

Destaque

Destaque (20)

TYPO3 and Google Lighthouse FTUG