Optimization: Make Blogger Blogs Faster! |Chromebook Mobile

Cloud Computing and Blogging w/ Chromebooks, Chrome, and the Google Chrome OS: ChromeBook.mobi - Simplify your life!

Optimization: Make Blogger Blogs Faster!

Speed up your blog or website; It's all about pageload; Make it load faster!


Speeding up your Blogger load time is the end result of assorted tips, tricks, and performance optimizations. The biggest culprits of poor site performance are generally inefficient use of CDNs, poor optimization of images, and excessive or inefficiently implemented social sharing junk, advertising, and other resources trying to hog your bandwidth. Note that we are speaking from a Google Blogger blog user point of view with these optimizations, but they're nearly all universal optimizations valid for whatever publishing platform you use. We'll give you the key performance points to research so you can adapt them to your particular setup in your need for speed.

Orange and white Google Blogger blog logo by Kinologik
Image Credit: Kinologik via cc
We'll go into a little detail on each performance enhancing characteristic, but we're mainly trying to alert you to the areas of your site you might want to focus on that are easy to make faster. Pick out and jot down one item you'd like to optimize at a time, research it, and after it's implemented, run a succession of performance tests (some of the best of which are linked at the bottom of this page) to verify the results before moving on to another tweak. Also, back up your blog before and after each optimization in case you need to revert. In future articles we'll continue into more detailed specifics, so subscribe to our updates via the sidebar "Content subscription" links if you want to be notified about new content. We don't SPAM, period. Also, there will be a bit of overlap among the performance enhancing tips in these articles because they are all interrelated to one degree or another.

Important note: backing up Google's Blogger is simple, just go to your Blogger dashboard > "Settings" > "Export blog" (at the top center) to download your posts and pages, but, what's even more important while you're tweaking many of these settings is to keep plenty of template backups which is accomplished by going to the Blogger dashboard > "Template" > "Backup / Restore" (upper right button)  > "Download full template" (orange button). Consider making handy links to these two Blogger backup options by making bookmark shortcuts to the "Template" and "Settings" links on your Blogger blog "Overview" page as a reminder. You might even want to make a test run by downloading your Blogger 'Template" via the Backup feature and then doing a Restore of that same template so you'll be confident that it works, because at some point, it's going to come in very handy. Never skimp on your backups! A couple of minutes spent backing up now could save you hours or days of nightmares should you need to revert back to how it was before because of a bad setting. 

As far as Blogger being slow, we're here to debunk that theory pronto. Also, before you read advice on the Internet run a speed-test on that site to see whether they can backup that advice. If it's a slow site chances are good you might want to ignore most information found there as many speed tips and tricks end up breaking sites in the long run, especially when you start stacking them up. The real trick is to have all your optimizations running well together. It's always going to be a game of give and take because you can't have it all. Run a speed-test on this site and you'll see it's fairly fast, but it's also super-simple in design and not necessarily beautiful to look at. You have to weigh the pros and cons of elegance vs. speed and their assorted trade-offs to see what's right for you and your site.

OK, let's talk Blogger site speed and page loading time.


Major website performance parameters to consider:

These factors are universally important in ranking your site speed or page load times. For us, the GTmetrix tool (link at page bottom) is one of the best performance measures of all: It includes Yahoo YSlow and Google PageSpeed and if you can achieve a high score on those, you probably have a universally fast website by any other measure. GTmetrix also has a JavaScript bookmarklet you can use to test yours and other sites on the fly while you're deciding what to use and what not to use.

Let's look at some of the biggies:

  • Visual embellishment
  • Advertising
  • Social plugins
  • CDN (content delivery network) usage
  • Expiry headers
  • Picture, image, and graphics optimization
  • Cookies
  • Put JavaScript at bottom
  • Minify JavaScript, CSS and HTML


Visual Embellishments:

Pictures and icons, fancy backgrounds, and assorted decorations take a toll on your website speed. There are techniques like CSS Sprites, compression, and content delivery networks that greatly reduce the negative effects but it's best to be cautious, take your time, and run a speed check after adding a gizmo or effect to your site to weigh the impact and decide whether it's something worth having. There is so much cool stuff to decorate sites with the urge is often irresistible. Ultimately, simple is often better.


Advertisements:

Everyone wants to make a little extra money for the great efforts they put into their sites, but it's very easy to get to the point where all people are going to notice is a big blob of ads which will cause them to leave your site in an instant. The most irritating sites of all use pop-up ads (or promotions to sign up for some BS PDF book, their social pages, or whatever) that require user intervention before you can view a web page, and then there are the automatic video ads (especially with sound) that send you on a wild goose chase trying to find the annoyance (that's if you even bother to stay on the site), and of course let's not forget the word link ads that pop up all over the page where you feel like you're playing a game of battleship when all you're trying to do is simply scroll down through the content.

The reason we mention this is because no matter how fast your site is, it won't matter if visitors bounce off your site like a bat out of hell trying to get away from the insanity. Many will slow your site to a crawl as well, so when installing ads run speed tests immediately to see how they're affecting your site performance. Who wants to hang around waiting for some slow crappy ad to load?; and, as a rule, the shadier ad networks will provide for the worse performance and end-user experiences because they are basically trying to trap your viewers into their scheme.


Social Widgets, Gadgets or Add-ons:

People are so psyched on the social craze that they feel naked if their site doesn't include a social plugin running up and down the side of the page or glaring out in some other manner. Don't be fooled, most of your visitors are savvy web surfers that will engage you socially with modest links instead of shout-outs, plus, we all know of the few crazy-popular web social people who fool you into thinking that's what it takes to succeed, and in certain circumstances it probably does, but just don't worry about it and get some content out there because 99% of the time "it's the content" that sells.

We've tried nearly every website sharing tool there is and they are all humongous resource hogs, so, be sure and test the effect they're having on your site. The popular social sharing button sets have the buttons developers and the social sites they're connected to all scrambling to take a cut of your bandwidth resources to benefit them, not you. Don't forget, people know how to share the good stuff already without obnoxious and resource intensive in your face interactive sharing buttons dancing all over the page while they are sucking the life out of it.

As far as Google's Blogger goes, the most streamlined social sharing tool is built in and made available by going to the Blogger dashboard > "Layout" > "Blog Posts" > check "Show Share Buttons". They're like what you'll find at the bottom of this post. Even with this though, you'll likely add an expires header without a far-future expiration date, a cookie, and a slight hit in page speed.

We tested out the "RevolverMaps 3D visitor globe" for this article because we like it and there are always going to be extra things you want to add to your site. We wanted to leave it on the site, but the RevolverMaps 3D globe cost us a 1 to 3% performance hit across the board (for that one item only) when measuring its impact via the various website speed test pages. The RevolverMaps gadget is pretty fast in comparison to some of the other stuff you'll probably experiment with but it all adds up. Just do the math... if you install a typical amount of add-ons, your site is likely to take a 10% to 15% performance hit right off the bat, and that doesn't even include any resource intensive advertising you're trying to deal with. You can't reasonably expect people to hang around waiting for a slow page load, and the ones that do probably loaded your site quickly because they're using AdBlock type programs and aren't seeing that stuff anyhow.


CDN (content delivery networks):

This is the biggie! CDN's will make your site fast. Almost every site greatly benefits from CDN integration and it's an almost automatic feature from many web hosts, but you can better their offerings by tailoring the CDN integration to match your site's features. The Blogger platform greatly benefits from additional CDN integration and when we added CloudFlare it was astounding enough to write a short article about. Of course with Blogger blogs, Google has already routed many of the assets through their "PageSpeed" type CDNs right off the bat with no user intervention necessary, but, in addition to Google's CDN and the optional CloudFlare CDN, we also added Amazon's CloudFront CDN for serving up cookieless graphics and images with cleaner URLs (and you can use it for a whole lot more as you advance).

You're going to add a few DNS lookups with the extra Content Delivery Networks, but the performance gains are well worth it.


Expiry Headers:

For many types of websites and blogs you can look up "How to add far future expires headers to htaccess" or "htaccess etag configuration", but with Blogger you're going to need to take a slightly different route because you don't have an htaccess file per se. Be glad about that though because it's fairly easy to screw things up with lousy .htaccess settings or other errors you might encounter along the way. Plus, no one really seems to agree with which htaccess file settings are ideal. On the other hand, with the Blogger method we suggest next, you can switch the setting on and off at will (or on the fly) with no detrimental effects. Just run your site through the CloudFlare CDN and go to the "Performance settings" tab, and from there set your "Minimum expire TTL" to 1 year (or less if desired), and Bingo!, you've managed an equivalent with one simple mouse click (after you're wired into the CDN of course).


Optimizing your images:

One of the best ways for many websites to gain additional speed and SEO will be in optimizing the images and the way they're served to visitors, and that's why this section is a bit more detailed than the rest. The four most common problems are 1) having the wrong size images in that they need to be resized by the web browsers on the fly, 2) not having height and width attributes like width="200" height="150", 3) not having "alternative text for images", and 4) not compressing images for speedier presentation. Everything is debatable, but good SEO generally requires these optimizations whenever humanly possible.

* The "alternative text" (ALT text) attribute is important and what people will see in place of your image on the web page if the image doesn't load. "ALT text" is also used if someone is using a screen reader. Also note that Google says they tend to crawl the "ALT text" for additional info about the images. On the other hand, the "TITLE text" attribute is related to the float title (or tool tip) that pops-up (or floats) above an image or link when you hover over it with your mouse in many browsers like Chrome. The "TITLE text" is mainly just for the convenience of your readers, the "ALT text" is more critical.

Most suggest that you don't use the same (carbon copy) titles for both the ALT and TITLE picture texts; and to make the ALT text a more robotic description of the actual image, and the TITLE text an enhanced or embellished description for the viewers pleasure.

* Make sure you compress your pictures before uploading them to your server! We like TinyPNG for PNGs, and, with TinyPNG you don't have to decide on the proper settings because they'll be applied automatically. If you're a photographer type you'll know about the more advanced optimizations you might need for high-res imagery within your preferred image editing software.

The other two very common image performance problems are 1) not serving them via a CDN, and 2) having cookies associated with your images, pictures and graphics. Luckily, both of these problems can be resolved in a move that is fairly simple if you're starting a new site and more time-consuming if you're converting an established site that has hundreds or thousands of images.

In short, search for "s3 cloudfront cookie free images" to find the solution that suits your particular configuration best. Basically, you host your images in an "Amazon S3 bucket" (or folder) and connect that bucket to the "Amazon CloudFront CDN" and then use the CloudFront URL (vs the S3 bucket URL) for maximum speed. Besides having super fast serving of images worldwide via the CDN, they'll be cookie free as well.
Note: we use the CloudFlare CDN (not Amazon CloudFront like we do with images) for the bulk of our website, but we can't run the images through the CloudFlare CDN because they use cookies as part of their security countermeasures.

Optionally, you can then run from Amazon CloudFront to a separate domain or subdomain you own (and bought from Godaddy or whoever) so you have better control over your final URL destinations if you ever need, or want, to move away from Amazon.

In other words, you first have the Amazon S3 bucket URLs where your pictures are hosted, then, to speed things up, you redirect the S3 bucket URLs through the CDN and then use the CDN URL output name for added speed; and, optionally, you can then redirect the CDN URL to a special domain name you own so you can have ownership of the final picture URL name instead of having an Amazon URL associated with them.

Basically, your pictures can not be on the same domain as your website, or any website, or they'll have cookies because cookies are a necessary part of normal website functionality (of course there are exceptions). So, buy a domain name and use it only for images and graphics. Like everyone likes to point out; that's what Google and Yahoo do.

Amazon S3 -> Amazon CloudFront -> a separate domain for Image URLs (optional)
- like -
https://s3.amazonaws.com/PictureName
to
http://random.cloudfront.net/PictureName
(optionally) to
http://YourDomainName/PictureName
or (sometimes)
http://SubDomain.YourDomainName/PictureName

We're not doing step by step walkthroughs in this article because we're speaking in generalizations, we don't want this article to be a mile long, and every site is going to need to attack things in a slightly different manner depending on how they have things set up, so let's move on.


Cookies:

Cookies are very useful tools for both website owners and their visitors but too many equal just another resource hog due to the extra requests. As described previously, images are a common culprit contributing to excessive cookies and we dealt with that in the last section by moving the images to a cookie-free domain.

Another technique to reduce or offset cookie impact is to route your entire website through CloudFlare (or another CDN). They'll likely add a few security designated cookies to help reduce exploits, but the performance trade-off will far outweigh a couple of cookies (2 in our configuration with CloudFlare for example).

For any other cookies, run a test with YSlow to see where they are coming from. If possible, for performance reasons, it's generally best to do away with services, outside of your hosting platform and CDN, if they're setting cookies on your site unless it's something you've got to have.

In regards to your website visitors, the general fear of cookie monsters is mainly fueled by a delusion of privacy on the Internet, but, most people understand their usefulness today.


Put JavaScript at bottom:

Simple enough, just place it right above the </head> or drag your Blogger gadgets with JavaScript to the bottom below the "Blog Posts" on your page elements "Layout" section in the Blogger dashboard. The main elements to be concerned with are those that load within view on the top part of your page, or above the fold. Actually, don't worry if you want to place a few ads (or whatever JavaScript) higher, it's give and take, and if everything else is good it won't have a huge effect anyhow unless you're maxing things out. It's more a matter of how all the little things add up in your final configuration. Side note: most CDNs are also going to give you the option to automatically minify and asynchronously load your JavaScript files for even faster page-loads no matter where your JavaScript is.


Minimize CSS, JavaScript, and HTML manually:

As far as CSS and Blogger, just don't worry about manually compressing it. Google's CSS is optimized enough for you to score a 99 out of 100 on speed tests if you're running through a CDN or two and all else is well. That is... if you have a stripped down bare bones site built for speed and nothing else. Most non-spammy professional websites can score an 80 or better on YSlow and PageSpeed any day of the week. Ultimately, if you must, just look up "CSS Compressor" on Google to see your options. Compressed CSS works with Blogger but the gains are minuscule and you'll likely strip out some of the components or effects that you wanted to use.

On the other hand, your JavaScript will usually compress without problems. Just back the JavaScript file up to your text pad first so if compression breaks it, you can put the original back in its place with no problems. We like the JavaScriptCompressor.

HTML is also easy to optimize and can be accessed via your Blogger dashboard"Template" > "Edit HTML". Back the template up first; even if you're just contemplating a change (because sometimes you start screwing around and realize you didn't backup, so just make it a habit). We like the HTMLcompressor for compressing the Blogger template. Do your research first, but for the most part, just open "Edit HTML" in Blogger, copy all of the code, paste it into the HTML compressor, pick "Blogger" from the "Code type:" drop down menu on the upper right, and tap the compress button at the bottom of the page. Now, copy the finished "HTMLcompressor" compressed code and paste and replace the code you originally copied from the Blogger HTML template (which is all of it) and click "Save template".


Other Things to Consider:

Remember, no matter what you do to your site it won't be what people are looking for unless you get good content on it for people to enjoy. We get sidetracked like crazy continuously and have a big sign above our desk that reads: "It's the CONTENT stupid!"


List of best website performance measurement tools:

These four website speed tests will provide you with everything you'll want to familiarize yourself with in your need for speed.



Thanks for hanging out for a while and no matter what you do, take your time, backup, backup and backup, and when you're getting stressed out save it for another day.