How to optimize web pages for faster loading
An optimized web page not only provides for a more responsive site for your visitors, but also reduces the load on your web servers and internet connection.
A visitor to your blog is always happier with a page that loads quickly. The problem is...How is that accomplished? Let me tell you what I found...optimized web pages is the answer. There are several methods of optimizing your web page.
One way is reducing page weight through the elimination of unnecessary whitespace. Page weight is by far the most important factor in page load performance. Tools, such as HTML Tidy, can automatically strip leading whitespace and extra blank lines from valid HTML source. You can remove whitespace (the spaces between your coding) from your html by hand. Doing this will take a lot of extra weight off the total size of your page and will speed up load time quite a bit.
Since each separate domain costs time in a DNS lookup, reducing the number of separate domains used to reference CSS, JavaScript and images reduces page load times. This may not always be practical, however, you should always use the minimum number of different domains in your pages as is possible. I went over my blog and saved all my images to my desktop as PNG (see below) and then saved them to my web host. Now everything (well, almost everything) comes from one domain.
You can also trim down your pages. In Blogger that simply means reducing the amount of posts on your main page. You can do this by going to the dashboard/settings/formatting/show. I selected five posts. I will see how that feels, and perhaps change it again later.
Remove items that are not necessary to your blog. A big offender for me is embedded sound files. They take ages to load, and they usually irritate the viewer. Try not to use Java applets...JavaScript will load faster. Ask yourself it that little clock in your sidebar is worth the time it takes to load? Especially since everyone has the time in the lower right hand corner anyway. Give your blog a good look over with a new eye for speed. Maybe you can eliminate a few extras that don't add to your blog.
Here's another way to help your page load quicker. Simply add the width and height tags to your img tags. For example, if your original image (img) tags looks like:
<img SRC="blogheader.gif">>and the width and height of blogheader.gif is 30 by 15, change the above tag to:
<img SRC="blogheader.gif" width=30 height=15>How do these tags improve the speed? It helps the browser determine the layout of your page before the image is actually loaded. It stands to reason, if you have many images on your page, taking time to load each image before calculating the final layout of the page would take longer.
Reducing your images will decrease load time. This Online Image Optimizer will reduce the file size of your gif, jpg, or pngs. It is a free online tool, and easy to use.
I have tried to save all my images as PNGs because they don't have the copyright issue and they load fast. But, if you still want to use gifs and jpgs, here is a good rule of thumb... If you don't need sharp resolution, choose GIFs over JPEGs, as GIFs generally load quicker. JPGs are generally best for photos, GIFs for anything else.
Using some of these techniques will trim your blog and increase your load time. This results in happier visitors...and return visitors!!
Thanks to these sites:
Chami.com Tips, WebWeaver.nu, Netscape Devedge
Labels:
Classic Blogger,
General,
Hacks
27 Comments:
"Ask yourself it that little clock in your sidebar is worth the time it takes to load?"
I did... and my answer was YES!! I have several Flash clocks that I love passionately, and a whole slew of other sidebar doodads; anyone who's too impatient to wait for them to load will be too impatient to read my looooong posts, so I'm keeping 'em.
If it makes you happy, then it is worth it. I put things on my blog that I enjoy also. Some of them don't help the loading speed!
thanks annie.. that was a lot of help :) I've reduced the white space and added height weight to the "permanent" stuff on the sidebar and will continue to do so with my next posts. Your website has been really helpful. Thanks.
@letti, I find that every now and then I have to go in and clean up my template again. I add things when I'm in a hurry and don't pay attention to the whitespace. But, it is usually a quick job!
Glad my blog has helped you!
I often post audio and video embedded into my blog but I want to offer a full ten post option on my top page. So I use the extender post hack -- and place my embedded media so it has be be clicked to be accessed.
Visitors have a choice, you see.
One click and the post extends on the same page. I got the hack from somewhere. It uses the [span id="fullpost"] tag.It's much better than clicking and going to the post page... and the top page loads fine.
It's also a good idea when you have a lot of embedded media on your blog to switch your archive option to weekly as it can over tax Blogger if all that stuff loads for each month. Too much -- over a month -- at it begins to freeze visitor's browsers.
@dave riley, thanks for the suggestions. I didn't know that about the weekly archiving versus monthly. And putting the extender post hack for audio and video media is genius!
Yeah I don't know why more blogs don't use the peek a boo post extender hack.I use a non beta script for the hack but another hack works with New Blogger too. Since I work on so many blogs I use both versions.
There are a few traps with the script though as you need to edit your posts in HTML mode as a lot of feral script like [/span] can sneak in and you have to repair the post's text/script. But really it is no different from the demands made by WORDPRESS blog editing and can be routine after a time. But only do it if you really want that option as it takes practice to master and get used to. I think it rocks and takes blogging to a whole new interface.
But unlike the old version of this hack when you don't use it the blog doesn't automatically ask you to "Read more..." So you can choose whether you want a short post or a longer one with media, etc .
Another drawback for the Old Blogger version of this hack is that the "Read more..." extension is formatted/appears AFTER the post's list of Labels. In New Blogger the format is fine and comes before Labels.
Here's the Old Blogger version version; and here's the New Blogger version.
Just on page loading -- the advantage with OLD BLOGGER templates is that by selectively using [MainOrArchivePage] tags you could decide what appears(and what doesn't appear) in the margin of non top/index pages. So anytime you went to a post page it took much less time to load than the top page because you set it so fewer items were included.
I assume that won't work with New Blogger although I haven't tried it. But it is a very useful hack enabling you to decide what you want to feature beyond all the stuff you want to include in your top page loading.
Thanks Annie,
I know so little about html that I thought all those blanks were necessary. So glad we have you to help us! You're a treasure!
Actually loading from multiple domains can load faster if you are loading a lot of different files. If you have 10 images, a CSS file, a JS file and your HTML, the browser will usually restrict the number of simultaneous downloads coming from a given domain. IE is usually defaulted to 2 threads. So until those first 2 images are downloaded, nothing else can be sent to the browser. But if you can put half of your images on a different domain, you can now download 4 images at a time.
@snekse, that is interesting. I haven't read anything about that concept...but I will look into it. Thanks!
"Page weight is by far the most important factor in page load performance."
I completely disagree. What slows page loading times are usually images, video, audio, and some javascripts. I'm not sure what it is about some javascripts, but some will completely stop page loading, and/or slow it down significantly. Images should be few and small in file size.
The amount of white space in your html is pretty insignificant, and text loads quickly unless you really have a lot of it.
Linking to multiple domains is a valid concern, as are java applets (which 9 times out of 10 are pointless anyway).
"I have tried to save all my images as PNGs because they don't have the copyright issue and they load fast."
What? Copyright is copyright- don't use other people's work without permission, period. How do .png files not have copyright issues? Also, I've tried .pngs in the past, and have found .jpgs or .gifs of the same image were still smaller files (which means faster loading). That was my experience.
I thoroughly agree that too many people put too much stuff on their page that is useless, slow loading, and downright *annoying* to their visitors. A little thought about *your visitor's* experience on your page would go far. Do they want to wait five minutes to download and then be subjected to *your* favorite music? Probably not. If they want to listen to music, you can assume they are already doing so... probably something *they* like. Do they want to wait ten minutes for 3 videos you found on YouTube (not even your own work) to load? Probably not. Personally I think it's better to LINK to other people's work, not republish it without permission. If it is your work, link to it anyway and give *your visitor* the choice of whether or not they want to wait for the videos to load. They can be reading your page while waiting this way, instead of getting annoyed and clicking the red x in the corner. And yeah, your visitor probably doesn't care what time it is at *your* house, I think it's safe to assume they know what time it is at their own.
I personally don't wait for pages to load longer than one minute... if I wait that long. It's very poor design and judgement to expect your visitors to wait. Most websites don't have any information that is worth the wait. You want people to *enjoy* their visit to your site, so they'll be happy to return, not to make it difficult on them. Focus on "viewer friendliness" is my advice. You're trying to entice them to return, not to chase them away.
@christine, I guess we all have our opinions. I still feel extra white space slows page loading time.
I believe you misunderstood me about GIF's and PNG's. GIFs are now patent-free but, at one time there was a legal issue with GIFs. I used PNGs for a long time due to this issue, and when GIFs became patent-free, I continued using PNGs.
"The PNG format was developed in 1995 in response to two major problems with the GIF format. The first, and most immediate problem was that in 1995, Unisys and Compuserve announced that software implementing the GIF image format would be subject to royalties, based on a patent held by Unisys on the LZW compression algorithm used in the GIF format. GIF is technically not free. The second problem with the GIF format was that its feature set was limited, and the need for images with features such as 24 bit colour or 8 bit alpha channels was increasing. PNG supports a more efficient compression algorithm than GIF, is patent-free, is capable of storing more image formats and includes some nifty error-checking features. When saving identical GIF and PNG images, the resulting PNG file will be 5% to 20% smaller than the GIF file." (from SitePoint)
So, it wasn't a copyright issue with anyone graphic, it was an issue with the GIF format itself.
How to optimize web pages for faster loading in Chinese
Thanks for often posting very informative blogs!!
Recently only I started learning html that I felt that i should leave all those blanks. So glad we have you to help us!
Great post!!! Very informative and useful one...
I never thought of page weight and all those stuffs...
Thanks for giving a good input
Reducing page weight by taking away white spaces can be a means to make the web page load faster. How could I reduce the white spaces the easy way?
Your advice is very helpful and I like this blog, I have followed it and it automatically have reduced me a load time and my site load fast now.
Thanks Again
Alam
twitter.com/alamest
Hi, interesting post. You write how to optimize page loading by reducing file size and give a very useful link. You also write about not using too many different servers in order to reduce HTTP requests, which also makes a lot of sense. Now, what I found very important, aside from size of files, was network latency, which is not tested by the tools you show. I wrote a post, Speed Up Loading of Website and Blog, where I discuss how to analyze web site loading, how to reduce file size (many links!), and how to reduce network latency. My blog is now loading much faster than before and I didn't have to cut down on content.
I want to optimize my web pages so that our homepage will rank high in Google!. Many of our web pages require password to log in. If I only want the homepage to rank high, can I just optimize 10 or 20 pages that have meaningful content, or I should optimize 100+ web pages?
If I only want the homepage to rank high, can I just optimize 10 or 20 pages that have meaningful content, or I should optimize 100+ web pages.
THANKS http://amizo78.blogspot.com/
Page load time is must concerned factor for optimizing any particular web page. Even Google recommends to keep the page loading time as fast as possible, this will encourage visitors to act soon, else they are going to leave the page.
Hi, thanks for your post. I never realized that specifying the height and width of an image could improve load time. However, just today (well I was working on it for a few days) I managed to get my blog to go at lighting speed and I wanted to share how I did it. Besides shrinking images, there were 3 key elements that made a HUGE difference.
1. I setup CloudFlare which is a free service that has a CDN and it minifies your .js and CSS files.
2. I setup a space on the Amazon AWS using the S3 (Simple Storage) and Cloudfront.
3. This applies only to WordPress, but I installed the W3 Cache and amazing it actaully integrates with both CloudFlare and the Amazon S3 and actually automates the syncing of files.
To set up cloudflare, it's free and you just point your DNS to their DNS and thats pretty much it. To setup the Amazon S3, you sign up for an account (It costs me cents a month) and create a user from AIS and put that user in an admin group. Now if you're not using WordPress you'll have to manually upload your files to a bucket (Recommend using the S3 browser to make it easier) and then create a distribution from the Cloudfront module. Then you just use the new url (You can even setup a CNAME and use a subdomain like cloud.mydomain.com) to point to your images or other resources that are now on the Cloud. If you are using WordPress, you can just plug the API and Access Keys from both CloudFlare and Amazon AIS and it will pretty much automate everything for you.
Hope I didn't get too geeky there, but I'm really excited, my site is loading super fast and I wanted to share! Thanks :)
Excellent advice. I also recommend compressing images as much as possible, without affecting their quality so that they load quickly, using a package like Photoshop.
Getting rid of white space is a good idea, but also there are plugins that will help by caching popular elements of the website to allow greater load on your web server with faster loading times.
You can also consider bundling your css and js files. Rather than asking your developers to build a monolithic code.Anyway, great tips for faster loading web sites
right, thank u so much for sharing the tips with us. very useful.