[TYPO3-english] Increase bootstrap speed performance

Dennis Hoffland d.o.hoffland at tele2.nl
Fri Mar 2 15:11:22 CET 2018


Hello,

I am using  the TYPO3 8.7.9 CMS with the Bootstrap Package (bootstrap_package, version 9.1.0).

Loading speed is an important aspect of website performance. 

Looking at the TS setup I noticed that bootstrap uses a lot of resources for page rendering:

    includeCSSLibs {
       googlewebfont = https://fonts.googleapis.com/css?family={$plugin.bootstrap_package.settings.less.google-webfont}:{$plugin.bootstrap_package.settings.less.google-webfont-weight}
      googlewebfont {
            external = 1
            disableCompression = 1
            excludeFromConcatenation = 1
        }
        ionicons = EXT:bootstrap_package/Resources/Public/Css/ionicons.min.css
    }

    includeCSS {
        # bootstrap will be included in the themes.less file
        # for standalone usage just uncomment the following line
        # bootstrap = EXT:bootstrap_package/Resources/Public/Less/Bootstrap/bootstrap.less
        theme = EXT:bootstrap_package/Resources/Public/Less/Theme/theme.less
    }

    includeJSLibs {
        modernizr = EXT:bootstrap_package/Resources/Public/JavaScript/Dist/modernizr.min.js
        modernizr.forceOnTop = 1
        modernizr.async = 1
    }

    includeJSFooterlibs {
        jquery = EXT:bootstrap_package/Resources/Public/JavaScript/Libs/jquery.min.js
        jquery.forceOnTop = 1
        responsiveimages = EXT:bootstrap_package/Resources/Public/JavaScript/Dist/jquery.responsiveimages.min.js
        bootstrap = EXT:bootstrap_package/Resources/Public/JavaScript/Libs/bootstrap.min.js
        photoswipe_core = EXT:bootstrap_package/Resources/Public/JavaScript/Libs/photoswipe.min.js
        photoswipe_ui = EXT:bootstrap_package/Resources/Public/JavaScript/Libs/photoswipe-ui-default.min.js

        #### Add swipe support for boostrap components
        hammerjs = EXT:bootstrap_package/Resources/Public/JavaScript/Libs/hammer.min.js
        bootstrap_swipe = EXT:bootstrap_package/Resources/Public/JavaScript/Dist/bootstrap.swipe.min.js
        bootstrap_popover = EXT:bootstrap_package/Resources/Public/JavaScript/Dist/bootstrap.popover.min.js
        bootstrap_stickyheader = EXT:bootstrap_package/Resources/Public/JavaScript/Dist/bootstrap.stickyheader.min.js
        bootstrap_smoothscroll = EXT:bootstrap_package/Resources/Public/JavaScript/Dist/bootstrap.smoothscroll.min.js
        #### Basic lightbox implementation for bootstrap
        bootstrap_lightbox = EXT:bootstrap_package/Resources/Public/JavaScript/Dist/bootstrap.lightbox.min.js
        #### Toggle collapsed CSS class on the navbar toggle button and fixes dropdown on touch devices
        bootstrap_navbar = EXT:bootstrap_package/Resources/Public/JavaScript/Dist/bootstrap.navbar.min.js
    }

    jsFooterInline {
        # Google Analytics
        10 = COA
        10 {
            if {
                isTrue = {$page.tracking.google.trackingID}
            }
            10 = TEXT
            10.value (
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
    ga('create', '{$page.tracking.google.trackingID}', 'auto');
            )
            20 = TEXT
            20 {
                if {
                    isTrue = {$page.tracking.google.anonymizeIp}
                }

                value (

    ga('set', 'anonymizeIp', true);
                )
            }

            90 = TEXT
            90.value (

    ga('send', 'pageview');
            )
        }
    }
}

I assume tthat a few of those can safely be discarded to increase speed, without jeopardizing the looks and functionality of my website (?).

Who has some tips to optimize the bootstrap_package for loading speed?

Kind regards,

Dennis

P.S. According to  https://developers.google.com/speed/pagespeed/insights/ my mobile version is rendered a lot slower than the desktop version. Any thoughts if this is common issue?


More information about the TYPO3-english mailing list