Page Speed of web page is a measurement or a value of how fast the content on our web page loads. It is the speed in which web pages are downloaded and displayed on the user’s web browser. Page speed can be described in either “page load time” (the time it takes to fully display the content on a specific page) or “time to first byte” (how long it takes for your browser to receive the first byte of information from the web server).

Page Speed depends on following things:

  1. Server Response Time (TTFB)
  2. Poor Web Hosting
  3. Use a CDN (Content distribution network)
  4. Java Script ,CSS resources
  5. Asynchronous of  files
  6. Enable compression
  7. Use Optimized Images
  8. Media Files
  9. Remove unnecessary Plug-in and Script
  10. Leverage browser caching
  11. Reduce JavaScript execution time

1. Server Response Time (TTFB)

It is the time that passes between a client requesting a page in a browser and a server responding to that request. The optimal server response time is under 200ms.

Lack of caching is also the cause in the reduction of Server Response Time because every time browser get files from server rather than from cache. 

To improve your server response time, look for performance bottlenecks like slow database queries, slow routing, or a lack of adequate memory and fix them.

I think don’t waste time on to optimize Server response time because that is related to server side which is not in our control directly. When you fix other issue server response time also decrease with that dramatically

2. Poor Web Hosting

Poor web hosting is a factor that reduce the Server response time. Most new site owners choose the cheapest possible option for hosting. While this is often enough in the beginning, you’ll likely need to upgrade once you start getting more traffic. We have three options for hosting i.e.

  • Shared hosting
  • VPS hosting (Dedicated server)

Shared hosting is the cheapest option and you can often get it for about five dollars per month. With shared hosting, you share certain resources like CPU, disk space, and RAM with other sites hosted on the same server which is not good for google page speed.

With VPS (Virtual Private Server) hosting, you still share a server with other sites, but you have your own dedicated portions of the server’s resources. This is a good in-between option. It protects your site from everyone else on your server without the cost required for dedicated hosting which will increase the page speed because no other traffic comes here.

That is a reason I suggest you to using VPS hosting instead of shared server or poor web hosting because that is main cause in the reduction of Server Response Time. Shared server contains more than one websites which increase the traffic.

3. Use a CDN (Content distribution network)

CDN stands for Content distribution network. It is also known as content delivery network.

A content delivery network (CDN) is a system of distributed servers (network) that deliver pages and other web content to a user, based on the geographic locations of the user, the origin of the webpage and the content delivery server.

Always use CDNs instead of download files of JS or CSS because CDNs are placed closest to the user, it’s possible to reduce latency when the distance that your content needs to travel is shorter. A CDN can make your website load much faster.

4. Java Script and CSS resources

Remove all the unnecessary files either they are CSS or JS or any other (font). And make sure that removal of files don’t affect on page design and functionality.

  • Remove all the unnecessary comments and code that is unused by page.
  • Minimize all the CSS and JS files. It will consume less space and increase page time because it will reduce the size of file. You can dramatically increase your page speed.
  • Remove comments, formatting and unused code from files.
  • If page use more than one JS file then merge all JS file in one. It will decrease JS payload.
  • Avoid using libraries which have their own CSS and scripts because 80% of CSS and script content are not necessary for our work (useless). These libraries take too much time to load.

5. Asynchronous of  files

A browser can load files synchronously as well as asynchronously. When files are synchronous loading, the browser will load one file at a time.

Many times, we use more than one file for styling and script (libraries script) and many in cases files are bulkier than many other page elements and browsers typically take longer to load them.

Load all the Java Script files asynchronously make sure that it don’t affect other functionality in page (animation or anything else). Here below File script1.js load synchronously and script2 and script3 are loaded asynchronously. Asynchronous of files is simply done by

<script src="../script1.js"></script>
<script src="../script2.js" async></script>
<script src="../script3.js" async></script>

Don’t load interlink files asynchronous some time smaller file use larger one. And it gives error because other file not completely loaded. The script.js file contains jquery code but the size of script.js as compared to jquery.min.js is less and it load completely and jquery is still loading which will give error.

<script src="../jquery.min.js" async></script>
<script src="../script.js" async></script>

We can use rel=”preload” to load CSS file asynchronously. Some browser can’t support preload functionality.

<link rel="stylesheet" href"../style1.css" >
<link rel="preload" href"../style2.css" as="style">
<link rel="preload" href"../style3.css" as="style">

Here style1.css is loaded as it is where as style2.css and style3.css preload.

6. Enable compression (GZIP)

When a browser visits a web server it checks to see if the server has compression enabled and requests the web page. If it’s enabled it receives the compression file which is significantly smaller and if it isn’t, it still receives the page, only the uncompressed version which is much larger. Here is the code to enable compression on following web servers.

  • On NGINX web servers
# Load gzip prefrences
gzip on;
gzip_proxied any;
gzip_types application/javascript application/rss+xml application/vnd.ms-fontobject application/x-font application/x-font-opentype application/x-font-otf application/x-font-truetype application/x-font-ttf application/x-javascript application/xhtml+xml application/xml font/opentype font/otf font/ttf image/svg+xml image/x-icon text/css text/javascript text/plain text/xml;
location ~* \.(css|webp|js|ttf|otf|svg)$ {
		expires 365d;
}
  • On Apache web servers
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
  • Via .htaccess
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

7. Use Optimized Images

Use properly sizing images which is a simple way to reduce its loading time. Some time our images are bigger in size which takes too much time. The best way is resized that images by own rather than to use CSS. Alternate way is use “srcset” and “size” attribute for <img> tag i.e.

<img      srcset = "template-880w.jpg 880w , template-480w.jpg 480w , template-320w.jpg 320w"   sizes  = "(max-width:320px) 280px , (max-width:480px) 440px,800px"  src = "template-880w.jpg" >

8. Media files

Media files especially images are also play an important role in speed of web page speed. Media files such as images can be a real drag on your site’s performance. In many ecommerce site large images are used which become a main cause of page speed.

  • Don’t GZIP the image for compression because they aren’t compressed the same way as text files.
  • Use smaller images because larger images take more time to load.  
  • Convert all the images into “.webp” format and Use .webp format as img srcset because .webp load faster as compared to other image formats. But there is one drawback of using  .webp that is safari do not support it therefore use like that
<picture>
	<source srcset="../insta.webp" type="image/webp" data-aos="fade-up">
	<img src="../insta.png"/>
</picture>
<script>
/*	check webp support	*/
function supportsWebp()
{
    if (!self.createImageBitmap) return false;
    const webpData = 'data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA=';
    const blob = fetch(webpData).then(r => r.blob());
    return createImageBitmap(blob).then(() => true, () => false);
}

if(supportsWebp()) 
{
    var root = document.getElementsByTagName( 'html' )[0];
    root.className += ' webp';
}
else 
{
    var root = document.getElementsByTagName( 'html' )[0];
    root.className += ' no-webp';
}
</script>
  • Preload the images make sure that other content can’t disturb with that.
<link rel="preload" href="../image.jpg" as="image" >
<link rel="preload" href="../style.css" as="style" >
<link rel="preload" href="../script.js" as="script">
<link rel="preload" href="../font.woff" as="font"  >
  • In this technique, files are preload and when they are used then content is defined.
  • For Icon use custom icon (own images) rather than to use third party library (font awesome). It consume less time as compared to third party libraries

9. Remove unnecessary Plug-in and Script

We’ve to remove the unnecessary script (unused) and avoid using third party script to resolve that issue. You should do following to reduce the impact of third-party code.
All such plug-in or scripts negatively affect the website speed. Remove unnecessary libraries because they have their own scripts and styling which takes too much time.

  • Defer the loading of JavaScript
  • Use link tags with preconnect attributes

10. Leverage Browser Caching

Caching allows your web server to send a web page at a much faster pace to a browser after it has already been delivered once. To leverage your browser’s caching generally means that you can specify how long web browsers should keep files stored locally. That way the user’s browser will download less data while navigating through your pages, which will improve the loading speed of your website. To enable it, add those lines to your .htaccess file

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES CACHING ##

11. Reduce JavaScript execution time

You won’t have any control over what those external scripts do. Short of not including them, about the only thing you can do is defer their loading. This allows the page to continue to load and execute while the script is loaded and executed later. This method doesn’t work with all scripts, but it will work with most.

<script defer src= ="https://example.com/script.js"></script>

RECENT POSTS

Do you want us to build an App for you ?