Flash – Basic Optimization
This post is really rudimentary from a tech standpoint. If you are even reasonably familiar with Flash you know how to fix the problem I came across.
The Rant
I was called in on a project that caught me off guard. Seriously caught me off guard. I got the call from a marketing agency whose potential clients we telling them that their site took too long to load. So I checked it out… and I waited… and waited. Thirty (3-0) seconds later, the site started up. Thirty seconds. On pretty fast cable broadband. Unbelievable. AND, worse, it was a 100% Flash site. Ugh. Ok, full disclosure: I’m a big fan of Flash. I know Steve Jobs supposedly killed Flash, or more accurately, he wishes he could kill Flash. He did get the ball rolling, but there were many reasons to hate Flash before Mr. Jobs went on a tear. From my perspective the problem is not the tool, it’s what some people choose to do with it. Anyway, that’s an entirely different topic, and one that plenty of others are going back and forth on. My point is that this site was an example of exactly what *not* to do with Flash. Just horrid. It was over 21MB of one gigantic swf. A single file that all had to load before *anything* would happen on the site. Not even a real loader of any sort.
Of course after experiencing the pain of the existing site I had to look up the person who built the site. Interestingly their own site was not 100% Flash, it looked good and worked pretty well. So why did they choose to build the agency’s site that way? You may ask why did an agency like that outsource building their own web site, but, well, it happens. Why did they ever pay for that site is certainly a realistic question to ask though.
As is usually the case, the agency had very little money for the project. I gave them the pitch any reasonable developer would – rebuild the site with minimal Flash, make it much more SEO compliant and get rid of all the bulk. Once they shot that whole idea down I got right to seeing what I could to to speed things up and keep it all looking exactly the same.
Round 1
First I took a look at all the imported bitmaps. Every one of them was set to 100% quality. Similarly, the publish settings for bitmaps was 100%. I’ve almost never seen a case where 100% was significantly better than about 80%, so I reduced the overall publish settings. Since the look of the site is sort of grunge, I went a little further and knocked the quality setting down to 70%. Then I went through each bitmap, and reduced the quality as far as I could. There were a number of very large graphic elements used as transitions – they slide past as the background changes. You barely see them. They’re large. And they were all set to 100% quality. I knocked them all down to about 15%. Then I repackaged the whole mess. With no serious changes the swf file was 8MB smaller than the original. Still way too big, but better. So I sent it to the client, told them to put it on their server and told them I’d see what else I could do.
Round 2
Without going into too much detail, I spent the next couple of days pulling out as much content as I could and splitting it into separate swf files that could be loaded into one main module. Ultimately, I could only pull out 4 out of 7 sections, but it turned out those 4 sections contained about 90% of the bulk of the site. So I left the 3 small sections in the core module, and pulled out all the over sized graphic elements to load externally as well. I used the standard method of loading external content into movie clips. Nothing at all tricky. The final result was a core module that was less than 2Mb – still way too big of course, but as small as I could get it given the time I had and the money the client had. And because of the way the site worked, the load time is now negligible. There is a loader, but the way it works makes it look like the site starts working right away. So the client was really happy.
Postscript
The result of this project feels a bit strange. On the one hand, it’s satisfying to make a big difference and make the client happy, but the original site was SO incredibly poorly designed that it’s not an ego boost or anything, I feel like I did what should have been done initially, because that’s true, and even though the client was ecstatic at the result, the site still sucks pretty badly. Ultimately it was just a frustrating situation. A tool I like being used in *exactly* the way that it’s critics like to pick on. But it wasn’t the fault of the tool. And my improvements don’t change the fact that the site should still be completely redone, not in Flash. I still like Flash for many reasons, but that’s for another time. Maybe.