How To Improve Page Loading Speed – Reduce Website’s Page Loading time

 Improve Page Loading Speed

How To Improve Page Loading Speed - Reduce Website's Page Loading time

The loading speed of a web page is very important part of on-page SEO. A fast web page improves the quality of the site and increases user satisfaction.

If your site takes more than 3 seconds to load, Google will give you a low score. It also affects the users, many will close the tab and go to another site, people do not wait. You should Improve Page Loading Speed.

Here are some additional reasons why a fast site is critical:

  • Affects SEO One of the main factors that if your website loads fast then Google take placing it higher in the ranking. If you want to improve your web positioning make it faster a slow site will give you many problems.
  • It affects the number of subscribers if you are a blogger or have an online business you will know that the most important thing is the list of subscribers. And a slow loading site makes people less patient when registering or subscribing.
  • It affects your community – if the readers who visit you usually do not feel comfortable they will stop visiting your site. Waiting for your website to load is very bad if you want your site to grow instead of diminishing, take care of them as best you can.
  • Affects your sales or conversions as you’ve seen a little higher load time is critical if you want to generate conversions or sales with your website.

Let’s start to understand how we can optimize to Load website much faster and consume fewer resources on the server

Things can do to Improve Page Loading Speed

The speed of any website can be optimized through the recommendations made by Google.

Enable GZip compression 

How To Improve Page Loading Speed - Reduce Website's Page Loading time

Gzip is the most popular and effective compression method to Improve Page Loading Speed and generally reduces around 70% response time. The compression of HTML and CSS files with gzip usually reduced by about 50 to 70 percent of the file size. This means it takes less time to load your pages and also less bandwidth consumed by the server and Improve Page Loading Speed.

It’s pretty much the current standard and if you’re not doing it, for some reason, your web pages are sure to be slower than your competitors.

How to enable GZip on your web page?

In many cases, HTML and CSS files take a lot of space on servers and need to compress them to Improve Page Load Speed.

Compression can be done by adding a piece of code to a file called “.htaccess” located at the root of your server. For this, you will have to access the files of the server using FileZilla or accessing the control panel of your hosting. The “.htaccess” file controls many important things on your website.

To enable Gzip compression, add a piece of code in the file named “.htaccess” which is located at the root of any hosting server. If you do not find this file, I recommend that you ask the service of your hosting.

Do a speed test. if you have the result that says you have to ” Enable GZip compression“. Here I will tell you how to solve it. If you have not already done the test, you can enter the speed test to see the results.

Enabling gzip compression reduces the size of the HTTP response and helps to Improve Page Loading Speed and reduce response time. It is an easy way to reduce the weight of the page. You can activate it in different ways.

If PageSpeed advises you to ” Enable Gzip compression “. Follow the instructions that will depend on the web server in which you have hosted your website:

Add the following code to your “.htaccess” file:
<ifModule mod_gzip.c>
1.mod_gzip_on Yes
2.mod_gzip_dechunk Yes
3.mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
4.mod_gzip_item_include handler ^cgi-script$
5.mod_gzip_item_include mime ^text/.*
6.mod_gzip_item_include mime ^application/x-javascript.*
7.mod_gzip_item_exclude mime ^image/.*
8.mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

Save the “.htaccess” file and update your web page. You can retake the speed test to see the changes.

    • Or add the following code to your “.htaccess” file:
    # Compresses text, html, javascript, css, xml: 
    1.AddOutputFilterByType DEFLATE text / plain 
    2.AddOutputFilterByType DEFLATE text / html 
    3.AddOutputFilterByType DEFLATE text / xml 
    4.AddOutputFilterByType DEFLATE text / css 
    5.AddOutputFilterByType DEFLATE application / xml 
    6.AddOutputFilterByType DEFLATE application / xhtml + xml 
    7.AddOutputFilterByType DEFLATE application / rss + xml 
    8.AddOutputFilterByType DEFLATE application / javascript 
    9.AddOutputFilterByType DEFLATE application / x-javascript 
    # Compress certain files by extension: 
    <files * .html> 
    SetOutputFilter DEFLATE 
    </ files>
    • Using the following PHP code at the top of your HTML/PHP file
    <? Php if (substr_count ($ _ SERVER 
  • ['HTTP_ACCEPT_ENCODING'], 'gzip')) ob_start ("ob_gzhandler"); Else ob_start (); ?>
By adding this code to your “.htaccess” file, it will enable GZip compression for the most common files and will help web pages load faster. This not only helps to Improve Page Loading Speed but also reduces the bandwidth of the server. If you pay for bandwidth, can save you enough money by doing this.

Leverage Browsing Cache 

How To Improve Page Loading Speed - Reduce Website's Page Loading time

The Browser cache has a significant impact on improving Page Load Speed. Its function is that the user does not have to reload your entire web page visit each time. When you set an “expires header” for a resource such as JPEG images, the browser stores them in its cache.

The next time the visitor returns to your web page this resource will load faster because some of those items are stored in Cache memory. You should always install a good cache plugin to make your site load faster for your visitors. A free plugin is WP Super Cache that is very simple to set up and does your job well without invest money. Through browser cache, you can store files (images, JS, CSS, etc.) and objects (multimedia, PDF, etc) that can save loading time if you have a lot of visitors on your site.

This means that a user of your website does not have to reload the JS, CSS files, logo, etc. on the second visit and therefore the loading of the pages will be much faster.

If Google PageSpeed Insights indicates ” Specify browser cache ” you should add a piece of code in the “.htaccess” file located at the root of the server.

In that code, you must set periods of time for the cache file store through the values “Expires” and “Last-Modified”. It is best to see it with an example:

  • Add the following code to your “.htaccess” file:
EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
1.ExpiresByType image / jpg "access 1 year"
2.ExpiresByType image / jpeg "access 1 year"
3.ExpiresByType image / gif "access 1 year"
4.ExpiresByType image / png "access 1 year"
5.ExpiresByType text / css "access 1 month"
6.ExpiresByType text / html "access 1 month"
7.ExpiresByType application / pdf "access 1 month"
8.ExpiresByType text / x-javascript "access 1 month"
9.ExpiresByType application / x-shockwave-flash "access 1 month"
10.ExpiresDefault "access plus 1 month"
</ IfModule>
## EXPIRES CACHING ##

Set different caching times for different file types

In the code above you can see that there are periods of time like “1 year (1 year)” or “1 month (1 month)” this will helps to Improve Page Loading Speed. These are associated with file types. For example, in the above code, .jpg (image) files are cached for one year. If you want to change this time so that it cached for a month you only have to replace “1 year” with “1 month”. The above values are highly optimized for most web pages and blogs. For example, “pdf” is cached for one month.

The expiry date “Expires” is set over a period of time (day, week, month, year), while “Last Modified” through a date. To avoid problems set the Expires date between a week and a year.

Note that the value “Expires” is the priority as the cache header.

Expires ” is used to specify the period in which the browser can use the resource in the cache without checking that a new version exists on the web server.

Last Modified ” is used to specify how the browser will determine if files are duplicated before being cached.

If you need to expand the information, you can use Google’s ” Specify Browser Cacheinstructions.

Cacheable Redirects

How To Improve Page Loading Speed - Reduce Website's Page Loading time

The redirections are instructions that take users looking for a file to another file. These are carried out in many ways. Sometimes web pages redirect users/visitors to different URLs through HTTP. So do cacheable redirections that can accelerate to Improve Page Loading Speed. There is two most common redirection called 301 (permanent) and 302 (temporary). Which are made through HTTP and explain why a page or resource has been moved. A redirect trigger is an extra HTTP request and adds latency. Keep only those redirects that are technically necessary or that can not be avoided.

To Improve Page Loading Speed, Google suggests minimizing redirections and advises you to eliminate non-strictly necessary redirects, ie not links to the web page that associated with redirection.

Here are the recommendations from Google:

  • Never refer to URLs that you know will be redirected to other URLs.
  • You should never need more than one redirect to reach a particular resource.
  • Minimize the number of additional domains that issue redirects and do not serve content.
If you need more information visit Google information on ” How to avoid landing page redirects “.

Redirects are something like this. They cause your pages to load slowly as time is wasted to go to one place and then be redirected to another.

When it comes to your web pages and you’re trying to get your pages to load faster, redirects are a good reason for this not to happen.

It’s a good time to check all the redirects on your website to Improve Page Loading Speed. See where they are and think about how to change them. Or if they are important enough to slow down your page. Google suggests deleting redirects that are not absolutely necessary for:

  • Never link to a page that you know has an associated redirection. This happens when a redirect has been manually created but the text link in the HTML code has never been changed to point to a new location.
  • Do not make more than one redirection to any of your resources.
Do not forget that your web page does not only load HTML code.
Virtually all web pages require other resources to be uploaded. You may believe that you have no redirects in the HTML code, but what about external CSS, images, or JavaScript files? Make sure you know what resources your website needs to upload.

Optimize Images and CSS sprites

How To Improve Page Loading Speed - Reduce Website's Page Loading time

When designing the web page you must indicate the dimensions of the images to the navigator. Otherwise, the page will be “built-in” load the text first and then it will begin to load the images. When you specify the dimensions of the image, the browser knows the size and use the information to shape the page without rebuild it. Once you measure the speed of your web page, Google PageSpeed Insights warns you to ” Optimize images”.

Imagine that, you have six images that you use in the design of your main page and the browser has to download them individually. If combined in a single image, you can drastically Improve Page Loading Speed.

This reduces the “round trip”, from the browser to the server, necessary to visualize the page making your site faster. Instead of downloading six images, your web page now has to download only one.

Most web pages use many small images in their design. The background images, corner images, icons, menu items, etc. These small images really consume fewer resources when you focus on improving Page Loading Speed.

Each image must be downloaded, which means that the browser has to request the image to the server, the server has to send it and then the browser has to display it. If you only have to upload one or two images, that’s fine, but as they are more images to upload, it is worse for the loading speed of the page.

The solution is to use the CSS sprites method that allows you to combine several small images into a single image so that the web page can display them much faster and Improve Page Loading Speed.

Compress Images

Images can ostensibly reduce the loading speed of a web page. You should Improve Page Loading Speed.

Google is able to detect images on the page that can be reduced in size without losing a noticeable visual quality. If you save a suitable format in the images, cut out the unnecessary space and the compresses, you can achieve a significant saving of space and Improve Page Loading Speed.

For this, you can use any photo or image editing program.

I usually use Pixlr in its basic version ” Pixlr Express ” for small touches or its advanced variant ” Pixlr Editor ” for more complex editions. You can additionally compress them without loss of quality in JPG and PNG files.

Remember that:

  • Do not use BMP or TIFF files
  • Uses only GIF files for images with animations or for simple or very small graphics in size.
  • Use JPG for complicated pictures and illustrations. Not to compress more than 70-80% to lose excessive quality. This will Improve Page Loading Speed.
  • Use PNG for web backgrounds, icons or graphics that are not pictures. It is a lossless image format.

Specify Dimension 

Browsers reproduce your web page around your images. You can Improve Page Loading Speed only if you know the size of your images.

If you do not tell the size of the images (high and wide), the browser will rebuild the same page several times when having to download the images individually. And reconstruct it each time.

For this, insert the HTML code in the “image” tags.

  • Tag without dimensions:
<Img src = "image.jpg" />
  • Image tag with dimensions (width and height)
<Img src = "image.jpg" width = "200" height = "200" />

Real scale 

Always show images in the HTML code that match their actual size.

When you display an image in HTML larger than the actual dimensions (for example: a 100px image per 100px according to HTML samples at 60px by 60px), the browser downloads the largest image, but shows the smallest image on the page Web. This will reduce Page Loading Speed.The browser will not have to download an image bigger than its actual size. So remember, if the full-size image is too large, make it smaller but do not resize it with HTML.

CSS Sprites 

The vast majority of web pages use many small images that consume fewer resources to Improve Page Loading Speed. You need a solution that allows you to combine these small images into one to make the page appear faster. CSS Sprites allows combining several images in one to Improve Page Loading Speed.

JavaScript blocking content

How To Improve Page Loading Speed - Reduce Website's Page Loading time

Remove JavaScript blocking and Improve Page Loading Speed. Render-blocking means that the JavaScript keeps the page loading. For this reason, you have to remove the JavaScript that blocks the display of the content.

Google recommends that remove the JavaScript that interferes with loading the top content of web pages (above the fold). The top content is that a user initially sees on their screen. That screen can be a phone, tablet, iPad, desktop computer or whatever the user is using to view the web page.

This method used by many people who use PageSpeed Insights. but it can be confusing for the most webmasters and designers and may even seem impossible to do. This is not only possible but it also requires being a good blogger and worrying about users with slow connections. If you do not optimize pages for this your Google ranking will be on the fall down.

Specifically, if Google sees that web page does not load well for certain devices (phones, iPad, etc). It will not include that website in the search results. You should always know what page is taking too long to load. There are several ways to do this. To specifically know which files or web pages are currently blocking the display of content, you can use the Google PageSpeed tool. This tool will tell you the exact files that blocking the content of a particular page at that time.

JQuery

The most commonly guilty JavaScript file is “jQuery“, which is a JavaScript file that is used in a large percentage of web pages. 

This JavaScript file is quite large, in fact, it may be the largest file on a web page that blocking the loading of content.

jQuery is a very popular JavaScript file and is often use to make animations like submitting a form without loading the page. Usually, there is no reason to load jQuery before uploading web page. However, the vast majority of pages do.

If you use jQuery for some type of application in “below the fold” then there is no reason for it to load before the content of the page. But if jQuery load before the content then you will make users/visitors wait a long time for the content they have searched for.

To correct this you must change the line of code where the jQuery is called. This can be done in the HTML code of your web page.

The most websites make the jQuery in the document header, as shown below:
<head>
<title>title here</title>
<meta name=description content="description here."/>
<style>styles here</style>
<script src="jquery.js"></script>
</head>

That made to call jQuery (a fairly large file) and the browser will download it before anything else is going to be displayed on the page. This is really harmful to users/visitors and positioning in the search engine. In this case, the call to jQuery should be removed from the document header and moved to any other place below the page where it is needed. It will Improve Page Loading Speed.

<!—Write here the content you do not need jQuery -->
<script src="jquery.js"></script>
<!—Write here the content you need jQuery -->

Defer loading of JavaScript

Deferring the load of JavaScript is one of the warnings that the PageSpeed Insights gives. This method is typically used to load external JavaScript code to Improve Page Loading Speed. Many people apply the “defer” method or the “async” method. and many people say “you have to put the JavaScript at the bottom of the page”.

None of the above are solutions to the current problem that allows loading a web page completely and then loading the external JS. And it is not a solution to resolve the warning that is received from the Google PageSpeed Insights tool.

How to defer JavaScript loading and Improve Page Loading Speed.
The following code is what Google recommends. This code should be placed in the HTML code just before the </ body> tag (at the end of the HTML file).
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

With this code, you can get the whole document to load first and then load the external “defer.js” file.

  • Copy the code above.
  • Paste the code into the HTML file just before the </ body> tag (at the end of the HTML file).
  • Change the name “defer.js” to the name of your external JS file.
  • Make sure the path to the file is correct. For example: if you use “defer.js”, the file “defer.js” must be in the same folder as the HTML file.

It is important because Google takes the page loading speed as a factor of positioning.

Combine external JavaScript

JavaScript files are very often found in several external files.

It is not always necessary to have these separate files. Most JavaScript can be combined into a single file. Combining all JavaScript files into one really reduces the burden on web pages. The browser saves time when requesting these resources before displaying the page.

You can usually combine them by simply copying and pasting the contents of each JavaScript file to create a JS master file.For example, if you have a JavaScript file named “script.js” and another called “function.js”, which are declared in the HTML code, you could copy and paste the contents of the “function.js” file into “script.js” .

Once this is done, you should remove the “function.js” declaration from your HTML. You now have only one JS file instead of two. The browser will it load before displaying the web page. It will Improve Page Loading Speed and the web page will load faster.

Use online JavaScript

The  JavaScript online means to insert JavaScript instructions in your HTML file instead of using an external JS file. The advantage of online javaScript is the reduction of time and Improve Page Loading Speed by the browser. Basically, you just have to copy the contents of your external JS file and paste it between the script tags in the header of your HTML code.
<script type="text/javascript">
Las instrucciones JavaScript van aquí
</script>
Adding JavaScript instructions in the HTML code will save time to the browser as it is not requesting a separate external file to the server to load it and wait for the JavaScript to be executed his will make your website load faster and Improve Page Loading Speed.

Optimize CSS delivery

How To Improve Page Loading Speed - Reduce Website's Page Loading time

“. CSS” can be used in many ways on a web page and still works. There are many ways to use it with many different CSS configurations. CSS should help your website to make it faster, not to slow it down and Improve Page Loading Speed.

The CSS is used on a web page “overwhelmingly” by website designers. The web designer makes impeccable and well-written CSS code and distributes it in several different files for clarity. However, you probably have CSS code that is hurting your website rather than helping you.

From the Google documentation page and on PageSpeed Insights videos page they recommend 4 techniques to have a good CSS configuration:
  • No more than one external CSS style sheet.
  • Short CSS instructions on style labels for the top content of the page.
  • Do not make calls (@import) of CSS.
  • Do not add CSS lines in the HTML code in elements like DIV’s or H1’s.
If you are familiar with these different CSS techniques you can use the PageSpeed Insights tool to get an overview of how your web page or blog uses CSS. If you’re not, do not worry, I’ll explain each one to you below (which is less confusing than it sounds).
Many people ignore it when they hear that Google advises ” making pages for users, not for search engines “. It seems a little unreal that you want to follow this advice. After all, you are making a website to be seen in the search engines. But before we ignore it let’s see what they mean by this.

External CSS files

External CSS files are mainly the way CSS is used on web pages and most likely the way you use your CSS. In the “head” section of the HTML code, there will be a line of code that looks like this:
<link rel="stylesheet" type="text/css" href="http://www.tusitio.com/style.css" media="screen" />
This code calls your CSS file and they are called “external” because the CSS instructions are in a file separate from your HTML. The advantage of this type of CSS is that the browser saves an external CSS file in its cache and handle it. The problem starts when the web page has several of these files. Unfortunately, this happens very often in WordPress and other CMS.
If you have more than one CSS file these should be combined into one file.

When you have several external CSS files, the browser has to download each one before you can download your page. This causes many “back and forth” to download all CSS files and translates into a slow web page. This can be easily changed by combining all CSS files into a single file.

Combining external CSS

Th CSS file, which is using the website and reduce the loading speed of the page. Sometimes this is inevitable, however, in most cases, you can combine two or more CSS files using the familiar “copy and paste” technique to Improve Page Loading Speed.

One of the reasons why you have several CSS files is because the designer of web page found that it is easier to work with separate files.

A CSS file, which contains all the information will work just as well and will improve the speed of your page. Combining all CSS in a file greatly reduces the amount of time that takes to load the web page.

It reduces a number of resources that the browser has to load before displaying the page.

You can often simply copy and paste the contents of each CSS file to make a CSS main file. You will have many CSS files that are being loaded and you can create a new CSS file that contains all the content of the others. With this method, you will keep all your old CSS files safe and named correctly in case you have to use them again.

Another way to do this is to have two or three CSS files and simply add the contents of a file to an existing one. For example, you may have a CSS file named “main.css” and another called “sidebar.css” that are declared in the HTML code. To combine them, you can copy the contents of “sidebar.css” and paste the contents of “main.css.”

Once you have done this, remove the statement to “sidebar.css” from the HTML. Now you have a single CSS file instead of the two that had to load the browser before displaying the web page. This will Improve Page Loading Speed and the web page will load faster.

Online CSS

Online CSS are the CSS statements that are included in the header of the HTML document. The main advantage of this method is that there is no additional (external) file that needs to be loaded before the web page is displayed. This advantage is only feasible if the CSS instructions are few. If the CSS is large then it is not a good method.

The online CSS method is carried out by placing the instructions inside the style tags as shown below:

<style>
CSS instructions go here
</style>

This method can really speed up the loading of pages in browsers.

Do not use “@import” to load CSS files.

The @import method is when external CSS files load other external CSS with the @import command instead of binding them as mentioned above. This method causes the CSS file or called files to load slower.

@import url("style.css");

This method is really effective to the Improve Page Loading Speed.

Do not add CSS in HTML elements.

It is very common to add styles in HTML elements. In Google’s PageSpeed Insights guidelines, under ” optimize CSS delivery “, Google says we should not do this.

This will make the browser respond slower and that it will not be good to apply this technique. It goes against the W3C content security policy. which is a security protocol that will block any style in the elements by default. An example of this method can be:

<p style="float:left;"> or
<div style="color:#fff;">

Conclusion:

As you can see there are many ways to use CSS in web pages but the bottom line is that we have to clean code and optimize CSS delivery to ensure that pages load faster. The recommendations are as follows:

  • Combines external CSS stylesheets.
  • Add short CSS instructions to the header.
  • Do not use the @import statement to import CSS.
  • Do not use CSS in HTML elements within the content.

Prioritize visible content

How To Improve Page Loading Speed - Reduce Website's Page Loading time

Google likes the pages that show their content quickly and this article will give you a guide on how to make your pages show the content faster.

If you’ve done the Google PageSpeed speed test and have been shown the ” prioritize visible content ” warning, this guide will help you fix it.

Prioritize main content

One of the quickest, simplest and most common way to Improve Page Loading Speed is by ensuring that HTML presents the content of your web page before anything else. To illustrate this, let’s look at a very common scenario.

Page with sidebar

The web page that has a sidebar on the left and the content on the right and the sidebar is found before the content in the HTML code. This is a critical content that is shown before other things. The reason for this is that if the sidebar is mentioned first in the HTML code then it will load first before the content area.

In a typical sidebar, there are ads and buttons of social networks and other content that depends on third parties. So, if the sidebar is loaded before the main content, user/visitor will wait for the content that he wants to see.Let’s say you have a Google AdSense ad, a Twitter button, a Facebook button, and a Google+ button in the sidebar. In this scenario, you are not only adding seconds to the page load time, but you are also adding seconds to the time the user waits to see your content which is not good at all.

If the contents of the sidebar take the time to load, the browser will have to wait until everything is loaded before the main content. The user/visitor will be frustrating as it has not reached to see the main content but to see a sidebar, footer or social networking buttons.

This could be changed with a simple action. Take the next step to introduce your users to the main content first.

Place the content section before the sidebar.

If you simply copy the sidebar section and paste it after the content section, the page will present the main content first without having to wait for everything in the sidebar to load. In the HTML code when the content section found first, the content will load first. It’s the best way to Improve Page Loading Speed.

  • The website is downloadable and shows your content.
  • Users/visitors can view the content almost immediately.
  • As your users read the content, the ads and buttons in the sidebar can continue to load.
  • Users are happy because they do not have to wait.

This is an example of changing HTML structure to display critical content first but there are other things we need to do to make sure our pages load faster for users and for Google.

Load the top content of the page first.

The concept of loading the top content of the page first can be confusing. To explain what Google thinks about the footer of your site. Why user/visitor have to wait to see the page while downloading the CSS code, JavaScript, images, etc? A lot of our visitors never get to see the footer of our site. Consider the following situations.

  • User visits your home page, finds what looking for in the main menu clicks and goes to that page.
  • A user enters one of your web pages, sees an ad and clicks on it (leaves your page).
  • A user is looking for a lamp to buy it and ends on your page which sells lamps. Find the lamp want and click on the image to see the details of the item.

The footer

In an ideal situation, the user could see the main content of your web page without waiting for to load the footer. But how is this achieved?

It requires a little common sense and planning. However, once you understand how to do it for a page, you’ll be able to make it work across your web quite easily. But you have to start with a page.

Let’s examine how a web page loads:

How Browser load a web page

When the web page loads the browser takes follows certain steps to determine how to load your page (this is a summary but basically is how it happens):
  • The browser downloads the HTML code.
  • Analyze the HTML code.
  • Find some resource that you have to upload (image, external CSS file, etc).
  • Load the external resource.
  • If the external resource is CSS or JavaScript, the browser will parse the file.
  • Then continue analyzing the HTML code until you find another resource to load.

Throughout this process, the browser tries to display the content as soon as possible. Consequently, there are ways to ensure that the content of some of our web pages is loaded first and fully before the browser encounters any obstacles such as external resources.

The top content of the page can be prioritized, without having to rely on external resources or the prompt loading of these resources.

Avoiding incorrect requests

How To Improve Page Loading Speed - Reduce Website's Page Loading time

Sometimes the HTML or CSS code will request a resource, such as an image or an HTML file, that does not exist. When this happens, the browser and the server begin making requests that are no use.

If it’s conversation it would look something like this:

Browser: “I need this image”.
Server: “I do not have that image”.
Browser: “Are you sure? This document says that you have it. ”
Server: “Sorry, but I do not have it”.

These requests really slow down web pages and you should need to Improve Page Loading Speed by resolving this issue. This causes more “back and forth” nonsense by the browser and also can be the cause of more DNS searches that could further slow down the web page.

This happens more often than you think. An example is when you use a template to make a website and change some lines of code. Then you discover that the CSS file is requesting something that you are not using (like a background image).

Detect incorrect requests

Many times wrong requests are quite obvious like an image, which is not supposed to be. Sometimes there is no visual indication of incorrect requests. So it is a good idea to always remove unused CSS lines. Use the Page Speed tools to examine web pages is the best way to know if the HTML file is loading non-existent resources. Google PageSpeed Insights can show the wrong requests that have on your website.

Resolve incorrect requests

It is much easier to find incorrect applications and resolve them. If you find that you have one or more, simply remove the code that loads that resource or replace it with the missing resource. It will help to Improve Page Loading Speed. For example, if your web page is loading an image that is not there, change the “src” image to point to the image you want or remove the code directly.

Avoid using the document.write method

How To Improve Page Loading Speed - Reduce Website's Page Loading time

In JavaScript, you can use “document.write” to display something on a web page or call an external resource. To display or call any resource using document.write the browser must execute many steps.

This method is especially detrimental to the page loading speed. If you are using it to call an external resource, the browser can not know what it is calling until the script is executed.

If you do not know what document.write is, don’t need to worry about that. However, if you have received an alert from a speed test web page to let you know that you are using it, you must delete it and replace it with basic HTML.

You’ll need to look up the document.write the statement in your files, analyze its behavior (the action it takes) and replace this statement with HTML code. To find it you can do it by searching for ” document.write ” in your HTML code. That’s the easy part.

To analyze behavior you will have to read the code. The following is an example code in which document.write calls an external resource.

document.write('<script src="script.js"></script>');

The above code calls an external resource (script.js). This means that the browser has to read and execute this instruction in order to know what the “script.js” file needs. This process makes the browser unnecessary and Improve Page Loading Speed.Here’s the solution of the external resource “script.js” through a line of HTML code.

<script src="another.js"></script>
Calling an external resource using HTML allows the browser to know what that resource needs much faster and allow to display web page faster.

Minimize DNS Queries

How To Improve Page Loading Speed - Reduce Website's Page Loading time

As a web page grows more in content and resources then is uses more DNS queries that make it much slower. DNS stands for “domain name server”. The browser must do this at least once for each domain when a web page is receiving resources. This process can considerably slow down the web page. And one of the most important decisions you must take to Improve Page Loading Speed. And set it to how many DNS queries have to perform.

A small web page, which loads in 1 second, can become a badly damaged web page, it takes 3 to 6 seconds to load, simply by doing additional DNS queries. If you are experiencing your website load slow, check how many DNS queries web site makes and why it is doing them.

An example of this could be a social networking button (facebook/twitter/google +). These buttons can request one or more resources and can add even more DNS queries.  Many of the features of a modern website are great resources and consult different domains to do their job. Another example of this is Google Web Fonts. This resource requires two DNS queries.

In this case, the website needs one of the first steps to creating a faster and more enjoyable page for your users/visitors.

Is loading a source equal to an additional half-second? Sometimes yes sometimes no. Are social networking buttons more important than the speed of your page load? It depends.

Creating a good balance between the loading speed of your page and DNS queries is mostly about deciding what is most important for your web page.

There is a complete tool called webpagetest.org to perform speed tests of your page. It will show the number of requests that your web page is making. Look carefully at the results and count the DNS queries to Improve Page Loading Speed.

Enable the Keep Alive Communication Protocol

How To Improve Page Loading Speed - Reduce Website's Page Loading time

Wikipedia says about Keep Alive: “It is a message sent from one device to another to verify that the link between these two is in operation or to prevent this link from breaking.” In short, Keep Alive is a form of communication between the web server and the browser that says “you can take more than one file”. There is a “brief communication” in which the browser requests a file and the web server says “yes or no”.

When a web browser wants to display a web page, it must load the HTML file first. Then It will read the HTML and request other resources such as CSS, images or whatever the HTML file has declared. While Keep Alive is not activated, this process can be translated for a long time to download a web page. Web pages are often a collection of many files and, if a new connection (short communication) has to be executed for those files, it could be longer viewing the web page.

Some people mistakenly believe that they do not have to worry about this HTTP connections because by default persistent ( Keep Alive enabled). While this is true, many people use shared hosting environments or web servers that can close connections without the user’s knowledge. This is for performance reasons, and since millions of web pages are hosted in shared environments, there is a clear need to determine that connections keep KeepAlive turned on.

Using the .htaccess File

How To Improve Page Loading Speed - Reduce Website's Page Loading time

The .htaccess file is a small, powerful text file that controls many aspects of how web pages are displayed. Aspects such as redirects, enable compression, rewriting URL’s, browser cache and much more by adding a bit of code to this small file.

However, even a small error in changing or updating the file can cause extreme results (such as web pages that are no longer seen) which are a major reason to be very careful editing this file but you should not be afraid to do so.

I’ll describe how to make changes safely and make sure you always have a working copy that works well.
The name means “hypertext access”. The file offers a way to make changes to your server that are normally made in the server configuration files. This file allows you to do many things that you did not think were possible. The .htaccess file is used by Apache and Litespeed among others. It is very likely that 90 percent of those who read this article use this file.
This file is a text file so you can edit it in the same way you edit any other file in your hosting service. However, before doing so, there is one very important step to take:
Always back up your current .htaccess file before modifying it!
 I’m serious. You first have a security copy before making any modifications to this file. Remember that modifying this file incorrectly can damage your website or even make your website disappear from Google search results. If you have a backup then you do not need to worry about that.
  • Always have a functional copy of your .htaccess file in a secure location.
  • Every time you make a change to this file, save the file and update your web page in the browser to make sure it still works correctly. Doing this will save you many problems.
  • If you do something wrong you just have to copy and paste the contents of your backup into the .htaccess file. Save it again and your website will work as it did before.

Leave a Reply