Skip to main content

Website Performance Optimization #WebsiteDevelopment #performance

Category: IT-Stuff
it-stuff

I've spent a lot of time in improving my website's performance. Somehow I've made it down to about 120ms to completely render the page with Google Chrome. In this post I would like to explain what I've done exactly.

pageload

1. Update to PHP 7
With the release of Debian 9 "Stretch" in June 2017 I've decided immediately to update my server's OS. The update involved the migration to PHP 7 leading to a significant boost of performance: https://www.phpclasses.org/blog/post/493-php-performance-evolution.html

2. Activation of OPcache
As shown here the activation of OPcache will result in a considerable decrease of script's response times.

3. Enabling of HTTP/2
HTTP/2 will handle requests and responses more efficiently especially because of Multiplexing and Header Compression: https://www.advancedwebranking.com/blog/beginners-guide-to-http2/

4. Gzip-Compression
Reduce the size of files sent from your server to increase the speed to which they are transferred to the browser: https://varvy.com/pagespeed/enable-compression.html

5. Request reduction

5.1 Browser Cache Control
Setting expiration periods for web content enables web browsers to cache content for specific periods of time. As a result, you can reduce the number of HTTP requests that the web server must process, which helps improves web site speed and performance: https://www.electrictoolbox.com/apache-mod-expires-browser-caching/

5.2 Directly serve "above the fold" related CSS & JS
I've wrote a gulp buildscript for compressing and injecting all relevant CSS directly into my template: https://github.com/StephanAltmann85/salty.rocks-theme/blob/develop/blue/gulpfile.js

5.3 Usage of sprites
Merging several images to one is a common way for reducing requests: https://www.w3schools.com/css/css_image_sprites.asp

6. Javascript- & CSS-Minification

6.1 Minifying Javascript
Normally a simple gulp buildscript as mentioned above will do the trick. But because I am using Drupal and some core and module Javascript is not compressed by default, I've installed the Advanced CSS/JS Aggregation module using the jsmin php extension for compressing those files before delivery.

Using pecl (for installation of jsmin) didn't work with PHP 7. I had to compile it on my own from the php7-branch as described in the repository's readme. 

6.2 Minifying CSS
The gulp buildscript mentioned above is simply doing the trick.

7. Image Compression
PNGs saved by Photoshop are everything than well compressed. I suggest to use optipng.

optipng -o7 file.png

8. Providing static content via CDN
All static files (png, jpg, css, js etc.) of my website are delivered by a CDN using the "Premium Verizon" Microsoft Azure CDN product.

I had to choose the premium option, because some fonts used by the slick slider where causing some "CORS trouble": https://docs.microsoft.com/en-us/azure/cdn/cdn-cors

This product is also providing SSL-certificates for custom domain endpoints.

 

gtmetrix score of salty.rocks

Monthly archive

Categories

Debian (2)

Git (4)

Jira (1)

jQuery (1)

Linux (2)

MySQL (1)

PHP (1)