BLOG

Category Archives: Page Speed

How to fix the slow Server Response Time?

05 Dec 2017
Chandru
3 Comments

Google recommends you to have a Server Response Time lesser than 200 ms.

Server Response Time is simply the time taken by the web server to respond to every single request made from the web browser.

Know what happens whenever a page is loaded?

When a user wants to open a particular web page, a request is sent from the web browser to the server to show its entire content and this process takes some time to execute.

This time taken to display a requested web page needs cumulative loading of both front-end and server-side components.

Nothing can happen till the requested HTML is received and loaded. Agree?.

Server response time plays a vital role in page loading time, which governs the deciding authority of whether or not to display your website instantly.

In my other blog, I have discussed why do you need to improvise your website’s performance?. Please refer to that.

Just think that you have optimized your web page and didn’t have a quicker response from the server, then you are still falling behind your competitor.

In general, whenever you find your website loading slow, you will immediately analyze it using the below tools and enhance your webpage load time. Some of the powerful tools to do that are:

GTMetrix  –  gtmetrix.com

PageSpeed  –  developers.google.com/speed/pagespeed/insights

SpeedBoost  –  speedboost.xyz

If by just optimizing the front end, results in quick load time, then imagine the effects on your website when you optimize the server-side too.

Yes, basically, your website will be lightning fast, thereafter.

Look into what Google says:

https://developers.google.com/speed/docs/insights/Server

There are many factors that slow down the response of your server and you can resolve it using the below-mentioned mantras:

  • Collection and examine the data.
  • Find and fix
  • Constant monitoring and awareness of further mishap.

The factors are:

  1. Quality of Database
  2. Web Hosting and Traffic
  3. Web Server Software
  4. Why reduce Resource Usage?

Before jumping into the factors, let’s look into this question,

How to reduce Server Response Time?

There are two ways to reduce the response of the server to a request.

  • Optimum utilization of existing resources.
  • Enhancement of the resources.

Both ways mentioned above can be related to all the factors that affect the server response time.

 

Database:

Considering SRT, the database is the prime factor normally.

Don’t allow any rooms for slow queries, as they are the topmost focus, because every time you make a request, the slow database queries make the server respond very slowly.

If your website depends on recovering data from a database, then you need to optimize your database to perform well.

You need a well-organized database to speed up your performance of queries and analyze your database response time.

To boost the performance of your queries, the following has to be done:

  • By rewriting the Queries
  • Use of relevant indices
  • Altering the Schema
  • External cache usage

 

Web Hosting and Web Traffic

Higher the Traffic, higher is the usage of server resources. It ultimately delays the response time of the server ending up in serving very few users in a specific period of time.

Also, even a quick loading website will become slow and torpid. So, the question is, how many resources are needed for a single user?. Well, it depends.

For instance, If your server can handle 200 requests every second, you can serve 50 resources for 4 users, 25 resources to 8 users and so on…

The below given pictorial illustration is just an example for you to grab it much better.

So, the thumb rule is, when you find increasing traffic, hosting enhancement needs to be done. Well, how to improve the performance of your hosting?. I’m suggesting you the inexpensive options to get maximum performance and to get rid of the traffic.

  • Free Hosting – Your website won’t have a lot of traffic in this hosting and it is non-risky. But you will experience slow speed connection, huge downtime, ads on the web pages.
  • A Shared Hosting – You can share your website’s resources with a lesser cost website. Again, you need to focus on various parameters like connection speed, server software, service, etc.
  • VPS Hosting – Virtual Private Server hosting – Many users share a single server. Allocation of server space is done for every website and you have to utilize only from that strictly allotted space. In this case, there will be a demand for resources as you can’t expand the server space awarded to each user.
  • Dedicated Server hosting – Your website will have its own server. You will be entirely responsible for your server as you won’t be sharing your resources, which speeds up the performance.
  • Cloud Hosting – In this case, your website doesn’t depend on just 1 server rather a lot of servers, hence the name cloud. You don’t have to feel for the resources as it is available across many web servers. There won’t be any bandwidth problems as this type of hosting lets you to handle the peak loads.

 

CDN – Content Delivery Network

You can access the files quickly when your server is hosted in a nearby location. Imagine you are several miles away from your hosting server, then what would you do for loading your website in that specified amount of time?

In this case, even if you enhance anything, the slow loading can’t be fastened.

One thing has to be done. You need to have a Content Delivery Network (CDN) for your mother hosting server and serve your website’s visitors with the fastest display.

This came into effect because of Google’s Page Speed factor. Mobile and Tablet users are also the reason for CDN existence, as they purely hang on to speed for everything.

Use of PHP – WordPress

Always remember one thing – the higher you are making your server to serve a user, the slower it will be responding.

You need to check, monitor your PHP scripts and ensure that they are updated and properly handled at regular time period. If this is done, naturally your webpages won’t experience a slower response from the server.

The server has to read and follow instructions of PHP every time you try to squeeze the contents to the customers. So it’s important that you have a thorough watch into this area too when it comes to SRT.

When it comes to server response time in WordPress websites, Plug-ins also plays an important role. To know more about the Plug-ins, refer the below link:

https://www.webspeedmaster.com/should-i-use-plugins-on-my-wordpress-website/

 

Cache

Another metric which is needed for a quicker display of your website is cache. This prevents the server from executing unwanted works.

You can try using WordPress Super Cache or W3 Total Cache to ensure a speedy response from the server when a request is made.

 

Are you using the right Web Server Software (WSS)?

There are many good WSS which comes free, I have listed you three of them below. It doesn’t matter what Web Server Software (WSS) you are using, it can be configured according to your needs.

Whatever you do, it should enhance your server response time and concerning the server software’s, three of them are given below:

  1. Apache web servers
  2. Litespeed web servers
  3. Nginx web servers

Apache – is the most used WSS and its free. It’s easily configurable and many might know how to deal with it. You need a lookup on the documentation when you have to have some changes depending upon your necessity. Coming to the run speed of PHP, it’s above average.

Litespeed –  They have both free and paid options. Litespeed performs pretty much better than Apache. Changing from Apache to Litespeed won’t be a bigger problem, as Litespeed is completely compatible with Apache (uses same “.htaccess” file). In this WSS, the run speed of PHP is the fastest among the other three web server software which is listed here.

Nginx – Nginx has the quickest Server Response Time, as it utilizes lesser resources. By doing this, it handles higher traffic rate than the other WSS naturally. It is a free web server. In this WSS, run speed of PHP is faster.

 

Why reduce Resource Usage?

Like I have already said, whatever you do should increase the server response time and reducing the use of the resource is one among the implementations.

By minimizing the utilization of the resource, you are creating enough space in your server thereby attracting more traffic. Also, the website loads quickly and serves every user.

Focus on reducing CSS, JS, etc..rather than creating pressure on the server side.

  • Unite external CSS files together – Unite two or even more CSS files together (Copy and Paste), as the use of several designs and themes might have separated all the CSS into many files.
  • Unite external Javascript files together – In a Similar manner to CSS, all Javascript can also be united together and it doesn’t affect any functions. You are actually reducing the load time of your web page by segregating all the JS files into one file.
  • Defer Images – Deferred images basically are downloaded after the initial load of the webpage. This actually helps the page to load even faster. This doesn’t download all the images instantly.
  • Inline Javascript and Inline CSS – If you unite and put both the CSS and JS in an HTML file, it is referred as Inline CSS and JS. You don’t need an external file for CSS and JS. Inline CSS, JS reduces the files that needed to be downloaded before displaying as in the case of external CSS.
  • Enable Keep Alive – Once you enable keep alive, you are further lessening the time taken for loading your web page by grabbing the HTML, CSS, JS files and images in an orderly fashion and not requesting the server for each and every load. In this case, you are using a fewer server resource. Not enabling Keep Alive will take enough time to load a page and an unwanted usage of the server resource.

You are highly recommended to follow the page speed norms and best practices.

This ultimately serves more and more customers in a much effective way.

 

Wrapping Up:

Try to reduce the work of your server and you will find your website quickly displayed all the time. As a matter of fact, server response time measures a much lesser proportion when it comes to serving your site to the customers. But there are many ways to increase your server’s performance.

Combine all the metrics which we discussed, such as database optimization, web hosting, web traffic handling, use of right web server software, CDN usage, PHP monitoring, cache usage, reducing the use of resources, and apply systematically using three mantras of gathering, fixing and watch over. Optimizing all the factors will naturally lead to a very quick load of your website.

Do this along with the page speed norms and you will personally experience it in fact. Basically, you are fastening the time of the server to respond to a request made by a browser and the result is, displaying your website in a lightning fast.

 

If you find this blog useful, please share it.

If you by any chance feel that I have missed anything, you are requested to post a comment, that way I strongly feel that many may get useful information.

You might have plenty of experience in fixing server response time. It is highly appreciable for sharing those for us.

Any specific thoughts, which has helped you to overcome Server response time issue?

Share this post :

Category Archives: Page Speed

Why do you need to eliminate render blocking CSS, JS?

29 Nov 2017
Chandru
No Comments

It’s painful when you see your website loading slow, though you have optimized your front-end and the server-side components using the relevant tools and practices. I know how that feels.

What could possibly be the reason, then?

Have you ever given any thought about fixing the render-blocking? Well, this blog will help you with certain useful tips to fix it.

Before jumping in, you need to understand it. Don’t you?.

In easy terms, (Eliminate–remove, Render–layout, design-display webpage, Blocking–stopping) i.e., Render blocking removal.

Every time the browser is loading your web page, the CSS and JS resources also wants to be loaded at first priority before the HTML does. It is default that, CSS is considered as render-blocking resource. Nothing will load until the CSS and JS file loads or parsed. Do you wish to see your page like that?. Heck NO.

Every single CSS and JS files will affect the load time of your page in a huge amount.

But, have you noticed the results in deep, when you put your website’s URL in the pagespeed insights?.

You will find a result section showing the score out of 100 and the exact following statements: (i) Possible Optimizations and (ii) Optimizations Found.

Also, your WordPress websites will be having themes and plugin that adds js and css files to the front-end of your websites. These scripts slows the site load time and also render block of the web page.

 

Here, Now fix the render blocking CSS

The bigger and the larger CSS files will delay the page load much effectively.

But, at the same time, would you like to see a content that hasn’t been styled? Heck NO.

So, you need some CSS files on the page to display an elegant look Above The Fold (ATF), keeping in mind that, this CSS shouldn’t impede the load time of the page.

Know what ATF is?. In a page, when loaded, the content which you are able to see without scrolling is said as Above The Fold (ATF). The content when you scroll and see, is said to be below the fold.

To discover the exact files that are presently blocking the rendering of your webpage, use the tool Page Speed insight developed by Google. This tool will list you the entire files that are blocking a specific page.

Are you aware, what your browser does at the time when your webpage is rendered?

Firstly, the HTML is analyzed and constructs the DOM – Document Object Model. Secondly, the CSS is analyzed and constructs the CSSOM – CSS Object Model. Both DOM and CSSOM are structural representations of HTML and CSS for the better understanding of the browser.

Then comes the render-tree construction, which is nothing but uniting DOM and CSSOM, that suggests and explains the browser about the part to be rendered and how it needs to be appeared and then lastly comes your website display.

Info: when you make an attempt to render a web page without fixing the render-blocking CSS files, the browser downloads all the CSS resources and displays it.

The Critical Rendering Path is nothing but displaying the files in a line, according to the priority it allocates. This happens before the actual display of the webpage by the browser.

Optimizing critical rendering path is very much recommended for the fastest delivery of the first render.

Every single file eliminated makes an impact in the web page speed.

When you consider eliminating render-blocking CSS, you might think as well think of certain parameters relating to the usage of lesser CSS files, (i) By Combining CSS files, (ii) By Inlining the CSS files

(i) By Combining CSS files

Before getting into this, you need to label your CSS, because once you do the labeling efficiently, you are helping to choose only the chosen CSS files and displays without any delay in rendering.

Info: There may be many little CSS files (due to the plugins and widgets), but there will be a main CSS file which is big. If you are into Adsense, then this blog will be a great deal for you.

How do I combine the CSS files?

All you got to do is a simple copy and a paste work.

If you have many CSS files being called, converge it into one CSS file by just copy pasting it in a new CSS file.Let’s assume that you have four CSS files,

CSS1,

CSS2,

CSS3,

CSS4

You have to open the “CSS2” and copy all the contents in it and paste it into “CSS1”. In a similar fashion do the same for the rest of the CSS files. You will have one main CSS file which is “CSS1” having all the content of the rest of the three CSS files.

After that, make sure you remove the call for “CSS2”, “CSS3”, “CSS4” from your HTML. Now, you will have only one CSS file instead of four. Think the fast your webpage loads when four files got compressed into one.

Statement given by Ilya Grigorik,

“CSS is a render blocking resource. Get it to the client as soon and as quickly as possible to optimize the time to first render”.

(ii) By Inlining the CSS files

Inline itself means inside-lining.

Put your CSS files in an HTML file.

When you do this, you are helping the browser by reducing the number of files to be downloaded before your webpage is displayed. Also, your browser downloads only the HTML file.

How do I Inline CSS files?

You need to do two things:

Copy the entire contents of the external CSS files and paste it in the Head section of your HTML file between the style tags. Make sure you use the right HTML style tags.

Lesser render blocking and quicker loading of your page takes place in this case, as you are not requesting your browser for an individual external file to load to view your CSS file and it saves many trips from the browser to the server.

 

Render Blocking JavaScript (JS) – Eliminate it

This applies when your HTML experiences a render block JavaScript (JS) file in the above the fold part when detected by the pagespeed insight.

Again, refer to the discussions we had in the render blocking CSS as well.

The browser has to build the DOM by analyzing the HTML files every time before it renders a webpage. In doing this, if it comes across any scripts, it stops and checks it and then proceeds with analyzing the HTML. This time duration relates directly to the page drag. You need to fix this.

You can identify your page loading issues by using PageSpeedInsight related to render block JS files.

How do I remove Render blocking JS?

There are three ways.

(i) By the use of Inline JS

(ii) Making JS Asynchronous

(iii) Defer loading of JS

One of the largely used, heavier javascript file, in maximum webpages is, jQuery. You want a fade in and out for an image, then jQuery is a familiar JS file to use.

If you are using jQuery before the initial render and below the fold, then there won’t be any necessity for it to load unless there is a cause.

But if you are using it above the fold, then it goes without saying that you aren’t going by the rules of the regulations and guidelines of what the pagespeed says. In this case, you will have to look in for the HTML file and change where the jQuery’s call is made.

(i) By the use of Inline JS

You should have a lean JS file. Render blocking scripts pushes the browser to halt until they are being downloaded and many round trips for rendering the same.

In the case you having a lean JS file, then you can inline the contents of the JS file in the HTML file and prevent the delay in the page display and quickens the initial render.

By doing this, you need to take care of the HTML file size too.

(ii) Making JS Asynchronous

Why do this? You might have known that, the JS by default stops building DOM and ends up by delaying the time duration for the initial render.

Try using the below script in your HTML,

<script async src=”my.js”>

The following takes place when you use it,

The Asynchronoused scripts are downloaded by the browser

During this process, the browser does not stop for analyzing and or any building of the DOM in the middle. Also, any other scripts needed by the site is not prevented by this process. Until this script is done downloading, the browser not rests for any other actions.

(iii) Defer loading of JS

In simple terms, you can separate the scripts which does not have any impact on your above your fold content, for the initial render and they may be deferred until after the first render or all the important part of the webpage is loaded. This way, resource contention can be reduced and for the performance enhancement.

 

Wrapping up

Always have a concern about the WordPress themes and plugins you are installing, as they use CSS and JS which might be a challenge when it comes to render blocking removal.

Remember, if your webpage calls anything, then it seems to drag your load time.

jQuery forms a pretty good example in this case.

Based on the discussions, reducing the files and inlining them makes the file shrink and does the same work in a faster way which is what is needed for rendering.

Almost all the websites are facing the problem of rendering block. But the question is how to remove them. By following all the useful tips given above, you can easily boost up your load speed of your webpage, though you have done front-end optimization through ideal tools like pagespeed insights and SpeedBoost.

 

So, I believe you will find this blog useful.

I have suggested you from my experience and knowledge. In a similar fashion you might have come across several experiences which is worth.

Share your ideas and the tips you feel which we missed in the comment section.

Share this post :

Category Archives: Page Speed

How slow loading websites sucks your money on Google Adwords?

01 Nov 2017
Chandru
No Comments
quicker-website-more-conversions

Quicker sites make a quicker conversion and quicker money.

Think you are investing in your ads, there are only two possibilities, you might either end in gaining money or losing it. So, what metrics your profit rate depends upon?.

Revenue is mainly determined by Quality Scores, PPC ads, Adwords, Landing page, Page Speed and other metrics.

There are several ways to keep your website in the top of the Google rank system and we shall be discussing that here.

Know why you are losing money (no payback) even after paying Google to display your website at the top?.

Once paid, everyone thinks their work is done. Do you really think so?. No. Your job has just started.

If you are looking for money yield (payback), without following some parameters of enhancement, keyword research and all the other relevant factors, then you will end up getting nothing and every investment you just made is a total waste.

How about your website getting popular among the eCommerce sites overnight?. You like that?.

Well, that’s totally possible depending upon how you are closely monitoring your website’s efficiency to load and user experience and your Adwords and many other technical factors, ultimately serving your website presentable to the visitors and make sure they rejoice.

Certain mantras for you to make this come true:

Delight and fascinating a random visitor – create an enticing headline, PPC ad, Adwords;

Making this random person stay for quite a long period on your website – a perfect landing page will do;

A visitor might turn into your customer – enhance your webpage speed tremendously giving a tough competition to your opponents.

Do the customer satisfaction, continuous customers and possible referrals – Every time when the customer visits, this type of hybrid website will yield you profit and fruitful which is Google’s prime focus.

Not all in the world are using Google as their preferred search engine and this statistical report (Jimmy data) below proves that.

Have a quick look at it.

Only an excellent landing page will be chosen by the visitors. Else, they might either exit from your webpage or they will comment about it in a forum. You don’t need that, do you?.

You need to make sure that your website meets the basic conditions in the Google’s evaluation for a good landing page.

Once the visitors gain a wonderful user experience, which is what Google pays attention, your Click Through Rate (CTR) increases accordingly.

 

Pay Per Click

Paying to Google for a website that doesn’t profit you anything is a total waste.

Many pay money hoping to see their websites positioned in the first place in the search engine. Well, for some it happens and for the rest, it doesn’t.

The worst case is, you need to pay Google when the user clicks and enters your website. It doesn’t concern them whether you made a sale or not.

So, it’s up to you and your effort alone to follow certain metrics and serve your website to the users, making them choose yours and yours only, amid the eCommerce websites.

To make you understand about the PPC campaigns in a much better way, the below infographics will suffice.

Irrespective of the product you are selling in the landing page and PPC campaigns promoting it, every user wishes to see your ads lesser than 3-4 seconds.

Basically, your website should arouse the feeling that they have found the right one and worth spending time on it and of immense use for them.

 

Landing Page

A well built perfect landing page, being consistent with enticing PPC ads attracts more visitors. More the number of visitors, maximum the conversion rate will be, eventually.

Talking about the user experience, everyone has ample knowledge about everything these days, so all you need to do is to trigger it and make them feel that they have made a perfect landing.

That way a random visitor will certainly become your potential customer and once they love your products, whatever you are selling, you will come to know about the impact it creates in terms of conversion and your position in the Google’s site ranking.

Make sure that you create a unique and individual landing page for every ad about the new product and offers.

Always focus on the question – How would I be benefitted from this? Or What’s in there for me?. It helps you to think in user’s perspective.

Below infographic illustrates the features about having a nice landing page.

Acquire the information from the above infographics and try to implement it.

Coming back to attracting a customer, Choosing wisely the headline is also the best way to tempt users to click it immediately.

You can try using the question headline, the headline that answers the queries, reasons why should they click, with humor.

Refer to Landing Page from Google’s perspective for further information.

 

Quality Score

Though we knew about Quality Score, briefing it, will help the starters to grasp efficiently.

Here we go for non-techies,

Quality Score is a Google’s evaluation given to your website, measured from 0 to 10.

It utterly depends upon your CTR (Click Through Rate), relevance of the ad campaign, keywords, the PPC ads and CPC bid. Once this is done in a well-ordered manner, you are making your target audience benefit from it.

So, why do you need QS basically?.

Let me explain it to you through a very simple equation:

From, CPC * QS = a
Your Quality Score, QS= a/CPC
CPC = Cost-Per-Click
a = AdRank of advertiser
QS = Quality Score

The higher the ad rank and more the Quality Score, least is the cost of a click naturally. (Source: Wordstream)

About that, it would be great when you see it through a video for easy grasp.

NOW WATCH:  Find Your Quality Score in Google AdWords

Higher Quality Score associates firmly to the top level performing campaigns.

I know that everyone is now focusing on how to increase your Quality Score.

Let’s step into it right away.

 

Best Ways to increase your Quality Score

Though there are plenty of ways to do that. We have suggested you the best, which might benefit you:

  • Try to discover newly relevant keywords to be added to your campaigns. Do this and you will be on the top of the hierarchy and able to give a tough fight to the competitors.
  • Divide your keywords into a well-organized category, which in fact leads to separate ad campaigns.
  • Do the Adtext refining. Getting higher CTR (Click Through Rate) from potential ads is another way of increasing QS.
  • Optimize your Landing Page. Follow the norms systematically in creating a landing page which links directly to your ad group. Using this metric, the user should be tempted and feel aroused, leading to better conversions.
  • Try using Negative Keyword. Don’t pay for those which don’t convert. Avoid irrelevant search. Closely monitor, discover and get rid of such non-converting keywords.

So, Basically, Google is trying to tell a message that PPC ads help your customers, by maintaining higher QS.

They will charge you lesser for every click, provided you are to provide the customers with enticing ads and make them feel that the click they did is worth and have landed perfectly to get what they need.

 

Page Speed determines the conversion rate

Talking about Google’s prime focus, it is Page Speed that matters all the time.

All you need is an excellent loading time to display your website’s content with all the enhancement tools worked out properly.

Now, this creates an awesome user experience which indirectly or directly helps you in many ways.

Just imagine your website is loading quicker than the others, it naturally has more possibilities for better conversions.

For eCommerce websites, it should be the highest priority.

I will try to give some real time examples:

Among the top eCommerce websites like Walmart, eBay and Amazon; Walmart is proved to be the quickest. It was also said that they were planning to increase their performance even better which results in:

A 2% increase in conversions was experienced by them for every 1 second of enhancement.

Did you just notice that a minor variation in seconds causes drastic changes?

This will definitely be a significant information to all.

To make this still more interesting, a survey says that 83% of the users expect sites to load within 3 seconds.

Believe it or not, It is also stated that 7% increase in conversions will be made when performance is enhanced by 1 second.

Refer to what Google says:

“If it takes too long for your website to load when someone clicks on your ad, they’re more likely to give up and leave your website. This unwelcome behavior can signal to Google that your landing page experience is poor, which could negatively impact your Ad Rank. That’s why you want to make sure your landing page load time is up to speed”.

Now, try to focus on the poor load time, possible causes and how to rectify it using the Speed rules and testing tools.

When did you last modify your website using the below said implementations to become an ideal website?.

  • Files compression,
  • Minification of HTML, CSS and JS,
  • Using Browsing Caching,
  • Increasing server response time,
  • Image optimization.

You need to know about the PageSpeed insights rules in a much detailed way for better understanding.

 

Analyzing Page Speed

When was the last time you made an analysis of your website’s page speed?

If you prefer your website to land like a rocket, every time a customer clicks open, then you need to do the patching and boosting works.

Plenty of tools will help you to analyze your page speed’s performance, but the below-referred tools are quite the best:

  • Pingdom
  • Speed Boost XYZ
  • GTMetrix
  • PageSpeed Insights
  • YSlow
  • Web Page Analyzer
  • Load Impact
  • P3 (Performance Plugin Profiler)
  • Dotcom-monitor

I will show you pictorial representation of some examples using the above software.

 

Google Page Speed Insights:

You will see a drastic change overall, when followed the norms and practices. I have given real-time examples showing before and after the analysis by the use of the tool “Page Speed”.

Desktop Version – BEFORE

Desktop Version – AFTER

Mobile Version – BEFORE

Mobile Version – AFTER

 

SPEED BOOST

Below is the final pictorial illustration of the analysed website using the tool “Speed Boost XYZ”.

FINAL

 

GTmetrix

GTmetrix is another Tool through which I have explained through a picture explanation for your understanding.

FINAL

So, now you know the importance of analyzing your website for a speedy display just like a pop up message.

This should be at systematic intervals. Maintenance always costs you much.

Likewise, monitoring your website to stay back in the google’s ladder of rating is a effort taking work, but once you get acquainted with it, you will master it and will be able to suggest others your experience.

Eager to know why quicker loading websites make more money?. An infographics from comelite will narrate this.

 

Wrapping up

Referring to our discussion, if you want to be in the profit zone, you need to focus on higher QS, perfect landing page, Page speed enhancements often, PPC ads, Adwords and ad campaigns and other metrics. Many of you will always be dynamic initially by creating and maintaining everything whatever Google suggests them. But on the go, you will diminish your activities gradually, which results in losing your site’s hierarchy from top to end. Choosing a catchy headline, Organizing keywords, refining the text and negative keyword usage are some of the other metrics you need to focus on.

Hope I have given you many useful inputs and thought process.

If you think we have missed anything at all, feel free to comment us, so everyone will be benefited.

What do you think about the slow loading websites and how they can impede your earning?

What is your idea about earning from paid advertisements?

What is your experience with Google ads and slow loading websites?

Share this post :

Category Archives: Page Speed

Optimize the website to load fast

25 Apr 2016
No Comments
Website Optimization

Website load time is very important factor which even decides the revenue of the business. Statistical data tells that high-speed loading websites have a quantifiable result on revenue and user experience. Everyone hates a slow loading websites and applications. Though we have several programming scripts like PHP, asp.net, JSP etc., but the browsers understands only HTML, Javascipt and the CSS nothing else. Browser is not smart as we are 😉 . The browser never cares about your programming language or the database we use. No matter what technologies we use the web server just takes your server side code and generates simple mark up language (HTML). So the optimization can be done in server side and client side to make a website load fast.

Speed Your Website
Optimizing the server side (to reduce the webserver execution time)
Optimizing client side (HTML, Javascript, CSS, Images)
The recommended size of the web page is less than 1MB.

How to optimize the website to load fast?
Optimize the Client Side Stuffs first.

1. Reduce the image size

Image consumes the major part of the page size. Images are always looks nice but it definitely increases the page load time at a greater extent. Reduce your image size without compromising the quality. Try service like http://www.jpegmini.com/ & http://www.smushit.com/ysmush.it/ to compress your images.

2. Use CSS for Background Images

Applying background pattern to websites looks really cool; it avoids the boredom of the typical background. But it really kills when you use a big background images. Instead use small image may be 50*50 and use CSS to apply it on the entire website background without stretching the image.

Sample Code

body

{background-image:url(‘wood.gif’);

background-repeat:repeat-y repeat-x;}

Alternatively you can use the CSS patterns for the background like this. This pattern is actually one among the Lea Verou’s CSS 3 Pattern.

3. Reduce the number of http calls

One way of reducing the http calls is reducing the number of small images. Instead of using many small images club it as one using CSS image sprites concept. A good place to start with http://www.w3schools.com/css/css_image_sprites.asp
The other way is combining the different small JS files into a single file and this applies for CSS files too.

4. Avoid using absolute path wherever possible

Using absolute paths forces the web server to establish a connection, send and receive the HTTP requests. If using relative, the connection is already established,

5. Use CDN for all the scripts wherever it is possible – Jquery, Dojo, prototype and much more

CDN – Content delivery network. Akamai and google are the major CDN providers. They simply host the famous libraries on their own set up and share you the link. The famous libraries are often used in various site we visit, so when you use CDN based libraries. The download doesn’t happen each time. So your website loads faster. CDN also reduces the DNS lookup counts. Some sample CDN

<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script>

<script src=”//ajax.googleapis.com/ajax/libs/dojo/1.8.2/dojo/dojo.js”></script>

More insight about CDN http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/

6. Combine all the files

Minification is the technique to remove unwanted characters from the source code. Spaces, new line characters, tabs all are really needed for human to interpret but not for the parser/interpreter/compiler. Mainly JS and CSS can be minified to chunk the file size. Compressed javascript/CSS files are ideal for production environments since on average it reduces the size of the file by 30-90%. Some online tools are listed below,

http://jscompress.com/

http://jsmini.com/

7. Gzip Compression

Include this line in your .htaccess file to enable the gzip compression.

# ———————————————————————-
# Gzip compression
# ———————————————————————-
<IfModule mod_deflate.c>
# Force deflate for mangled headers developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping/
<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
RequestHeader append Accept-Encoding “gzip,deflate” env=HAVE_Accept-Encoding
</IfModule>
</IfModule>
# Compress all output labeled with one of the following MIME-types
# (for Apache versions below 2.3.7, you don’t need to enable `mod_filter`
# and can remove the `<IfModule mod_filter.c>` and `</IfModule>` lines as
# `AddOutputFilterByType` is still in the core directives)
<IfModule mod_filter.c>
AddOutputFilterByType DEFLATE application/atom+xml \
application/javascript \
application/json \
application/rss+xml \
application/vnd.ms-fontobject \
application/x-font-ttf \
application/xhtml+xml \
application/xml \
font/opentype \
image/svg+xml \
image/x-icon \
text/css \
text/html \
text/plain \
text/x-component \
text/xml
</IfModule>
</IfModule>

8. Yslow tool

This is really a great tool for assessing your website load and optimizes the website.

Website Optimization Before

Before Optimizing the website

Website Optimization After

Case Study

I have applied the so far techniques and achieved really a great amount of speed for one of our client’s website. Initially the site was 1298.8 K and with 54 HTTP requests after optimizing the website the size becomes 752.8 K and with 51 HTTP requests.

Related Links

https://addons.mozilla.org/en-US/firefox/addon/yslow/

Share this post :