How to increase Website Page Speed 2023

How to increase Website Page Speed 2023 Admin- December 01, 2022

Website loading speed is one of the most crucial factors that directly affect the user experience as well as the website ranking on Google. Google itself now admits that website page speed is one of the more significant ranking factors. So, in this article, we’ll discuss page speed and how you can improve it by following the 11 key factors that affect it. Let’s get started.

What is Website Page Speed?

The Page Speed of a web page is a measurement of how fast the content on it loads. Basically, it is the speed at which web pages are downloaded and displayed on a 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).

Factors that directly affect page speed:

There are a lot of things that you need to consider to optimize your website page speed. To make things easier for you, we’ve compiled 11 things that directly affect it. We’ll also talk about how you can optimize these factors. Here is a list of factors on which Page Speed depends:

Server Response Time (TTFB)
Poor Web Hosting
CDN (Content distribution network)
Java Script, CSS resources
Asynchronous of files
Compression
Optimized Images
Media Files
Unnecessary plug-ins and scripts
Browser caching
JavaScript execution time

1. Server Response Time (TTFB)

It is the time between a client’s request for a page in a browser and a server’s response. The optimal server response time is under 200ms.

There is also a reduction in Server Response Time due to the lack of caching. This occurs every time the browser gets files from the server rather than from the 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.

You shouldn’t waste your time trying to optimize Server response time since that is related to the server side and is not within our control. As you fix other issues, the server response time will also decrease dramatically.

2. Poor Web Hosting

Poor web hosting can reduce server response time. Most first-time site owners choose the cheapest hosting option available. While this is often enough in the beginning, you’ll likely need to upgrade once you start getting more traffic. We have two options for hosting, namely:

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 split certain resources like CPU, disk space, and RAM with other sites hosted on the same server which is not favorable 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 reasonable in-between option. It protects your site from everyone else on your server without the cost required for dedicated hosting which will increase website page speed because no other traffic comes here.

This is why I recommend that you use VPS hosting instead of shared hosting or poor web hosting since this is what reduces server response times.

3. Use a CDN (Content Distribution Network)

CDN stands for the Content distribution network. It is also known as a 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 geographical location of the user, the origin of the webpage, and the content delivery server.

Always use CDNs instead of downloading JS or CSS files. Since 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 unnecessary files, whether they are CSS, JS, or fonts. Make sure that removing files does not affect the design and functionality of the website.

Remove all unnecessary comments and code from each page.
Minimize all the CSS and JS files. It will consume less space and increase page speed because it will reduce the size of the file. You can dramatically increase your page speed.
Remove comments, formatting, and unused code from files.
If the page uses more than one JS file, merge them all into one. It will decrease the JS payload.
Avoid using libraries that 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 synchronously loading, the browser will load one file at a time.

Often, we use more than one file for styling and scripting (libraries script) and often, the files are larger than many other page elements, so browsers typically take longer to load them.

Ensure the JavaScript files are loaded asynchronously so they don’t interfere with other functionality on the page (animations, for example). Below, script1.js loads 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>

Do not load interlinked files synchronously. Sometimes smaller files are used instead of larger ones. And it gives an error because the other file hasn’t been fully loaded. The script.js file contains jquery code, however, it is smaller than jquery.min.js and it loads completely, while jquery is still loading, causing the error.

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

We can use rel=”preload” to load the CSS files asynchronously. Some browsers 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, whereas 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 webpage. 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 the 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


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.*

7. Use Optimized Images

A simple way to speed up a website’s loading time is to include properly sized images. Sometimes the images are too large, which takes too much time. The most efficient way is to resize the images yourself instead of using CSS. The alternative way is to use the “srcset” and “size” attributes for the <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, also play an instrumental role in the speed of web page speed. Media files such as images can be a real drag on your site’s performance. In many e-commerce sites, large images are used which are the 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 loads faster as compared to other image formats. But there is one drawback of using .webp since Safari doesn’t support it.

<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>

Make sure to preload the images so other content won’t interfere.

<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 preloaded and when they are used, content is defined.
For Icons, use your own images rather than using a third-party library (Font Awesome). It consumes less time as compared to third-party libraries

9. Remove Unnecessary Plug-in And Script

If you want to resolve that issue, you need to remove the unnecessary script and avoid using third-party scripts. To reduce the impact of third-party code, you should do the following.

All such plug-ins or scripts slow down the website. 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. Leveraging 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 ##

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"

## EXPIRES CACHING ##

11. Reduce JavaScript Execution Time

You won’t have any control over what those external scripts do. Short of not including them, 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.

Conclusion:

In this article, we talked about website page speed and the eleven key factors that directly affect the page speed. We tried to make this guide as comprehensive and easy as possible. We hope it helps you to increase your website loading speed.

Share this blog