I'll be hiding this post from search engines because this is not related to TMCNHS at all! This is related to blogger's XML and javascript.
I encountered this bug about loading resources. I use chrome to develop. Why? Because Chrome gives me control over almost all resources that I browse. I'm tried Firefox before, but ain't so good for the web developers like Joshua Orozco (me).
Anyway, here's the screenshot what I want to talk about.
See those jpgs and pngs (images files in short)? It's a bit small, unless you zoom. All these images are loaded. What the hell?!?! Obviously, I don't want these images to be loaded on home page because they slows the delivery of the content. I should have around ~40 requests to download (mainly CSS and some tiny images for layout), not 50.
I'm still looking for this bugs and hopefully I'll get some speed boost on this site so that my folks in my former school TMCNHS will happily browse the site and contribute.
...then after 3 and a half hours of debugging I was able to find out that the blogger itself was initially outputting the full content of every post that I made. So to combat this problem, I have to create a post excerpt for each.
Curently however, blogger doesn't seem to be offering a setting to put excerpts, except inserting 'Jump Break'.
So what is 'Jump Break'? Basically, it puts <-- more --> into HTML and this create a dashed line with thick grey background on the word editor. Anything before that line will be processed by some blogger XML code and will be displayed in the home page
Images BEFORE this jump break will be displayed on home page's 'Recent Posts', and will not if images are placed AFTER the jump break.
So there you have it! To prevent bottlenecks on page speed load times, I have to remind contributors to apply 'Jump Breaks' for posts with 3 or more images, or do it myself.