Quick Guide: Reduce TTFB & Improve Website Performance

7th January 2019   Programming

 

Time To First Byte (TTFB) is the parameter used to measure the time of a web server or another network resource. It also measures how speed the transmission of data with a client, it is usually measured by search engine spiders and measured in milliseconds.

There are three parts of TTFB:

  • The duration of the connection
  • The required time to send the HTTP request
  • The required time to get the very first byte of the web page.

TTFB Evaluation Guide

100ms – 200ms : Very Good
300ms – 500ms : Good
600ms – 900ms : Normal
1 – 1.5 seconds: Bad
1.6 seconds or beyond: Very Bad


Every web owners MUST consider their TTFB as it affects the web ranking and also the experience of every visitors, that’s why as much as possible it is important to make the TTFB value the lowest possible.

In this article, we’ll be talking about how to optimize your Time To First Byte and reduce server response times (TTFB).

You can follow all these following tips to speed up your web pages and get the lowest TTFB possible:

Use Content Delivery Network

A content delivery network or content distribution network is a geographically distributed network of proxy servers and their data centers. The goal is to provide high availability and high performance by distributing the service spatially relative to end-users

Reduce HTTP Requests

This is usually the main reason why your web pages are taking so long to load. It’s because files needed to be loaded are blocking your web page to load as soon as it can. For example, your web page is asking for 6 JavaScript files to be loaded and also CSS files like bootstrap and your own stylesheets.

These files will bring up your TTFB thus making your web pages slow. So to reduce your TTFB, optimize your files as well. If it’s possible to compress them or combine them into one file. That would help a lot.

Use Cache

A cache is a hardware or software component that stores data so that future requests for that data can be served faster; the data stored in a cache might be the result of an earlier computation or a copy of data stored elsewhere.

By using cache, visitors will have a better experience especially if they have been on your web page before. There are many ways to do cache, it’s either by using plugins or by editing your .htaccess file and putting this code:

# BEGIN Expire headers  
<ifModule mod_expires.c>  
        ExpiresActive On  
        ExpiresDefault "access plus 5 seconds"  
        ExpiresByType image/x-icon "access plus 2592000 seconds"  
        ExpiresByType image/jpeg "access plus 2592000 seconds"  
        ExpiresByType image/png "access plus 2592000 seconds"  
        ExpiresByType image/gif "access plus 2592000 seconds"  
        ExpiresByType image/svg+xml "access plus 2592000 seconds"
        ExpiresByType application/x-font-ttf "access plus 2592000 seconds"
        ExpiresByType application/x-font-truetype "access plus 2592000 seconds"
        ExpiresByType application/x-font-opentype "access plus 2592000 seconds"
        ExpiresByType application/font-woff "access plus 2592000 seconds"
        ExpiresByType application/font-woff2 "access plus 2592000 seconds"
        ExpiresByType application/vnd.ms-fontobject "access plus 2592000 seconds"
        ExpiresByType application/font-sfnt "access plus 2592000 seconds"
        ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"  
        ExpiresByType text/css "access plus 604800 seconds"  
        ExpiresByType text/javascript "access plus 216000 seconds"  
        ExpiresByType application/javascript "access plus 216000 seconds"  
        ExpiresByType application/x-javascript "access plus 216000 seconds"  
        ExpiresByType text/html "access plus 600 seconds"  
        ExpiresByType application/xhtml+xml "access plus 600 seconds"  
</ifModule>  
# END Expire headers  

Using mod_expires, you can tell visiting browsers to hold on to certain files longer (likes images, which are rarely changed). This .htaccess example shows how to cache specific file types for specific periods of time.

In the example above, png files expire their cache 2592000 seconds after they are accessed by a browser. View the mod_expires page for further details.

 

React to this topic
Bernard Polidario
About Bernard Polidario

A full-stack developer who has been around programming community for 10+ years and still has a lot of passion for programming and design. I am the founder of WeeklyHow and I can be reached at [email protected]

https://weeklyhow.com

Leave a Reply

Your email address will not be published. Required fields are marked *

*
*
*