MatrixAdapt | Logiciel de gestion d'Entreprise, Création et référencement des sites web

Seo Master present to you:
By Ram Ramani, Engineering Manager

PageSpeed Service (PSS) is an online service to speed up the rendering of your web pages by rewriting and serving them through Google. While PSS’s optimization techniques benefit most platforms and browsers, today I’d like to focus on some of the PSS rewriters that are especially effective on mobile web pages. PageSpeed Service optimizes the web pages in such a way that users can start viewing and interacting with your pages as soon as possible.



Prioritize Critical CSS: To avoid page reflows, modern browsers do not render pages until the CSS is downloaded and parsed. These CSS files are often tens of KBs because they include all the styles needed for the entire site. These blocking requests are especially bad on mobile devices, where network round trip times are high. The Prioritize Critical CSS rewriter speeds up rendering by identifying the minimal CSS required to render that page and including it in the HTML file. This not only saves an extra round trip to download additional files but also reduces the CPU consumed by the browser. Finally, a reference to the original CSS file is included at the end of the page to lazy-load the non-critical CSS.

Defer JavaScript: The HTML specification requires the browser to stop, download, and execute each synchronous JavaScript file before proceeding to build and render the page - this requirement can significantly slow down rendering. PSS circumvents this behavior by rewriting the HTML to defer execution of all JavaScript until after the page is first rendered. This benefits pages that are mostly rendered via HTML markup rather than JavaScript.

Optimize Images: Mobile screens are almost always smaller than their desktop counterparts. Large, high quality images translate to excessive bytes on the wire, slowing down page loads. PSS can resize images on the server to fit required dimensions and re-compress them to the optimal format, without perceptible visual loss. For very large images above the fold, PSS can also inline a low quality preview image for initial rendering. Once the rest of the page content loads, it is replaced by the original image, creating a seamless experience. Furthermore, images below the fold can be lazy-loaded, which prevents them from competing with the rest of the page load.

PageSpeed Service includes several rewriters that speed up the rendering of web pages. Using PageSpeed Service, the mobile pages of TopNewsToday and Net1News are now 61% faster and 68% faster respectively. Alex Tsvetanov of TopNews Today says, “With Google PageSpeed Service, we increased our unique visitors and total pageviews by 100%, while reducing our bounce rate by 30%”. Massimo Romanello, CEO of Net1News says, "Thanks to Google PageSpeed Service, we have been able to reach 200,000 unique daily visitors with the same existing infrastructure and have made our site one of the quickest in the news sector".

PageSpeed takes just a few minutes to set up and requires no code changes on your site. Check out how much PageSpeed can speed up your site. I encourage you to try out these features by signing up for PageSpeed Service and letting us know what you think at page-speed-service-discuss@googlegroups.com.


Ram Ramani is an Engineering Manager on the Make the Web Faster Team in Mountain View. He is a believer in "Faster is better".

Posted by Scott Knaster, Editor

2013, By: Seo Master

Seo Master present to you: This Blogger hack will show you how to add comment count inside a speech bubble, so that you & your readers can use the numbers to mention or point to a particular comment on any of your posts and besides this, it could as well improve the look and feel of your blog.

Note: This works with the previous blogger commenting system, so if you want to add this hack, you should remove first the Blogger threaded comments. Learn here How to remove Blogger threaded comments

UPDATE! Now you can add comment bubble in your threaded comments too. Read this tutorial:
How to Add Numbered Comments In Threaded Comments

How to add numbered comments on our Blogger/Blogspot blog

Step 1. Go to Dashboard - Template - Edit HTML (click on Proceed button, if needed)


 Step 2. Select "Expand Widget Template" (make a backup)

Step 3. Now find (CTRL+F) the following code in your template:

<b:loop values='data:post.comments' var='comment'>

Step 4. Immediately above/before it, paste this code:

<script type='text/javascript'>var CommentsCounter=0;</script>

Step 5. Find this code:

<data:commentPostedByMsg/>

Step 6. And immediately below/after it, copy and paste this:

<!--comments-count-starts-->
<span class='comments-number'>
<a expr:href='data:comment.url' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>
<!--comments-count-stops-->

Step 7. Find (CTRL+F) this tag in the template:

</head>

Step 8. Paste this code just above/before it:

<!-- comments-count-starts-->
<style type="text/css">
.comments-number a:link, .comments-number a:visited {
color: black !important;
text-decoration: none !important;
background: url(http://www.matrixar.com/-zrPssaxSG2E/T47v-XB1EWI/AAAAAAAAB8E/uUz8RiJnW2U/s1600/comment+bubble+1.png) no-repeat;
width: 50px; /*image-width size*/
height: 48px; /*image-height size*/
float: right;
display: block;
margin-right: 5px;
margin-top: -15px; /*comments-counter position*/
text-align: center;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 15px;
font-weight: normal;
}
.comments-number a:hover, .comments-number a:active {
color: #1BA0E1 !important;
text-decoration: none !important;
}
</style>
<!-- comments-count-stops-http://www.matrixar.com-->

Note:

• To change the comment bubble, replace the red text from above with your own address
• To change the color of the numbers, replace the blue text with the hex value of your color

Comment Bubbles 

To choose a comment bubble, right-click on the image and select "Copy Image Address/Location":





IMPORTANT: You could use any image instead of the one linked in the code above (STEP 8) but after that, you should modify the size values (width and height), so that the numbers inside the bubble to be correctly adjusted.

Step 9. Save the template... and enjoy your comments :]

You might also be interested in this tutorial from the same category:
How to Add a Comment Bubble to Blogger Post Titles.


2013, By: Seo Master

Seo Master present to you: 2013, By: Seo Master