<span style="font-weight: 500;">A website visitor doesn’t appreciate slow loading pages. A lot of surveys prove the fact that people aren’t willing to wait (even for a few seconds) for a page to load. People don’t have the patience nor time to hit the reload button continuously either.</span>

<span style="font-weight: 500;">Since page speed seriously affected the user experience forcing them to bounce back, Google decided to consider page speed as a criterion to rank websites.  With Google’s Speed Update, all the website developers and owners were expected to improve their website’s page speed.</span>

Page speed<span style="font-weight: 500;"> is the measurement of the time taken to completely load all the contents on a page when a user clicks a link or when the browser requests the server. </span>

<span style="font-weight: 500;">A page speed performance score in Google’s PageSpeed Insights of 90 or above is accounted as fast, while 50 to 90 is considered moderate and anything below 50 is slow.</span>

<span style="font-weight: 500;">Maintaining an optimum page speed is crucial because it directly influences your website’s <a href="https://vividreal.com/how-to-increase-your-domain-authority/">domain authority</a> and conversions. If you need any professional help in boosting the page speed of your website, do connect with us. We have <a href="https://vividreal.com/web-development/">an amazing team of web developers</a> to help you out! </span>

<span style="font-weight: 500;">Let’s take a look at some methods to increase your website’s page speed.</span>

<span style="color: #00ccff;"><b>Compress Files</b></span>

<span style="font-weight: 500;">Compressed files consume relatively less storage space compared to ones that are not. Compressing files instantly speeds up the data transfer process and saves bandwidth.</span>

Gzip <span style="font-weight: 500;">is a popular data compression software program that is used to compress files for WordPress websites. Gzip combines all the files into a zip folder so that the files can load faster on a browser. The browser then unzips the contents and displays them to the user. </span>

<span style="font-weight: 500;">Compressing text, Html, javascript, CSS, and XML files using Gzip can be implemented by simply pasting the following piece of code inside the .htaccess file.</span>
<p style="padding-left: 80px;"><span style="font-weight: 400;">AddOutputFilterByType DEFLATE text/plain</span></p>
<p style="padding-left: 80px;"><span style="font-weight: 400;">AddOutputFilterByType DEFLATE text/html</span></p>
<p style="padding-left: 80px;"><span style="font-weight: 400;">AddOutputFilterByType DEFLATE text/xml</span></p>
<p style="padding-left: 80px;"><span style="font-weight: 400;">AddOutputFilterByType DEFLATE text/css</span></p>
<p style="padding-left: 80px;"><span style="font-weight: 400;">AddOutputFilterByType DEFLATE application/xml</span></p>
<p style="padding-left: 80px;"><span style="font-weight: 400;">AddOutputFilterByType DEFLATE application/xhtml+xml</span></p>
<p style="padding-left: 80px;"><span style="font-weight: 400;">AddOutputFilterByType DEFLATE application/rss+xml</span></p>
<p style="padding-left: 80px;"><span style="font-weight: 400;">AddOutputFilterByType DEFLATE application/javascript</span></p>
<p style="padding-left: 80px;"><span style="font-weight: 400;">AddOutputFilterByType DEFLATE application/x-javascript</span><span style="font-weight: 500;">  </span></p>
<span style="color: #00ccff;"><b>Minify HTML, CSS, and JavaScript</b></span>

<span style="font-weight: 500;">Html, CSS, and JavaScript files are one of the factors weighing down the website’s loading speed. These files can be bulky at the same time essentially important because they determine the site’s appearance.</span>

<span style="font-weight: 500;">Minifying these files, and combining them helps in shrinking each of the files as well as the total number of files. It means to remove all those </span>unnecessary white spaces<span style="font-weight: 500;"> inside the code (</span><span style="font-weight: 500;">extra spaces, line breaks, and indentation</span><span style="font-weight: 500;">), remove pieces of </span>code that are not being used<span style="font-weight: 500;">, etc.</span>

<span style="font-weight: 500;">Often such codes are present in pages built using page builders, although they have made the page building task easier, they brought in some messy code that slows the website down.</span>

WP Rocket<span style="font-weight: 500;"> is an effective plugin to minify and combine files for WordPress website holders. After installation, go to </span>Static Sites <span style="font-weight: 500;">and select the files to be combined, further hit the </span>Save Changes<span style="font-weight: 500;"> button. Now go back and check page speed yourself!</span>

<span style="font-weight: 500;">Also, remember it is ideal to keep only a few elements on the website so that the browser needs to make only a few HTTP requests.</span>

<span style="color: #00ccff;"><b>Optimize Images</b></span>

<span style="font-weight: 500;">Images are an important element in a website. But they can be one of the reasons slowing down your website speed. Often, large image files take time to load on the webpage. They can't be removed for sure (imagine an eCommerce website with no images), but at least they can be compressed.</span>

<span style="font-weight: 500;">You can always crop the images to a size that is exactly required. Uploading a bigger-sized image and then setting its width to a smaller dimension slows down the website. This eats up a lot of time because the site has to load the large image first and then again spend time adjusting its size.  </span>

<span style="font-weight: 500;">Use tools and plugins to optimize images on the website. One highly recommended plugin for WordPress website users is </span>WP Smush<span style="font-weight: 500;">.</span>

<span style="color: #00ccff;"><b>Browser Cache</b></span>

<span style="font-weight: 500;">When someone visits your website, the elements (</span><span style="font-weight: 500;">stylesheets, images, JavaScript files, and more</span><span style="font-weight: 500;">) of your website get stored in their browser’s cache (temporary memory), which will speed up the page loading process the next time when the person visits. </span>

<span style="font-weight: 500;">The reason is that the browser doesn’t have to send another HTTP request and wait for a response from the server the second time. Also, it doesn’t have to download the elements again if it’s already there in the cache.</span>

<span style="font-weight: 500;">So it’s much more convenient if the browser caching is enabled for a website. Add an </span>expires header<span style="font-weight: 500;"> for your website or simply install a </span>caching plugin<span style="font-weight: 500;"> if you have a WordPress website. </span>

<span style="font-weight: 500;">Expires header asks the browser if the elements to load the contents of the website are available in the cache memory itself or needs to be requested from the server. For this, access the .htaccess file from the root directory and paste the following piece of code.</span>
<p style="padding-left: 80px;"><span style="font-weight: 400;">## EXPIRES CACHING ##</span></p>
<p style="padding-left: 80px;"><span style="font-weight: 400;">&lt;IfModule mod_expires.c&gt;</span></p>
<p style="padding-left: 80px;"><span style="font-weight: 400;">ExpiresActive On</span></p>
<p style="padding-left: 80px;"><span style="font-weight: 400;">ExpiresByType image/jpg "access plus 1 month"</span></p>
<p style="padding-left: 80px;"><span style="font-weight: 400;">ExpiresByType image/jpeg "access plus 1 month"</span></p>
<p style="padding-left: 80px;"><span style="font-weight: 400;">ExpiresByType image/gif "access plus 1 month"</span></p>
<p style="padding-left: 80px;"><span style="font-weight: 400;">ExpiresByType image/png "access plus 1 month"</span></p>
<p style="padding-left: 80px;"><span style="font-weight: 400;">ExpiresByType text/css "access plus 1 month"</span></p>
<p style="padding-left: 80px;"><span style="font-weight: 400;">ExpiresByType application/pdf "access plus 1 month"</span></p>
<p style="padding-left: 80px;"><span style="font-weight: 400;">ExpiresByType text/x-javascript "access plus 1 month"</span></p>
<p style="padding-left: 80px;"><span style="font-weight: 400;">ExpiresByType application/x-shockwave-flash "access plus 1 month"</span></p>
<p style="padding-left: 80px;"><span style="font-weight: 400;">ExpiresByType image/x-icon "access plus 1 year"</span></p>
<p style="padding-left: 80px;"><span style="font-weight: 400;">ExpiresDefault "access plus 2 days"</span></p>
<p style="padding-left: 80px;"><span style="font-weight: 400;">&lt;/IfModule&gt;</span></p>
<p style="padding-left: 80px;"><span style="font-weight: 400;">## EXPIRES CACHING ##</span></p>
<span style="font-weight: 500;">Here, the file expirations were enabled first, then the expiry time limit was set to certain files and file types. Change the expiry time limit as per your website requirements; finally, in the code, the default expiry time is also set for the files that weren’t specified in the code.</span>

<span style="font-weight: 500;">There are several caching plugins for WordPress users namely </span>WP Total Cache<span style="font-weight: 500;">, </span>WP Super Cache<span style="font-weight: 500;">, </span>Add Expires Headers<span style="font-weight: 500;">, etc. In this, after activation, go to settings and set the expiry time you wish.</span>

<span style="color: #00ccff;"><b>Limit Redirects</b></span>

<span style="font-weight: 500;">Redirects are often used in instances when users and search engines need to be forwarded from one URL to another. This happens while deleting pages, moving contents from one page to another, changing domains, or while merging websites.</span>

<span style="font-weight: 500;">Redirects again demand additional HTTP requests, which slows down the page. But at times it is difficult to completely avoid redirects on websites, although Google says an ideal website devoid of any redirects.</span>

Screaming Frog<span style="font-weight: 500;"> is a tool that gives insights into all the redirects on your website. Scan the website to sort the data based on “Status Code” and all the 301 redirects within your website can be viewed. Go through all the redirects and check if they serve their purpose. </span>

<span style="font-weight: 500;">Also, identify if there are any chain redirects and make changes in the .htaccess file so that the chain gets eliminated by directly pointing to the latest version of the page.</span>

<span style="color: #00ccff;"><b>Remove render-blocking JavaScript  and CSS scripts</b></span>

<span style="font-weight: 500;">One recommendation made by Google page speed insights is to eliminate render-blocking resources. These are JavaScript and CSS scripts which slows down the page loading speed. </span>

<span style="font-weight: 500;">Usually, a browser loads a website by reading code from top to bottom. While reading the page, if the browser encounters a CSS or JavaScript file, it waits there until that file is downloaded. The time spent on loading those elements could have been used for loading some important content or any productive elements. </span>

<span style="font-weight: 500;">Suppose there is an interactive footer at the bottom of your website and it’s powered by the “interactivefooter.js” file. Sometimes, websites have their code mentioning this file in the top part of the code although it’s effect comes in the footer part. Now this forces the browser to download the file which is of no use until a user scrolls down till the footer part.</span>

<span style="font-weight: 500;">The first step is to check if there are any render-blocking resources on the website using Google PageSpeed Insights. Now, these can be eliminated using WordPress plugins like</span> Autoptimize + Async JavaScript<span style="font-weight: 500;"> (free), </span>WP Rocket<span style="font-weight: 500;"> (paid).</span>

<span style="color: #00ccff;"><b>Make use of Content distribution network</b></span>

<span style="font-weight: 500;">Using a content distribution network (CDN) to host all your files is a highly recommended method to speed up your page. A CDN is a distributed network of servers that alleviate the burden for each server of delivering content. This will help to deliver responses to the requests in a quicker manner. </span>

<span style="font-weight: 500;">Suppose a user from the other part of the world wishes to access the contents of the website, their browser can very well access the elements from their nearest server. Since hosting on a CDN makes your files quickly accessible to anyone in any part of the world, it can significantly reduce the time taken for loading a page. Also, using a CDN can protect the website from any </span><span style="font-weight: 500;">DDoS (Denial-of-service ) attacks or traffic spikes.</span>

<span style="color: #00ccff;"><b>Proper quality of web hosting</b></span>

<span style="font-weight: 500;">Many of the new site owners prefer a cheaper hosting option. Well, they don’t realize choosing a proper hosting based on their scale of business is important. Technical glitches occurring due to improper hosting can seriously affect page speed.</span>

<span style="font-weight: 500;">Almost all the hosting providers have at least three basic plans in common, they are:</span>
<ul>
 	<li style="list-style-type: none;">
<ul>
 	<li style="list-style-type: none;">
<ul>
 	<li style="font-weight: 500;"><span style="font-weight: 500;">Shared hosting</span></li>
 	<li style="font-weight: 500;"><span style="font-weight: 500;">VPS hosting</span></li>
 	<li style="font-weight: 500;"><span style="font-weight: 500;">Dedicated server</span></li>
</ul>
</li>
</ul>
</li>
</ul>
Shared hosting<span style="font-weight: 500;"> can be used by small scale websites that expect a low-traffic. These sites can get affected by traffic spikes, and have to share disk space, CPU and RAM with other websites under the same server. People usually prefer this because it's the cheapest option available. </span>

<span style="font-weight: 500;">In a </span>VPS hosting<span style="font-weight: 500;">, the server still gets shared by different sites but will enjoy the benefits of having its own part of the server’s resources. It’s a relatively safer ground compared to buying a dedicated server.</span>

<span style="font-weight: 500;">A website under </span>dedicated hosting<span style="font-weight: 500;"> has a server of its own and is accountable for any maintenance work. Large scale businesses usually require this hosting option.</span>

<span style="font-weight: 500;">Switch to a better plan when your website receives more traffic and choose the right plan suiting your business, otherwise, you are wasting that money thinking you have saved something!</span>

<span style="color: #00ccff;"><b>Reduce Server Response time (TTFB)</b></span>

Time to first byte<span style="font-weight: 500;"> (TTFB) is simply the time the browser has to wait until it receives its first byte of data from the server. This time is crucial because it determines the page loading speed. The lesser the TTFB, the lesser the time taken to load the page.</span>

<span style="font-weight: 500;">The server response time depends on factors such as the amount of website traffic received, resources used by each page,  software used by the server, the hosting provider for the website, etc.</span>

<span style="font-weight: 500;">A fast WordPress host, usage of CDN, proper caching, and a premium DNS provider can ensure a shorter TTFB.</span>

<span style="font-weight: 500;">According to GooglePageSpeed insights, a page speed</span> under 200ms<span style="font-weight: 500;"> is highly appreciable. TTFB can be measured using tools such as</span> DevTools<span style="font-weight: 500;">, </span>Gtmetrics<span style="font-weight: 500;">, etc. So measure regularly to have a check on your website loading speed.</span>

<span style="color: #00ccff;"><b>Reduce Plugins Numbers</b></span>

<span style="font-weight: 500;">A lot of plugins are available in WordPress, serving solutions to an infinite number of developer’s concerns. They eliminate the burden of coding for various functionalities. They are readily available to install and use, however it comes with the cost of slowing down your website in addition to security issues.</span>

<span style="font-weight: 500;">Constantly updating and maintaining a lot of plugins can be a tedious task. But, it is also not possible to completely avoid plugins on your website; you can regularly evaluate the already installed plugins and delete the ones that aren’t required/important.</span>

<span style="font-weight: 500;">If you wish to implement certain functionality on your website, research and figure out ways to do it rather than directly using a plugin.</span>

<span style="color: #00ccff;"><b>Conclusion</b></span>

<span style="font-weight: 500;">Boosting your website’s page speed can have a positive impact on the overall site performance. It increases the possibility of a user to prefer your website over others. </span>

<span style="font-weight: 500;">Mobile internet users dominate now and if your website speed can’t meet their performance expectations, then it would be difficult for your website to survive.</span>

<span style="font-weight: 500;">Host storage space consuming resources like videos on third party sites such as YouTube, Vimeo, or Wistia and then embed them on to your site. </span>

<span style="font-weight: 500;">Use tools like Google’s TestMySite, Pingdom, YSlow, and Lighthouse to monitor page loading speed. Take time to figure out the factor slowing down your website.</span>

<span style="font-weight: 500;">You may not require all the methods mentioned above, but it is important to fix even small factors weighing down your website’s speed.</span>

If you still feel this is way beyond your expertise and would like getting some professional help to increase the page speed of your website, <a href="https://vividreal.com/web-development/">our team of expert web developers are here to help you</a>:)