Tips and Tricks for Lean and Fast Websites
For an optimal browsing experience, performance matters: a website should load as quickly as possible, because nothing is more annoying than long waiting times. Load time is even a ranking factor for a page and a prerequisite for online shops to achieve any sales at all. Speed can now be measured with "Google Analytics". Here's how developers can speed up a website.
1. Clean code
Unfortunately, this isn't as common as one might expect. Yet clean code is the foundation for optimization.
2. CSS instead of graphics
Unnecessarily heavy graphics for gradients can be replaced with corresponding HTML/CSS. This saves load time and makes later corrections easier.
3. Trim it down, trim it down, trim it down
Every piece of JavaScript adds to the load time. Some plug-ins are so poorly programmed that the files even load multiple times. The death of a performant website. Tip: only use JavaScript when it's worthwhile for the desired feature.
4. Move HTML/CSS and JavaScript files to external files
Externalized JavaScript files can speed up the website. When a webpage loads, all files are opened, read and processed one after another. With external files, several local files can be loaded at the same time.
5. Load JavaScript in the footer of the page
If the JavaScript code sits in the lower part of the webpage, the visitor first sees the whole website while the scripts load in the background.
Example: the command "config.moveJsFromHeaderToFooter = 1" moves JavaScript to the footer.
6. TYPO3 updates
A TYPO3 website should always be kept up to date. Constant updates contribute to performance. PHP 7, for example, needs less memory than PHP 5.6 and can answer more requests at the same time. It also closes security vulnerabilities.
7. Enable TYPO3 cache
By enabling the caching system, the entire website is cached and can be delivered quickly from the cache.
8. Image optimization
Anyone using large image files causes slow pages. In that case it's advisable to compress the images and save them as JPG files. JPG is a format with one of the highest compression rates.
9. Reduce HTTP requests
With every CSS or JavaScript file, the client has to send a request to the server. If the server is overloaded with requests, it becomes slower. Fewer requests mean shorter load times.
10. Merge CSS with JavaScript
Using a specific TypoScript setting, you can merge CSS and JavaScript files:
config.concatenateJsAndCss = 1 - your page will be faster.
11. Slim down TYPO3 extensions
You should disable extensions you don't need. Because each of these extensions can slow down your system. Maintaining and caring for extensions is also advisable.
12. GZIP compression
With GZIP compression you save 50 to 80% of bandwidth. This increases the loading speed of the TYPO3 website. Compression can be enabled via the .htaccess file of the Apache web server.
13. Get rid of unnecessary bulk
Remove whitespace, comments and line breaks from the code. This too makes the code leaner. This has a favorable effect on load time, but unfortunately a rather unfavorable one on readability. This "minifying" can be done with the tools "Uglify" for JavaScript and "Cssnano" for CSS.
14. Minimize log data
Logs record warnings, error messages and other data, but they cost performance. Disabling certain functions can increase the speed of the website. However, keep in mind that this can also make troubleshooting more complicated
15. Pro tip: bring a professional on board
Of course, we can implement all these tips and more for your website as well. We optimize all the necessary areas for you to make your website lean and high-performing. Just get in touch with us!