Get your Typo3 Website to Maximum Speed on Google Pagespeed Insights

... and make it super fast, performant and well structured, too

    •  » 
    •  » How to get a Typo3 Website to 100/100 on Google Pagespeed Insights
// navigation

Blog


// content

How to get 100% on Google Pagespeed Insights and make your Typo3 website really fast

Use caching from the browser and server

Use caching for all resources, especially Javascript and cascading stylesheets. This is done on the one hand via the .htaccess file (Apache web server). On the other hand, content management systems such as Typo3 offer the possibility to cache resources. This is already active by default and the cache can be emptied, for example, via the flash icons in the upper bar of your backend. Use this cache flushing only when it is really needed and preferably only for individual pages instead of globally. The emptying of a cache for individual pages can be found in the page module by clicking on the corresponding page at the top right (also a lightning symbol).

Example entry of a .htaccess file:

# turns cache on for 1 month
<IfModule mod_expires.c>
 ExpiresActive On
 ExpiresByType text/css "access plus 1 month"
 ExpiresByType text/javascript "access plus 1 month"
 ExpiresByType text/html "access plus 1 month"
 ExpiresByType application/javascript "access plus 1 month"
 ExpiresByType image/gif "access plus 1 month"
 ExpiresByType image/jpeg "access plus 1 month"
 ExpiresByType image/png "access plus 1 month"
 ExpiresByType image/x-icon "access plus 1 month"
</IfModule>
<ifmodule mod_headers.c>
 <filesmatch "\\.(ico|jpe?g|png|gif|swf)$">
  Header set Cache-Control "max-age=2592000, public"
 </filesmatch>
 <filesmatch "\\.(css)$">
  Header set Cache-Control "max-age=604800, public"
 </filesmatch>
 <filesmatch "\\.(js)$">
  Header set Cache-Control "max-age=216000, private"
 </filesmatch>
</ifmodule>
 

Cache external resources and change expiration date

For example, to properly cache Google Analytics and its Javascript library ga_analytics.js and gtm.js, you can easily download these libraries with PHP:

public function execute () {
    $ ganalytics = file_get_contents ('https://www.google-analytics.com/analytics.js');
    file_put_contents ($ this-> analyticsDir.'analytics.js', $ ganalytics);
    $ gtm = file_get_contents ('https://www.googletagmanager.com/gtm.js?id=GTM-N37X92M');
    // Replace the resource of analytics.js with a local one
    $ gtm = str_replace ('www.google-analytics.com/', 'www.IHREDOMAIN.tld / typo3conf / ext / YOUREXTENSIONKEY / Resources / Public / js /', $ gtm);
    file_put_contents ($ this-> analyticsDir.'gtm.js', $ gtm);


    // $ logMessage = 'Class:'. get_class ($ this). ', UID:'. $ this-> getTaskUid (). '(message: pulled resources successfully)';
    $ logMessage = "Analytics pulled successfully";
    $ This- & gt; scheduler & gt; log ($ logMessage);


    return true;
}

The snippet above shows a function in a controller, which uses the Scheduler incl. Cronjob to download the two JS files every 15 minutes and in gtm.js exchanges the resource for ga_analytics.js with the local one and then saves this file. After that, all you need to do is refer to the local gtm.js in your Analytics snippet, and Google Pagespeed Insights will no longer report an error if you've set up a browser for all JS files on your server.

Use the compression with gzip

To compress resources on the fly, you can also enable server-side compression in your .htaccess file if you have the gzip module installed. If this is missing, please ask your hoster or server administrator. You should definitely have it installed.
Here are the settings of the htaccess file for resource compression:

# Deflate Compression by FileType
<IfModule mod_deflate.c>
 AddOutputFilterByType DEFLATE text/plain
 AddOutputFilterByType DEFLATE text/html
 AddOutputFilterByType DEFLATE text/xml
 AddOutputFilterByType DEFLATE text/css
 AddOutputFilterByType DEFLATE text/javascript
 AddOutputFilterByType DEFLATE application/xml
 AddOutputFilterByType DEFLATE application/xhtml+xml
 AddOutputFilterByType DEFLATE application/rss+xml
 AddOutputFilterByType DEFLATE application/atom_xml
 AddOutputFilterByType DEFLATE application/javascript
 AddOutputFilterByType DEFLATE application/x-javascript
 AddOutputFilterByType DEFLATE application/x-shockwave-flash
</IfModule>

As you can see, you can specify the compression for each file type individually. Of course it depends on your system what you compress, but in general, the more, the better.

CSS offload and properly prioritize

The hardest thing is to have a neat and tidy CSS. Google recommends dividing it into "above the fold" and "below the fold". In the end, this means nothing more than putting the entire visible CSS into one file, and then everything else that comes after that. The best way to determine the visible area is to use the responsive view of Chrome Developer Tools. If you select all the devices you want to support, the visible area is exactly what you see without scrolling down the Y-axis (most web pages do not use X-axis scrolling anymore, but this would be the same) .

In this case, it would be possible, for example, to put the header and the first content elements and their layout in one file and everything else into a second one. Whether you want to load the typography (the layout of your font) immediately or it will be reloaded as soon as the DOM is finished, it is up to you. The less you put in the first file - the slimmer it is - the better.

The biggest CSS trick - load in the footer

To really get the maximum value, you can also load your entire CSS in the footer. Although this leads to the fact that your page almost does not have a stylesheet when loading and therefore looks strange, but bots like Google or tools like page-speed insights are of little interest. And on the other hand, users without a fully loaded page can not act with it anyway; for example, scrolling is blocked, etc.

To do this, e.g. in Typo3, proceed as follows:

Go to your DefaultTemplate.html

Add the following code at the very end before closing the last item:

link rel="stylesheet" type="text/css" href="/typo3conf/ext/IHREXTKEY/Resources/Public/sass/dist/style.min.css?v=1.0.1" media="all"

Now you can build a grunt job that writes all resources into this file and then control the caching of the resource using parameter v = 1.0.1. So whenever you've made important changes, turn up the version number (v = 1.0.2, v = 1.0.3, v = 2.0.0 etc).

Of course you can also work with footerData. If you do not have a Gruntjob or similar or you are too inexperienced, you can also download the minified resource from Typo3, save it in the project, and include it manually.

Remember to remove the originally loaded resource from Typo3, otherwise it will double load!

Optimize images

Use tools like kraken.io or Google to optimize your images. If you e.g. Using the Pagespeed Insights, you can download your compressed resources (Images, Javascript, CSS) at the bottom of the page. This is also useful for the previous section to minimize the CSS. In general, use only the resolution for images that you also display on the Web. A 4k image does not use anything if your website has a maximum width of 1024px. Also note framework classes such as bootstrap, which may only ever show your image in half the width. If this is the case, it should definitely satisfy your picture in max. 960px width saving (1920px for Full HD monitors and 50% of them, since you will never see your picture larger).

Use webp - the new standard format for images on the web. For example, CloudFlare offers you an easy way to convert all images as webp and deliver them on the fly. The whole thing is not cheap, but it also offers additional security features and backup options. Or you simply use a Typo3 extension to convert the images into webp.

Load javascript asynchronously and in the footer

For javascript many of the sections are already valid (caching, CSS minimize) and also here you should always load javascript in the footer. You can do this with Typo3 using includeJSFooterLibs or with page.footerData - always make sure that your JS is still working. An asynchronous loading is recommended as well, just write it in the block async to the end, but also applies here: first test whether everything works. If e.g. jQuery must be loaded first, then you should first integrate this into your collected JS library. For this, Grunt is ideal because you can determine exactly what and where to load.

Use extensions like static_file_cache

There are many extensions or plugins for Typo3 that can speed up your website. Here is a small list of the best enhancements to improve your performance:

  • EXT: staticfilecache - lochmueller / staticfilecache on Packagist - version of Typo3: 8.7 or higher
    Creates static HTML files that can load faster and still be reachable in case of problems with your Typo3 (good reliability)
  • EXT: min - instituteweb / min on Packagist - version of Typo3: 8.7+
    Compresses your assets better than Typo3 standard and compresses your HTML code
  • EXT: bootstrap_package - bk2k / bootstrap-package on Packagist.org & nbsp; - Version of Typo3: 8.7 or higher
    This is not an extension, but a complete theme based on the CSS and JS Framework bootstrap. Intelligent lazy loading and good architecture make it ideal for quickly and easily building high performance web pages.

    General tips and tricks on the performance of your website

    Download as few files as possible

    For example, you can use sprite maps for frequently used icons. All CSS files can be packed in one (use Grunt or Typo3 concatenate). Each file represents an HTTP request that requires extra time.

    Take advantage of the latest technology (Typo3 v8, PHP7, MYSQL etc.)

    Each new version of PHP provides about 20% performance boost for your website. So always use the highest version supported by your application. It also makes sense to use http2 or SPDY to deliver the pages, since they allow more parallel requests and thus can deliver the pages faster.

    Purify unnecessary code

    Remove HTML comments and try not to box things unnecessarily often if they do not have to. Each byte you deliver takes time and can affect your performance accordingly. Even database queries that take too long should urgently be cleaned up. Rather, rebuild your database instead of running over 20 joins and preg_replaces to get a content item from the DB.

    The right hosting is crucial

    Go to the cloud! If Google Pagespeed Insights complains about your site because the response time of the server is too high, it's mostly hosting. If you e.g. For comparison, install an empty Typo3 system in the latest version with the latest PHP and Google already here the response time muckiert, it is time to question your hosting. We recommend Amazon AWS Hosting here. With a relatively lean side that has been excellently optimized, you are quickly in the top 3% in terms of performance: lightningsoul.de

    Test Tools and pages we recommend:

    Pingdom

    Google Pagespeed Insights

    Web Page Check

    Or you can simply use your browser developer tools network or the audit tools of Google's Chrome browser

Pingdom result for Renoi.de - faster than 98% of all websites worldwide

Rating: 4.7. 3 vote(s).
3 anonymous votes
No rating done at all.
Your vote was '' (0 of 5) You are an anonymous user.
You may log on to do personalized votings
Click the rating bar to rate this item Please log on to do ratings

Comments

comments powered by Disqus