You can check how fast in seconds you want your site to load, on certain connection speed, with this free Budget Calculator tool, depending on the number of resources (HTML, images, JS, CSS, fonts, etc).
Use responsive images in HTML with srcset and sizes attributes to serve different scaled images, based on the size of the display.
8. Render Blocking Resources blocking the DOM
The async tag allows the script to be downloaded in the background without blocking.
Move JS scripts to the bottom of the page, right before the
Concatenate all JS files in one.
Remove extra spaces, characters, comments, etc.
9. Reduce Latency with a CDN.
You can test the latency of your website by using sending out ICMP packets to its address (by ping in your terminal or UI tools).
Content Delivery Networks are servers that maintain cached copies of the content of a website (images, CSS, JS, fonts), so that they can be retrieved from the closest physical location for reduced latency. Here some nice guides for google cloud storage and AWS S3.
10. Time to first byte (TTFB)
TTFB is the measurement of the responsiveness of a web server, as the time that takes for the browser to start receiving information after it has requested it from the server.
TTFB is calculated as HTTP request time + Process request time + HTTP response time, and can be check at the Chrome Dev Tools (the green bar).
11. Browser Cache
Let the browser cache some data (with a max-age of a week) by using HTTP headers such as Cache-control and Expires.
DNS prefetching can be a good solution to resolve domain names before a user follows a link. It's implemented in the HEADER session with:
With the preconnect label, the browser can set up early connections (such as DNS lookup, TLS negotiation, etc.) before an HTTP request is sent to the server. This can be implemented with:
HTTP/2 comes with a huge performance benefit. To enable HTTP/2 one needs a SSL certificate and a server that supports HTTP/2.
15. Hotlink Protection
Hotlink protection is given by restricting HTTP referrers so that one can prevent others from embedding assets on other websites (protecting site's bandwidth). To use it, one needs to place the code below in a .htaccess file (Apache):
Gzip compresses web pages, CSS, and JS code at the server level, before sending them over to the browser, to optimize the website performance. This is enable in the .htaccess file (Apache) or nginx.conf (Nginx).
17. Optimizing Video
Matching the file type to the optimal platform reduces playback issues:
.mp4 is a good quality video with a small file size and is the recommended format for YouTube and Vimeo.
.mov is a high quality video with a large file size. This file type doesn't play on windows without the help of VLC.
.wmv is a good quality video with a large file size. It is also hard to play this format on Mac machines unless you have VLC.
.flv is a small file size, but need extra steps to bring up the quality. This format doesn’t play natively on most Mac and Windows machines.
There are plenty of programs that will reformat videos, rearranging file settings for faster playback, which helps them stream more smoothly across a multitude of devices. For instance Handbrake, is a useful open source video transcoder.
Have a Continuous Delivery pipeline which includes profiling and performance analysis of acceptance and load tests.