One limitation of Blogger is the inability to upload and host your own external CSS stylesheets or JavaScript files. There are a couple reasons why you would want to do this instead of embedding them into your template, or linking to third party hosted servers. External files can be cached by your browser potentially reducing load times for your users, also if you are using a third party widget or gadget, there is always a chance of someone changing or removing the script on you without warning.
There are also many ways you can go about hosting external files for Blogger. Some people use services like Dropbox, or Google Sites, or even host the files on their own web servers. When designing ideas for my film blog, I looked at all these various solutions and finally decided on leveraging the power of Google App Engine for the task.
Wednesday, July 27, 2011
Monday, July 18, 2011
Tips: Optimize your blog loading times
A slow loading blog can prevent you from getting new readers and it can also adversely affect your Google rankings. If you notice your blog loading too slowly, or just want to optimize the speed there are a few things you can do.
1. Use a free web analyzer to determine where your bottlenecks are.
A couple good sites for this are Pingdom and GTMetrix. These will test your site speed and list out all your elements so you can see which ones are taking the longest to load. From there you can decide how to improve your speed.
2. Move JavaScript to the bottom of your template.
This doesn't actually make your blog load any faster, but it gives the illusion of it because browsers cannot load any other elements such as images at the same time as a script. So moving them to the bottom allows your other elements to load and render on screen first making the user think your site is faster.
To do this, go to Design > Edit HTML and place your scripts just before the closing </body> tag in your template. Or place your scripts in a widget at the bottom of your footer.
3. Reduce the amount of posts in your Home Page.
This one is important especially if your posts are image intensive and you don't use Jump Breaks to separate your posts.
Go to Design > Page Elements > Edit your Blog Posts to change the number of posts.
4. Reduce your image sizes.
The most common ways to do this are to save your images with a lower quality; or crop and scale them down to the exact size you want displayed on your blog with Photoshop instead of scaling them with HTML.
You can also use this handy web tool Yahoo! Smush.it to further optimize your images.
5. Reduce the amount of gadgets/widgets
Gadgets and widgets offer cool features to enhance your blog but having too many of them can slow your blog down to a crawl. This is true especially if you are using third party widgets. Sometimes these use scripts and code that are hosted on slow servers. Check them in a web analyzer to see if they are holding your site up.
1. Use a free web analyzer to determine where your bottlenecks are.
A couple good sites for this are Pingdom and GTMetrix. These will test your site speed and list out all your elements so you can see which ones are taking the longest to load. From there you can decide how to improve your speed.
2. Move JavaScript to the bottom of your template.
This doesn't actually make your blog load any faster, but it gives the illusion of it because browsers cannot load any other elements such as images at the same time as a script. So moving them to the bottom allows your other elements to load and render on screen first making the user think your site is faster.
To do this, go to Design > Edit HTML and place your scripts just before the closing </body> tag in your template. Or place your scripts in a widget at the bottom of your footer.
3. Reduce the amount of posts in your Home Page.
This one is important especially if your posts are image intensive and you don't use Jump Breaks to separate your posts.
Go to Design > Page Elements > Edit your Blog Posts to change the number of posts.
4. Reduce your image sizes.
The most common ways to do this are to save your images with a lower quality; or crop and scale them down to the exact size you want displayed on your blog with Photoshop instead of scaling them with HTML.
You can also use this handy web tool Yahoo! Smush.it to further optimize your images.
5. Reduce the amount of gadgets/widgets
Gadgets and widgets offer cool features to enhance your blog but having too many of them can slow your blog down to a crawl. This is true especially if you are using third party widgets. Sometimes these use scripts and code that are hosted on slow servers. Check them in a web analyzer to see if they are holding your site up.
Friday, July 8, 2011
Tips - How to fix and avoid common problems
Having spent a great deal of time in the Blogger help forums lately, I've noticed a few problems that other bloggers are frequently encountering. Here are a few of the most common ones and ways to avoid them from happening.
Problem 1: My post's text looks funny and I can't change it.
A lot of bloggers like to write up their posts on their desktop using MS Word, before going online then copying and pasting it in Blogger's post editor. The problem with using Microsoft Word as a post draft editor is when you copy and paste your text to Blogger's Compose tab, it copies over all the hidden formatting tags from Word. This will affect how your post looks because these tags override your blog's default fonts and styles and can even mess up how your overall blog template looks.
The solution is to either copy and paste into the Edit HTML tab instead of the Compose Tab of the editor, or use a plain text editor such as Notepad or TextEdit to write your posts. This will remove any formatting tags and paste just the text.
An alternative program to use for composing your blog posts on Windows is a program called Windows Live Writer. It has a word processor like interface and will allow you to post directly to your Blogger blog.
Problem 2: My gadgets are missing or appearing below my posts.
This one is most often caused by an unclosed HTML tag in one of your posts. You can figure out which post is causing the problem by going to each individual post shown on your home page. Most post pages will look normal, so find the one that is messed up and that is the post you will need to fix.
Luckily, you don't actually have to sift through your post HTML or know any coding to figure out what tag is missing, just open the post in the editor and toggle back and forth between the Edit HTML and Compose tabs a few times and the code should correct itself. Now just republish your post and check your homepage again.
Sometimes but rarely, the above procedure doesn't work, so you may have to delete and rewrite the post to correct the problem.
Problem 3: My blog only shows X number of posts.
Another frequently asked question is this one. Why does my blog only show X number of posts even if I set it to a greater number than that?
This is caused when your home page exceeds a certain file-size or contains too many image links. Blogger's servers automatically limit the number of posts shown to reduce the bandwidth and the time required for users to load your blog. This is called "Auto Pagination".
The best way to avoid Auto Pagination is to insert a Jump Break into your posts to break up the content. On the toolbar at the top of the post editor is a button that will place a Jump Break at your cursor location. You can also manually place a <!--more--> tag into the HTML code of your post where you want the Jump Break to occure.
However, sometimes even with a Jump Break, Auto Pagination can still occur, especially if you dragged and dropped an image onto your post. Even though the post editor supports dragging and dropping images, it is not recommended to do so because that will encode the image file as base64 data directly into your post, causing that post's file size to be unusually large.
To prevent this from happening, always upload your images by using the "Insert image" button on the toolbar at the top of the post editor.
Problem 1: My post's text looks funny and I can't change it.
A lot of bloggers like to write up their posts on their desktop using MS Word, before going online then copying and pasting it in Blogger's post editor. The problem with using Microsoft Word as a post draft editor is when you copy and paste your text to Blogger's Compose tab, it copies over all the hidden formatting tags from Word. This will affect how your post looks because these tags override your blog's default fonts and styles and can even mess up how your overall blog template looks.
The solution is to either copy and paste into the Edit HTML tab instead of the Compose Tab of the editor, or use a plain text editor such as Notepad or TextEdit to write your posts. This will remove any formatting tags and paste just the text.
An alternative program to use for composing your blog posts on Windows is a program called Windows Live Writer. It has a word processor like interface and will allow you to post directly to your Blogger blog.
Problem 2: My gadgets are missing or appearing below my posts.
This one is most often caused by an unclosed HTML tag in one of your posts. You can figure out which post is causing the problem by going to each individual post shown on your home page. Most post pages will look normal, so find the one that is messed up and that is the post you will need to fix.
Luckily, you don't actually have to sift through your post HTML or know any coding to figure out what tag is missing, just open the post in the editor and toggle back and forth between the Edit HTML and Compose tabs a few times and the code should correct itself. Now just republish your post and check your homepage again.
Sometimes but rarely, the above procedure doesn't work, so you may have to delete and rewrite the post to correct the problem.
Problem 3: My blog only shows X number of posts.
Another frequently asked question is this one. Why does my blog only show X number of posts even if I set it to a greater number than that?
This is caused when your home page exceeds a certain file-size or contains too many image links. Blogger's servers automatically limit the number of posts shown to reduce the bandwidth and the time required for users to load your blog. This is called "Auto Pagination".
The best way to avoid Auto Pagination is to insert a Jump Break into your posts to break up the content. On the toolbar at the top of the post editor is a button that will place a Jump Break at your cursor location. You can also manually place a <!--more--> tag into the HTML code of your post where you want the Jump Break to occure.
However, sometimes even with a Jump Break, Auto Pagination can still occur, especially if you dragged and dropped an image onto your post. Even though the post editor supports dragging and dropping images, it is not recommended to do so because that will encode the image file as base64 data directly into your post, causing that post's file size to be unusually large.
To prevent this from happening, always upload your images by using the "Insert image" button on the toolbar at the top of the post editor.
Subscribe to:
Posts (Atom)