Portfolio Done
Woohoo! I finally finished updating my design portfolio. After a few years of neglecting, it’s finally done (for now).
I did a lot of optimization to see if I can get the new portfolio to load faster than the old one. In some ways, I call it a “tie”.
Here is a “total size” comparison between the new and the old one:
New one:
Old one:
Analysis:
I loaded my website on Safari and used the Web Inspector to test the downloaded total size of my entire web page. The old one didn’t have the new updated projects which means the old index.html is going to be smaller. I think what caused the new stylesheet to be bigger is I included the CSS from the jQuery plugin “FancyBox” with my stylesheet. The FancyBox CSS is 8kb by itself. It’s good to see that the total images and scripts were less on the new versus the old. Basically, I saved myself 249.42kb!
Loading Time Comparison
Slowest loading time (for new):
Fastest loading time (for new):
Slowest loading time (for old):
Fastest loading time (for old):
Analysis:
Because the new index.html file is bigger, it caused the page to load 0.7 secs slower. The same can be concluded with the new stylesheet versus the old one. I’m surprised about the images though. Even though the total images from the new layout is smaller than the old one, the page loads slower on the new one versus the old. My conclusion is that it has to download more images.
What I’ve Learned
I have learned that file and image optimization go a long way to make your site load faster. The less HTTP requests the browser has to make, the faster the page will finish loading. I also learned that loading jQuery and Wufoo caused the page to load a little slower.
Things to Improve
I may try these things out:
- Use a jQuery plugin that loads the top part of the page’s images first. Then when the user scrolls down, it’ll request the other images to load. This effect can be seen by looking through Smashing Magazine’s articles.
- Try gzipping the files to see if it can help speed up the loading.
- Try caching the files. Maybe some Amazon CDN?
That’s it for now. Maybe one day, I may think about a possible redesign. =)
