Improve Page Loading Speed
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
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:
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:
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 (); ?>
Leverage Browsing Cache
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:
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.
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.
Optimize Images and CSS sprites
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.
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.
- 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.
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" />
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.
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.
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.
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 -->
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.
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.
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.
Optimize CSS delivery
“. 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.
External CSS files
<link rel="stylesheet" type="text/css" href="http://www.tusitio.com/style.css" media="screen" />
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 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.
This method is really effective to the Improve Page Loading Speed.
Do not add CSS in HTML elements.
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;">
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
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
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.
- 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.
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
- 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.
- 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
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
Avoid using the document.write method
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.
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.
Minimize DNS Queries
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.
Enable the Keep Alive Communication Protocol
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
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.
- 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.