Showing posts with label Page. Show all posts
Showing posts with label Page. Show all posts

Home » Posts filed under Page

How to improve website speed

#
image by moovinonup.com

Some good rules of thumb for keeping the download time short:
  • 30K — maximum size for your Web page, including all images
    Thus, if you have two 10K images on your page, you should not have more than 10K of HTML and text.
  • 12K — maximum size for each image, sound file, or applet
    This includes animated images and anything downloaded with the page
  • Use multiple pages
    Instead of one long page
  • Use special effects sparingly
    Make sure that the site needs the effect you want. Whenever you add Java or JavaScript or other effects, that impacts the download time of your site.
  • Keep JavaScript and CSS External
    By reducing the amount of code on each page of your site you can improve the load time. But instead of stripping your site of content and features, just keep as much functionality and design features external as possible. Loading JavaScript and CSS from external sources only requires one line of code in the header of the page. This is as opposed to bits and pieces of inline code across each page eating up precious milliseconds for each image they format or chunk of text they tailor.
  • Progressive Rendering
    Progressive rendering is a vital part of speeding up your site and making it more appealing for user experience. If you went to a restaurant, you would expect your starter to be served up before your main and not have to wait longer for it all to come at once. Progressive rendering works the same way in that it serves up what is currently available to you while waiting for the rest of the page to bake (sorry, load).

    There are several ways in which you can apply better progressive rendering:

    By putting stylesheets at the top of the document, i.e. in the page header, you can force the server to load these sections first allowing the page to return several page elements while it waits for the other.

    Remember to Flush! No seriously, a content flush can play a major part in progressively rendering your page by allowing you to tell the page when to output a section during the load. Multiple flushes can be used on a page, but one ideal use is to get the page to flush immediately after the section of the page. This way the browser gets ahead by starting to download the CSS, JavaScript, etc while waiting for the full HTML response. Below is an example of a PHP flush being performed:

    <html>
    <head>
    <title>page name</title>
    <link rel=”” href=”style.css” />
    <script src=”new.js”></script>
    </head>
    <?php flush(); ?>
    <body>
Make sure that your website is both efficient and fast, you certainly put yourself in a better position to improve your traffic, conversions and rankings. Add this to creating new content and making ongoing SEO developments, and your site will be off to a flyer.

    Quick WEB Pages (HTML) Refresher

    #
    html

    When you create Web pages, there are a few things that can help make the pages load more quickly, and the pages be more available for your readers. These are tips that I've given the developers on my team, and now I'm passing them along to you.
    1. Images - always use an ALT tag with your images. This is so that the image is accessible to non-visual browsers and also so that there is a little "pop-up" text information when you hover your mouse over the image. Verify that the alt-text matches the image. It can be common to create alt text that describes the image, but not what it says. For example, many companies put their logo on their pages with the alt text "company logo". But when a screen reader reads it, it makes more sense to read "About, Inc."

      Also with images, always use the exact height and width of the image in the image tag. i.e. <img src="image.gif" height="65" width="34" alt="image" border="0"> When you don't put in the exact height and width, the browser has to guess and this makes the page take longer to load.

      Finally, with images it's a good idea to use the border="0" attribute. It isn't required, but if that image is changed into a link, it will have a bright blue border around it, which usually distracts from the look of the page.
    2. Links - always test your links before you finish a Web page. Your readers will, and they will get annoyed by broken links. And most readers will not write to you to tell you a link is broken, they will just leave.
    3. URLs - both for images and links - make sure that you use a full-path URL for all images and links that are your Web server. These URLs should not include the http://www.domain.com - but they should include everything from the first slash (/) after the server name. This is because if the page is moved, or a symbolic link is created to it, the images and links will not be broken. This is especially important to watch if you write the pages in an editor offline and then upload them. look at the HTML before you upload to make sure that the URLs are full-path and not relative.
    4. TEST YOUR PAGES - it helps if you can test your pages on a testing server before you put them live. This allows you to put pages up in the Web environment, see how they look, and not be worried that they might be seen by a customer.
    source: Jennifer Kyrnin

    Numbered Page Navigation Widget for Blogger

    #

    This post explains how to add numbered page navigation widget to blogger (blogspot) blogs:

    What is Numbered Page Navigation ?

    In blogger, by default, you see Older posts, Newer Posts links near the bottom of the page which is useful to your blog visitors to navigate to other posts of your blog. But, the problem is.. people hardly notice those newer and older posts links.. which means.. less pageviews to your blog.

    So, to increase your blog pageviews you can use this cool looking, advanced numbered page navigation to your blog.

    So, how to add this to your Blogger blog ?
    (first backup your blog template before editing anything)


    Embeding URL, HTML, Forum Links Code in Blogger Posts

    #

    How to create a widget Embeding URL, HTML, Forum Links Code in Blogger Posts, for your visitors to link back to your article/blogger post. This widget will show 3 codes (Blog Post URL, HTML code to embed your post to a website, Forum Link to embed your post to a forum) below your blogger post. The steps given below.

    1. Login to your blogger dashboard--> layout- -> Edit HTML

    2. Find code : </head> tag.

    3. Copy below code and paste it just before the </head> tag.

    <style type='text/css'>
.about-article{
background-color:#cccccc;
padding-bottom:5px;
padding-left:5px;
padding-right:auto;
font-size:12px;
}
.about-article input{
background-color:#ffffff;
}
</style>

    4. Now find below code : <data:post.body/>

    5. Copy below code and paste it after the <data:post.body/> 


    <b:if cond='data:blog.pageType == &quot;item&quot;'>
&lt;div class=&quot;about-article&quot;&gt;<p>If you find this article useful, please feel free to link to this page from your website or blog.</p>&lt;p class=&quot;noborder&quot;&gt;&lt;label for=&quot;aa-url&quot;&gt;URL:&lt;/label&gt;&lt;br /&gt;&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-url&quot; value=&quot;<data:post.url/>&quot; /&gt;&lt;/p&gt;&lt;p&gt;&lt;label for=&quot;aa-forum&quot;&gt;HTML Link:&lt;/label&gt;&lt;br /&gt;&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-forum&quot; value=&quot;&lt;a href=&amp;quot;<data:post.url/>&amp;quot;&gt;<data:post.title/>&lt;/a&gt;&quot; /&gt;&lt;/p&gt;&lt;p&gt;
&lt;label for=&quot;aa-forum&quot;&gt;Forum Link:&lt;/label&gt;&lt;br /&gt;
&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-forum&quot; value=&quot;[url=<data:post.url/>]/<data:post.title/>[/url]&quot; /&gt;&lt;/p&gt;
<p align='center'></p>
&lt;/div&gt;<br/>
</b:if>

    6. Save your template and you are done.