SitePoint Podcast #140: Web Page Bloat
Episode 140 of The SitePoint Podcast is now available! This week the panel is made up of Louis Simoneau (@rssaddict), Kevin Dees (@kevindees), Stephan Segraves (@ssegraves and Patrick O’Keefe (@ifroggy).
Download this Episode
You can download this episode as a standalone MP3 file. Here’s the link:
SitePoint Podcast #140: Web Page Bloat(MP3, 36:42, 35.3MB)
Here are the main topics covered in this episode:
- Royal Pingdom: Web pages are getting more bloated.
- jQuery Mobile reaches deployment.
- Foursquare Gets Redesigned
- Youtube Upgrades HTML5 Video Player
Browse the full list of links referenced in the show at http://delicious.com/sitepointpodcast/140.
- Kevin: Postmark – Email For Your Web App
- Patrick: The Final Rap Battle!
- Stephan: How To Write Unmaintainable Code
Louis: Hello and welcome to another episode of the SitePoint Podcast, another panel show this week covering the news and events in the Web and the world of web design and development over the past few weeks. This is a special panel show because we’re welcoming a new member of the panel, Kevin Dees, hi Kevin.
Kevin: Thank you for having me and hello.
Louis: Absolutely a pleasure. And we’ve also got the two remaining members of our regular panel, Stephan and Patrick.
Stephan: Howdy, howdy.
Patrick: The last men standing (laughter). Hey Louis; welcome to the show Kevin.
Kevin: Thank you, thank you.
Louis: So, Kevin, do you want to maybe just introduce yourself for the listeners and then we can dive straight into the stories.
Kevin: Sure, I can. So, I am Kevin Dees, that’s my name, I run a website called Kevindees.cc where I do interviews and post about just the random thoughts that I have, so that’s where I’m most known. And I also do another podcast called The Web Weekly where I met Patrick and our relationship started and has gone on from there. So that’s kind of me in a nutshell and, yeah, I’m excited to be on the show, I’m excited to be here and just talk about web and web design and all those wonderful things.
Patrick: Kevin was a listener of the SitePoint Podcast on and off, so that’s sort of how we first met, and we’ve hung out at a couple conferences and of course he’s done some interviews on his site, so that’s kind of what led us to invite him to join the show. But also, Kevin, can you tell us a bit about your development background and what makes you a fit for a web development podcast.
Patrick: Excellent, excellent. Well, welcome aboard.
Kevin: Thank you.
Stephan: Welcome aboard.
Louis: Yeah, welcome. The first thing that’s worth sort of talking about a little bit this week is — and this happened pretty much I think the exact day we recorded the last panel show, so it’s been a little over two weeks now so it’s probably old news to anyone listening, but since we haven’t had a chance to talk about it, Adobe has resigned Mobile Flash as a platform that they’re working on, so I guess go HTML5.
Kevin: Yay, go HTML5, yay.
Stephan: Woo hoo.
Louis: So I guess we won’t dwell on it because like I said it’s an old story, I just wanted to shoot it out there and I guess we can always revel a little bit in the decline of Flash.
Stephan: Now, now.
Kevin: I think it’s an interesting story and news because Flash has been the plugin of choice, right, for not only the desktop but they were hoping to become at least the one for mobile, and so to see them back down from that and to focus their efforts on different areas I think starts this trend for other companies to basically take HTML5 more seriously, or maybe it is that Flash and Adobe are the last tools to really take that approach.
Louis: Yeah, it’s kind of played out interestingly and the way it’s developed in the sense that the iPhone didn’t have Flash and then Android added Flash and it was still kind of in this nebulous space where we didn’t know whether it was going to be a major part of the mobile web or not, and I guess now we know, now we know the answer.
Patrick: Yeah, one more iteration of Mobile Flash for Android is on the way at least, Flash will be available to Android 4.0 users for the end of the year, but that appears to be the fond farewell according to a story by Shamus Bellamy at PC World. But Flash for the desktop is still around much to many of our listeners’ chagrin, so that’s — don’t take this the wrong way, this is just mobile Flash just in case your heart skipped for a second and you didn’t hear the mobile part.
Kevin: I have a story, my first story on the show, yay, jQuery mobile its final release is out and so everyone can start to use this, it’s finally out of beta and release candidates, the supported operating systems if you haven’t heard of it are IOS, Android, Blackberry, Windows Phone, Palm; so those are kind of the core ones. And essentially what this does is it allows your site to have the same feel as a native app on a phone, more leaning towards the iPhone and its experience, so you have transitions and dropdown menus, that kind of thing, that kind of fit with that space. So, you know, I think this is an interesting release in that responsive web design has been — kind of been the trend for a while now, and when these other technologies like jQuery or jQTouch when it was first come out, so it’s now jQMobile, when these platforms first came out there wasn’t responsive web design. And so to see these other platforms continue to move on alongside responsive sites will be interesting to see when people try to use these things, right, because sometimes jQuery Mobile will be the correct solution and other times responsive will be, so, you know and plus it’s kind of — jQuery Mobile’s kind of one of those things you just kind of turn on that works, right.
Kevin: Yeah, it will be interesting because most people that go in, and I know when I go and make websites if I go mobile I normally will use the responsive style of doing things whether it’s a fluid or elastic system or actually using media queries, right, so just something that’s more device agnostic. And so a plugin like this I can see people using or myself using when maybe you’re trying to put this together something quickly, trying to put together something on the fly, maybe an app idea or a presentation, but I think it’s going to circle around that one word which is app, right, it’s not going to be the flavor for the website, it’s going to be web apps I think that’ll use this mostly.
Stephan: That’s the key for me really is that this is an application design tool for me. If I was going to jump into it I think that’s what I would use this for, I don’t think I would use it to turn my homepage into a mobile friendly site, I think I would if I had an app idea this would be where I’d go to start that idea; I don’t think I would go to the iPhone SDK or anything, I think I would come here.
Louis: Yeah. If anyone hasn’t had a look at it, definitely go to jquerymobile.com and have a look because there’s a lot of cool widgets for forms, for all kinds of behaviors in widgets on the website, and the whole thing is there as a demo, you can click around and play with it directly on the website, so worth having a look at if like you said, Stephan, for something where you want a quick launch into building a mobile web app.
Patrick: So what’s the next best story?
Louis: (Laughs) Are we doing these in order of quality, oh shoot, I would’ve gone first (laughter).
Patrick: I don’t know, I’m just saying what’s the next best one.
Stephan: So there’s an article in the Business Insider today about YouTube upgrading the HTML5 player, and it’s kind of the sign of the times as YouTube gets ready to get rid of Flash completely. Some of the things that they’ve done, they’ve enabled annotations and captions, they’ve made 480p and 1080p both options now, and you get native full screen support for Firefox and Chrome, so some cool stuff there all done in HTML5.
Louis: Yeah, the annotations in captions is big because when they first rolled out the HTML5 player a lot of people pointed out that those features were really lacking and as long as it didn’t have all the features of the Flash player it was only sort of a cool thing for web developers to look at and geek out on, but it wouldn’t really be an alternative because it was lacking some of the core features, but it’s good to see that they’re adding that stuff in now.
Stephan: Yep. Oh, I was going to say you can also sign up to kind of test this out if you want, on their page you can go — say you want to use the HTML5 player and that way you can report bugs and things like that, so it’s cool.
Patrick: Yeah, the story by Noah Davis says it ends with “The moves are another blow in Flash’s inevitable defeat.” So he’s quite bearish on Flash’s future, and it makes me think if HTML5 takes away media playing, if it really gets it right and Flash is no longer seen as the standard that it once was when it comes to video and audio playing, does it go back to being a niche kind of design tool as it once was many, many years ago or is this is for Flash, is this kind of the last hurrah, is the last thing that it really does well at this point?
Louis: I don’t know. It’s kind of interesting because I went to the Melbourne Web Developer Meetup last night which was just downstairs in our building at 99Designs, and I was giving a little quick talk on some of the fraud prevention stuff we do at Flippa, and I don’t regularly give talks so I don’t have keynote or PowerPoint installed on my computer so I just really quickly Googled, you know, I tried the Google Documents presentation thing and it was kind of crappy (laughter), so I just quickly Googled like online presentation tool and I found this thing called SlideRocket and threw together something in about a half hour that morning, and it was really, really good, it was a really great tool, you can import images from Flickr directly, it connects with — you can show a live Twitter stream in the presentation and it’s all online, and it’s all built in Flash and it was really good, like it really felt like using a desktop application in the browser, and I don’t feel like there are very many pure HTML apps that have exactly that level of quality, I mean obviously Google Docs is great but I have to say like the experience that I had with this as a Flash app was really, really good. So I think it probably still does have a place for certain, you know, very rich application functionality.
Patrick: Hmm, yeah.
Kevin: Good points.
Louis: Cool. I had a little bit of a short story as well that I wanted to talk about, and it is kind of I guess relevant to that if you’re stretching the limits of what constitutes a segue here, but this has to do with website performance and it is a story on Pingdom.com which is just a blog post that they wrote recently about the fact that over the last year on average web pages have become 25% bigger, so this isn’t the actual pixel size but the download size of websites. So what they did is they went through the http archive website, gathered statistics for the top 1,000 websites in the world and looked at stats over the past year; the average page size a year ago was 626 kilobytes and currently it’s at just around 780 kilobytes, 784, so that’s pretty massive growth in a very, very short span of time don’t you think?
Stephan: Yeah, to say the least (laughter).
Patrick: I wonder at what rate bandwidth adoption is growing like as comparable to this, it would be interesting to see those two numbers side-by-side.
Louis: I think if you include mobile usage bandwidth has actually probably gone down over the past —
Patrick: Okay, drop those mobile — drop the mobile stuff out of it then (laughs).
Louis: Well, you can’t, right, that’s the whole point, you can’t.
Patrick: But this is the home pages right? I mean this is the default desktop designed home pages, not like a mobile version, not a responsive version but the actual just default what you see on your laptop.
Louis: Yeah, I guess that’s an interesting question is, you know, I mean I think it’s fair to say that it’s unlikely that over the past year any of the top thousand websites would have any sort of conditional loading or advanced responsive designs where if you load it in a small window it will only load a subset of resources and then it will go out and get stuff. I mean that’s a pretty cutting edge technique that I don’t think a lot of these top websites will be using, at least not just yet, or maybe people like Google and Facebook will be —
Louis: — to be fair.
Patrick: But many of them probably would direct you to a mobile version if you were using a mobile device.
Louis: Yeah, you might be directed to a mobile version, so that is fair.
Patrick: Right, yeah.
Patrick: (Laughs) Well, no, it’s not that, absolutely not that, we love developers.
Stephan: No we’re not (laughter).
Patrick: Yeah, so those kilobytes, man.
Kevin: What do you guys think about the fact that websites are simply easier to build now with sites like WordPress.com and Tumblr where anybody can go in, create a site and then download their 16 social media plugins, all these plugins for these things, and that may attribute to some of this, so maybe it’s not just web designers getting lazy but perhaps just the fact that the average Joe can go in and start plugging away and doing things on their site that they wouldn’t normally have the ability to do because of the ease of access.
Louis: I think that might be a valid point. In this particular case because it’s a survey of the top 1,000 sites I don’t think there would necessarily be an impact of amateur developers on these numbers.
Louis: But I think that’s probably if you’re looking at the Internet at large there probably is a lot of poor website performance that’s due to those new tools and that ease of use.
Kevin: So this isn’t factoring in the dot com for wordpress.com?
Patrick: And it’s interesting, Kevin, when you mention that what you brought up in my mind immediately was how WordPress recently touted that, and we talked about this on the show, I think Brad Williams brought it up obviously, they were touting that WordPress according to an in-house survey they determined that they are powering 14.7% of the top billion sites worldwide. And I know that I’ve heard either that or a top x number of sites being powered by WordPress online as the software grows in popularity, and so I say this facetiously that this growth in kilobytes could then be tied to the growth of WordPress infiltrating the top one thousand sites. Obviously I’m joking, but it’s funny that you made that suggestion.
Kevin: I think it would be interesting to see whether or not it included the sub-domains at WordPress, I mean you would hope that they didn’t.
Louis: Yeah, it’d be cool to see; I don’t know if they have a list of which sites were included, a websites tab on the http archive, yeah, okay, so it’s this — so I’m just having a quick look, I think this is a bigger list. If you go to httparchive.org and click on the websites tab you’ll see there are 37,000 total URLs indexed, and I’m just sort of scrolling through them and they don’t look like any of them are sub-domains of wordpress.com, so it looks like they’re all sort of top-level domains.
Louis: Well, not top-level but, you know, they’re all domain names. Yeah, so what I was going to say about this, though, is that it really does highlight the importance for web developers to learn about and to focus on issues relating to front-end performance; there’s so much stuff that can be done to make this better and to make your pages load faster, and the time it takes your web page to load is maybe the number one feature that people are going to be happy about, so, yeah, I think it’s super important, people should spend more time making their websites run faster and less time just adding new stuff to them.
Kevin: So, speaking of site performance, it would be interesting to see how the new Foursquare site holds up because they just recently redesigned their site. I found this out through Sam Brown on his website, he had spoken about them launching the site, and I think an interesting part of this redesign is their focal point which is the signup with Facebook button. So they’ve basically taken the regular signup with email functionality off the screen, so there are no fields on it except for the signup with Facebook button, and so they’re using the signup with Facebook button to basically pull in I would believe the majority of their users, right, so I don’t know if you guys are seeing this trend, and I was interested to see what your thoughts might be on that.
Patrick: Yeah, I mean we’ve talked about open ID and Facebook and all these other login systems, and it’s interesting because I’m always the curmudgeon I think (laughter), that says no, no! I want email, I want a username, I want to have my own unique login and not rely on Facebook, but, more and more people are using it for identification.
Louis: Yeah, I mean I’m definitely among those who prefers to develop my own systems and not sort of rely on Facebook or Twitter or whatever for core aspects of the website, but when talking to the marketing people on our team or even at SitePoint and they love the stuff; when we do the Christmas sale at sitepoint.com for the last few years the sort of comment thread has been just a Facebook comment thread and that has been really, really good for letting people share it easily and you’re just logged in and it’s a seamless experience for most users, and you see it on a lot of news sites now, I don’t know if you guys have noticed this trend where you’ll be on a news web page and you scroll to the bottom and it’s just a Facebook comment thread.
Patrick: Yeah. Yeah, and you know it’s interesting because if you have developer talent and programming talent then obviously you’re able to manipulate those comments and work with Facebook’s API. Just recently a WordPress plugin was released that allowed you to sync comments with Facebook, and so, you know, WordPress bloggers won’t just lose their comments if they shut off Facebook comments. But I definitely think it’s a situation where that sort of thing it’s really dependent on the use; obviously Christmas sale short-term once a year not that big a deal as far as maintaining the content long term, but you’ve got to be careful not to hand over too much of your ecosystem to Facebook, and like I know why people do it, I know why they’re very powerful, how many people use Facebook, it’s immense. And I’m sure they’ve done their testing, I’m sure FourSquare isn’t stupid, I’m sure they’ve done some A/B testing and figured out what converts well and that’s probably what’s driving the decisions is data that’s saying using Facebook sign-in and making it that easy will drive more people to use FourSquare.
Louis: Yeah. I can see how it makes sense, but like you said I’m a little bit skeptical and always a little bit concerned about relying on an external service for any core aspect of the site’s infrastructure. Just speaking about the redesign itself, though, I’ve just logged in, I hadn’t logged in to FourSquare on a desktop forever, I guess it’s just not something that you use on a PC usually, but the new dashboard looks really good, you’ve got this sort of map at the top which shows recent check-ins with avatars on the map and all local things, you’ve got a history of recent activity from your friends, it’s got some suggestions of nearby businesses you might want to check out, it’s a really, really nice interface, I’m impressed.
Patrick: Yeah, I like it as well, it looks really nice, clean, fresh, all those ways that you would describe it, but only thing I notice is as you scroll you get that top bar that stays with the page and looks similar to Twitter I would say, the font off the top of my head looks similar, and the search bar is there, I’m not saying Twitter originated it, I’m sure they didn’t, but it seems like we’re seeing that more and more where there’s this top bar that’s consistent as you scroll on all pages; is that a new convention, are we going to see that proliferate on every website?
Louis: I think for websites where you have sort of account management being a constant thing that you want, especially anything that — see, the thing about Twitter I find is it’s got such a long feed of stuff that having to scroll all the way back to the top to get to change to navigate to your profile or to search, it’s getting in the way of users’ ability to use the site, so for me I think it’s relevant if you have a really, really long page that just sort of scrolls infinitely with an activity wall, for example.
Patrick: Yeah, it does seem like it’s becoming more and more standard with those pages, not only FourSquare now and Twitter, but also Google+ obviously uses it, Facebook does that, and yeah, I mean as these social websites grow I think it is something we’re going to see and also see across different platforms like open source platforms that run forums or social networks to make it easy, as you said, to manage that profile.
Louis: Yeah, well I mean the WordPress admin bar is a great example of — and that was fairly recent, that was only one or two point releases ago that was added.
Louis: And very similar approach. It’ll be interesting to see how this develops, if there are any frameworks out there or plugins, I know I was just saying the plugins are dangerous because they add all this bulk to your page needlessly, but in this case you know it seems like a great opportunity for someone to put together a little package of stuff that gives you this fixed static top bar menu functionality.
Patrick: Who cares about a few kilobytes between friends.
Louis: Well, that’s how it starts (laughter).
Patrick: It’s a slippery slope. You now kilobytes are a gateway drug to slow page loading (laughter). But it’s funny, you know what that makes me think of, I don’t know if you guys have seen this Sprint commercial, but it’s about data and how much data you can use on Sprint and how fast data builds up, and it starts with a counter on kilobytes and the kilobytes go slowly. You know, it starts with a single digit then two then three digits, and it goes up to then a megabyte once it hits a thousand kilobytes, and then the megabytes go faster than the kilobytes did, and it’s like one of those things where if you actually knew anything about this you know that kilobytes would go fast, it would slow down as you got to megabytes; and gigabytes, the gigabytes just fly by but, again, it’s a mainstream commercial and no one really would care all that much, but the geeks among us, the techies among us are like why are the gigabytes going faster than the kilobytes. Anyway.
Stephan: I just want to know what that woman is doing all day, like what is she on her phone constantly (laughter).
Louis: 25% growth of web page size a year, I think that means it’ll double every roughly three and some-odd years, so we could get there, I mean that’ll be exponential in no time and the gigabytes will be flying by.
Stephan: Oh, man.
Patrick: Need those unlimited data plans.
Louis: Actually it would be cool to calculate at 25% a year how long it will take for the New York Times home page to reach a gigabyte (laughter). I’m sure it’s not even outlandish, I’m going to do the math after the show and I’ll post it in the comment thread.
Patrick: Very good, very good.
Louis: Do you want to kick us off with the spotlights, Kevin; given it’s your first show?
Louis: Yeah, so this is something unlike — so I’m just now looking over it, but it seems like whereas things like Campaign Monitor or MailChimp are more focused on sort of marketing email lists where you can sort of track subscribers, this seems like it’s more for actually sending email from an application, so sort of account activation or notifications or new messages or that sort of thing from an application, right?
Kevin: Correct. So I mean sites that use this are things like Forest, Readability, Tender, you have all these applications that use those; if you’ve ever made a web app before you’ll know that, like I said, getting email to the actual inbox as you want it to is kind of hard, and so if you run a big website, let’s say if you’re running the Forest forums, if you’ve heard of those, and somebody signs up for your site, right, they have to click that activation link to activate their account, but if they never get the email there’s trouble, right, and you have to deal with the support hours and all that stuff. So if you’re using a service like this, you know, obviously you can get your email delivered for your web apps and it’s done right.
Louis: Yeah, it looks pretty nice and the pricing seems very reasonable as you were saying.
Kevin: Yeah. So I haven’t been using this personally, but I’m fixing to make the transition to use this for all of my stuff, I mean there’s no reason not to use this and it should be used.
Louis: Cool. Well, let us know how that turns out.
Patrick: Yeah, and the website for this is postmarkapp.com for those looking for it.
Patrick: Alright, I’ll go next. My spotlight is off-topic as usual (laughter), I’m going to throw it back to the —
Louis: Really, what a surprise (laughter).
Patrick: Really; really, really, really. I’m going to throw it back to the Epic Rap Battles of History. They just posted the “Final Battle” between Nice Peter, the person who you see in most rap battles and whose channel it’s on, and Epic Lloyd who you also see in all videos, but it’s them, the individual people battling it out for the “Final Battle,” now, will it be the final battle? I’ll let you decide, but since I first featured the Epic Rap Battles of History series back in April, I believe here on the SitePoint Podcast, they’ve releases such epics as Christopher Columbus vs. Captain Kirk, Mister T vs. Mr. Rodgers, and Dr. Seuss vs. Shakespeare, so if you haven’t been keeping up-to-date this is your chance to get back into it. And you can find it at youttube.com/user/nicepeter or Google it and all roads will lead to Epic Rap Battles of History.
Stephan: And I’ll go third. Mine is a write-up that I find hilarious called How to Write Unmaintainable Code and Ensuring a Job for Life (laughter). And it’s pretty fantastic, there’s like for naming, naming your variables, just use a baby name book, you’ll never be at a loss for variable names (laughter). Be abstract, make heavy use of words like everything data, handle, do, digits, just random digits for your function names, just great stuff, so if you’re worried about your job have a look at this.
Patrick: This is a guide to best practices, is that correct, is that how I should read this? (Laughter).
Stephan: Exactly, the manifesto.
Louis: Wow, this is actually pretty long.
Stephan: Yeah, it’s really long.
Louis: There’s an amazing amount of stuff in here, it’s got guides to like really good obfuscation (laughs).
Stephan: How to hide forbidden globals (laughs).
Louis: Ah, man, yeah, terrifying.
Kevin: I love this one, it’s Mary Poppins = Superman+Starship divided by God (laughter).
Patrick: Oh, gosh.
Stephan: You’re welcome.
Patrick: (Singing) You know that I’ve got Jasmine on my mind. That’s a song, sorry (laughter), it’s a song by Black Rob featuring Carl Thomas, anyway, very good. I’m tempted to hand that programming guide to like — I mean wouldn’t it be funny to hand that to someone who was just wanting to get started in programming and then watch them just be terrible, and it excites me, and that would be very mean, but it’s like if that was someone’s first guide, like they just found this and somehow missed the heading and thought this was an actual guide like what would the end result be? I’m curious, quite curious.
Louis: I’ve seen code that looks like it was written as if this had been taken as a literal guide (laughs).
Stephan: Good job, Stephan.
Kevin: Wasn’t that called Geocities back in the day?
Patrick: Oh, ho, ho, wasn’t that called Geocities back in the day, Kevin said, yeah (laughter).
Louis: I never saw their implementation code; I’m probably saner as a result of it. Yeah, awesome, I guess we can wrap it up then.
Louis: And you can follow SitePoint on Twitter @sitepointdotcom, that’s sitepoint d-o-t-c-o-m, and you can follow me on Twitter @rssaddict. If you want to leave a comment on this show or find any of our previous shows just go to sitepoint.com/podcast, we’d love to hear what you think; you can also email us at email@example.com. Thanks for listening!
Theme music by Mike Mella.
Thanks for listening! Feel free to let us know how we’re doing, or to continue the discussion, using the comments field below.