Web Designing & Development

15+ Proven Ways To Optimize The Speed Of Your Website

15+ Proven Ways To Optimize The Speed Of Your Website
15+ Proven Ways To Optimize The Speed Of Your Website

Browsing through a website?

We bet that you won’t even spend 10 seconds for a web page to load, spin or sputter. Everyone hates a slow loading website and, even search engines hate them too!

You think that the speed of your website doesn’t matter? Well, think again!

A slight 1-second delay in the page load time leads to-

  • 7% loss in conversions
  • 11% fewer page views and,
  • 16% reduction in customer satisfaction

But, is it just your conversions or ROI that is getting affected by a slow loading of the page?

NO!

In addition to losing out on traffic or page, you also hamper SEO, brand image, user experience if your page does not renders well.

As the internet connection speeds have been increasing across the world, the web users are less tolerant of slow load times. At the same, Google also prefers to reward the fast sites with higher ranking in natural search results.

Amazon reports increase in revenue of 1% for every 100 milliseconds improvement in their site speed, and Walmart found 2% increase in conversions for every second of improvement.

According to Google- “Experiments demonstrate that increasing web search latency 100 to 400ms reduces the daily number of searches per user by 0.2% to 0.6%. For longer delays, the loss of searches persists for a time even after latency returns to previous levels.”

After all, impatience is now a digital virtue!

So, in order to retain your potential clients and making your website Google compliant, it is important to pay attention to their website.

Here are the proven ways to optimize the speed of your website.

Dig in to learn more about the tips and ensure that your website loads quickly everywhere, across all browsers and devices.

Review Your Hosting Service Plan

It all starts with choosing an ideal service plan with the right hosting company. Before you start measuring the parameters for speed, you should have a company who has a reliable hardware to host your website.

If your website is unreliable, your visitors will run away no matter how fast it is performing. There are various hosting companies such as Bluehost that offer a varied range of hosting plans- from shared servers to cloud and dedicated servers.

If you start with the shared hosting, make sure you track your resources and volume so that you can upgrade to a new plan before your website starts appearing sluggish.

Pro Tip: Consider a dedicated plan as with this you get sole access to the server.

Reduce Number Of HTTP Requests

80% of the web page load’s time is spent on downloading the various parts of the web page like scripts, code, flash, images, and style sheets, etc. An HTTP request is made for one of those elements, especially the on-page components; so more the components, longer it takes for the page to render.

So, to improve the site in this case-

  • Manage the number of elements on each web page.
  • Combine multiple stylesheets into one
  • Reduce the scripts
  • Don’t use third-party frameworks
  • Inline your JavaScript
  • Use CSS instead of images

Pro Tip: Start by reducing the number of elements on your page. By performing this action, you can decrease the number of HTTP requests, and it will significantly improve the loading speed for your website.

Specify The Dimension Of Images

Your browser begins to render the page even before the images are loaded. Specifying the dimensions of images helps it to wrap around the non-replaceable elements. And, in case if the dimensions are specified, browser will work once the images are downloaded.

To specify, go to the <img> elements and adjust the specification from width and height tags.

Ensure Your Images Are Optimized For Web

High-resolution images are heavy; absorb more bandwidth, and takes longer time to load — As the browser pulls down more data with larger images!

According to a report published by HTTP archive, 64% of the website’s pages are made up of the images.

So, make use of the image editing tools like free-image re-sizer or Photoshop and optimize your images so that you are not making users to download the large files.

15+ Proven Ways To Optimize The Speed Of Your Website
15+ Proven Ways To Optimize The Speed Of Your Website

 

  • Crop your images to an appropriate size. For example- if your page is 560 px wide, resize the image to that width but don’t upload a full resolution image and then adjust the width to 560.

Whenever you set the HTML tags like height or width specification, you are not reducing the image size on server; you just change how it appears on the page.

  • Remove image comments
  • Reduce color depth to the best lowest acceptable level.
  • Png and Jpg images are best for the websites.

Pro Tip: Keep images fewer than 100kb-200kb to get the ideal load time for your website. And, always include <img src=””> with a valid URL.

While images take the majority of your HTTP requests, optimizing their sizes will also increase your website’s overall performance.

Keep Your Website’s Scripts Up To Date

15+ Proven Ways To Optimize The Speed Of Your Website
15+ Proven Ways To Optimize The Speed Of Your Website

 

Depending on the platform you use, you need to check back whether the new releases of site scripts are available or not. The site script developers always work on improving the code- especially, when it comes to speed of the site.

Keeping your scripts updated to the latest versions all the barriers that prevent your site from loading quickly.

Remove Query Strings From Static Resources

It does not matter if a public header is present because you simply can’t cache a link with ‘?’ in its URL.

So, it is better to use the query strings for dynamic sources only.

Eliminate Unnecessary Plug-Ins

Yes, we agree that plug-ins offer valuable information, but it also results in slowing down of the website load time.

For using the plug-ins, you have to enter a JavaScript snippet in your website code. Once you have several snippets in your code like one for analytics, one for facebook sharing, and other for Twitter, Youtube, and more – your page will take longer time in loading to the devices.

Pro Tip: Ditch all the unnecessary plug-ins and check your HTML code to make sure that you only have useful plug-ins on your website.

Specify A Character Set In The Headers

If you specify a character set in the HTTP headers, the browser does not have to spend extra time finding out which character you are using.

You can simply specify the character set by adding a utf-8 set in your website section-

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>

Remove Unnecessary Code From Your CSS Files

Your CSS file needs to load before your website loads on the user’s device. But, if you have been building on the same file for some time, it is likely to have redundant code.

Go through your code yourself and find the hidden elements in the code that aren’t being used on your website.  You can also make use of the CSS minifier that removes extra code and space for you.

Enable The Browser Caching

Caching is basically a technical term for the temporary storage area.

It helps with the scalability of your web page during the peak traffic times – especially, when you are running a big e-commerce sale or an email marketing campaign.

The browser caching allows the elements on your website to be downloaded in the drive. Once they are added into the temporary storage space; the files will be stored locally on your system that will decrease the load time for your website.

For example: When someone comes at your website for first time, they have to download the elements before being able to use your page. After the first load, only a few components need to be downloaded for regular visits!

15+ Proven Ways To Optimize The Speed Of Your Website
15+ Proven Ways To Optimize The Speed Of Your Website

 

In a test by Theuer from Yahoo, there were 9 components and 0.9 seconds, that removed nearly 2 seconds off the load time. He says that 40-60% visitors come with the empty cache so it is essential that your website loads faster.

The static assets have a cached lifetime for a week while the third party assets like advertisement or widgets just last for a day.

Avoid 301 Redirects

A 301 redirect is permanent “re-direct” from one URL to other.

Redirects kill the performance of the website.

A redirect generates additional round-trip times and therefore, quickly doubles the time that is required to download the document before the browser starts to load other elements.

Add “Expires Headers” To Leverage Browser Caching

Expires Headers instruct the browser – whether to request a specific file from the server or get the web page from cache.

It speeds up your website in two ways-

  • First, they reduce the need for users to download the same files from the servers again and again.
  • Second, it reduces the number of HTTP requests that resultantly speeds up the page load time.

To add expire headers; paste this code into your .htaccess file.

<IfModule mod_expires.c>

# Enable expirations

ExpiresActive On

# Default directive

ExpiresDefault “access plus 1 month”

</IfModule>

Apply AJAX

Applying AJAX helps your website to fetch the data from server without requiring the page to be refreshed time and again. Also, it allows your website to load quickly and fill in the content while the user is still browsing the web page.

Disable Hotlinking Of Your Images

When you hotlink the images from one website to other, they take a toss on your bandwidth and resultantly slow your website down. To prevent slowing down of your site, use this snippet in the .htaccess file.

RewriteEngine onRewriteCond %{ HTTP_REFERER} !^$RewriteCond %{ HTTP_REFERER} !^http(s)?://(www\.)?nameofyoursite.com [NC]RewriteRule \. (jpg|jpeg|png|gif)$ – [NC,F,L]

Make Use Of Content Delivery Networks

Content Delivery Network is known as the system of distributed networks that deliver WebPages and other content to users based on their geographic locations. You can simply make use of the CDN’s like Amazon Cloudfront to reduce the loading time of pages.

And, if you don’t want to pay for CDN’s — Google offers a free delivery network known as Page Speed Service.

Optimize CSS Delivery

CSS generally comes with all the style requirements for your page.

Basically, your website access the information in two ways- external file – a file that loads before your page renders, and inline- that is inserted in the HTML document.

15+ Proven Ways To Optimize The Speed Of Your Website
15+ Proven Ways To Optimize The Speed Of Your Website

 

To optimize the speed for your websites, an external style sheet is preferred because it creates fewer code duplications and also reduces the size of code.

Pro Tip: When setting up the style sheets, use only one external CSS sheet since additional sheets increase the HTTP requests.

Optimize Your Database

Almost every website uses a database to store the information. But, did you that your database can also impact your website’s speed?

To optimize your database for page speed improvements, add an index to it. By doing so, your database will rely on index to narrow down the data, which helps data get returned faster.

Serve The Resources From A Consistent URL

This is what Google recommends on serving the resources-

For every resource that is shared across multiple page, make sure that each reference is been linked to the source using a consistent URL.

In case, if a resource is shared by multiple sites that are interlinked, but are hosted on different hostnames, it’s better to serve from a single hostname than to serve from the separate ones.

For example if abcsite.com and mysite.com uses the same Javascript file, and mysite links to abcsite, it is better to serve the JS file the abcsite.com.

By using this way, your file be already in the cache when the user will browse mysite.com.

Enable Keep-Alive Feature

“A Keep-Alive signal is often sent at predefined intervals and plays an important role on the Internet. After a signal is sent, if no reply is received, the link is assumed to be down and future data will be routed via another path until the link is up again,” says Wikipedia.

To enable keep alive, paste this code into .htaccess file-

<ifModule mod_headers.c>    Header set Connection keep-alive</ifModule> Enabling keep alive also allows the client to download multiple files without the permission that resultantly helps to save on bandwidth.

Minimize CSS, Javascript, And HTML

There are many web application and websites that are increasingly dependent on the CSS.

Minifying means removing extra spaces, line breaks, comments, and delimiters in the code to reduce the amount of data that needs to be transferred. Thereby, reducing the time, it takes to load a page.

For example- you can use various plugins for WordPress such as Better WordPress Minify and WP Super Minify that automatically minimizes the code for you. In case, if you want to reduce the code manually, tools like Closure Compiler can help you to accomplish the task.

According to the recommendations by Google:

  • To minify HTML, make use of PageSpeed Insights Chrome Extension to generate optimized version of your code. Run the analysis for your HTML code, browse the minify HTML rule and click on see optimized content to get the minified code.
  • To minify CSS, try cssmin.js.
  • To minify JavaScript, try JSMin, YUI compressor or Closure compiler.

Fix The Broken Links In Your Website

15+ Proven Ways To Optimize The Speed Of Your Website
15+ Proven Ways To Optimize The Speed Of Your Website

Broken links on your WebPages not only take over the bandwidth but also serve one of the reasons due to which the user gets to leave your website.

For example:

 

All the 404 errors in this web page were fixed. After fixing these links, the average visits per user increased from 1.4 to 1.85 pages per visit. Also, there was a visible decrease in the bounce rate for this website.

To identify the broken links, you can make use of the tools like-

  • Screaming Frog SEO Spider
  • Google Webmaster
  • Ahrefs

Reduce Redirects

Redirects are known to increase the websites load time by creating additional HTTP requests. You might be successful in creating a responsive website but you need to have re-directs in place for a speed optimized website.

To make sure that a re-direct is not slowing down your website-

  • Include the <link rel=”alternate”> markup in your desktop pages and identify the mobile equivalent URL so that Googlebot can discover your pages.
  • Make use of the HTTP redirects

Enable Gzip Compression

Larger pages are of more than 100kb.

Due to their sizes, they become bulky and are very difficult to download. The best way to speed up their load time is to simply zip them.

The compression reduces the bandwidth of your image thereby reducing the time for HTTP response. You can compress your pages using a tool called Gzip. According to Yahoo, this tool can reduce the download time by 70%.

The three ways to turn on Gzip compression on your site are-

  • Add the following code on the top of your HTML page- <?php if (substr_count($_SERVER[‘HTTP_ACCEPT_ENCODING’], ‘gzip’)) ob_start(“ob_gzhandler”); else ob_start(); ?>
  • Compress the file by using extension- <files *.html>
    SetOutputFilter DEFLATE
    </files>
  • Install a Gzip compression plugin

Put CSS Code At Top And JSS Code At Bottom

To optimize the site in an easy way, keep your site’s code clear by adding CSS files to the top and JavaScript snippets at the bottom.

Adding CSS files to the top stops rendering and saves the resources that browsers would otherwise load. And, adding JavaScript to the bottom prevents the pages from waiting for the full-code execution.

Reduce The Number Of DNS Lookups

The DNS lookups are known to take a significant amount of time to look up the IP addresses for hostname. And, the browser cannot perform a task until the lookup is complete.

So, reducing the hostnames will simply increase the response time.

You can also measure the load time of your website by using the tools like Pingdom tools.

Replace PHP Code With Static HTML And Link Your Style Sheets

There is no denying the fact that PHP makes your website efficient and reduces the requirement to enter the same coding information multiple times. But, calling the information through PHP uses many server resources and should be replaced with HTML, where it hardly uses any resources or time.

Similarly, as compared to linking of the style sheets, using @import in our code uses up more resources.

No matter, if they achieve the same results, there are various old browsers that do not support the use of @import.

Try To Reduce The Overall Server Response Time

Server response time is the time taken by the client to send a request and the server to respond. This time is affected by a lot of things but is mostly affected by the number of requests been sent.

To reduce the number of requests-

  • Minify your CSS and JS files.
  • Use CSS sprites to call fewer images.

Note: The optimum server response time is less than 200 milliseconds.

Make Use Of CSS Sprites

Sprite is basically one image that contains all of your images. But, by using CSS Sprites, you can hide everything in the image except for the areas between co-ordinates.

They optimize the speed of your website as it loads that big one image and uses CSS to later on load the small images. The web browser does not make requests for all the images and hence, the loading speed of websites improves automatically.

The Final Word

There is no getting back from this fact that website speed matters now more than ever before. Always Remember – a website with the optimized speed not only helps get conversions but decreases your bounces, and keeps your customers happy.

So, what are you waiting for?

Skim through these ways and put them into the practice for optimum results.