Saturday, February 22, 2014

Added "Read More..." and "Related Posts" features to this Blogger Blog

Today I have made few changes to this Blogger blog to improve the user experience. Previously it was showing full content of the posts whenever user clicks Label or Archive links. Home page also was showing full content of the posts. Users had to scroll lot, to find their target content.

So, I had decided to show only the summary or snippet of the post in the homepage of this blog and in the  Label pages.

I have  implemented this "read more" feature by adding piece of custom code to the Blogger template of this blog. Now, you will be seeing only the summary of the posts in home page and archive pages. You need to click the "read more..." link to read the entire post. I believe this feature will be very useful. For example, if you are planning to read QTP related articles, you can just visit this QTP label page, go thro' first few lines of many posts about QTP, and then click one particular post for reading it further. For some posts, some junk text was showing as  snippet, though the full post was showing properly. I think it was due to some style declaration came from word document. After removing those style declarations in from the post, the snippet was appearing properly. Let me know if you still see junk snippet for any of the posts.

I found this article very much useful for implementing this "Read More.." feature. This article is saying that this "Auto read more" code will only load the snippet of the posts. But actually it is loading the entire content and shows the snippet by doing javascript manipulation in client side(browser). Anyway,  during my testing, blog pages were getting loading quickly. So, I just kept this code. Let me know if you find any issue in viewing this blog pages.

And, previously, I was using Linkwithin script in this blog for showing list of related posts at the end of  each post. But, it was taking some time to load, and I came to know that it was taking some link juice from our blog pages. So, I have decided  to replace the linkwithin script with custom script to take SEO advantage while still providing "related links" to the users.

I just followed the steps provided in this article after removing the existing linkwithin script. And,  it worked fine.  Only issue with this code is, it was showing the current page also in the related posts  list.
So, I added one line of code to exclude the current page in the list of the related posts links. After replacing linkwithin script with this custom script I am seeing some improvement in page loading. Share your  experience thro' the comments.

After implementing these "Read More..." and "Related Posts" features, I realized that my Blogger template was added with significant lines of custom javascript code. It was already having piece of javascript code and CSS styles for implementing Google custom search, Google Analytics, expand/collapse list,  add to favorite and Quiz.  I came to know that if we keep these things  as external javascript and css files, we can improve page loading performance.  Because, once after the external javascript and css files getting loaded for particular page, the other pages will use the already loaded files without downloading them again. I thought it will help to increase the Google PageSpeed score.  So, I removed all the CSS style definitions and all javascript code from head section of the Blogger template html, and put them in separate file.

 Since this Blogger blog is not having option to upload javascript and css files, I uploaded the those external javascript and css files to our TheQuotes.Net server. I already activated CloudFlare to TheQuotes.Net, so I believe these CSS and JS files will be delivered quickly and will be cached appropriately as I set enough cache control time in both server .htaccess file and in Cloudflare control panel settings. Since the Blogger template code was in the encoded format, I had to use this online tool for decoding the html entities before putting them in external javascript file.

 I believe it will be helpful for loading pages quickly for the regular visitors of the blog. Anyway, I understand that it will introduce some additional delay/load for making http request to server.  So, I would like to know whether this change really help to load this blog pages faster. Share your observation thro' the comments.

You can subscribe to our Email posts, and you can subscribe to our blog feed.

No comments:

Search This Blog