Currently finished with the 90% of the HTML/CSS of my website. I found this great free photograph to use in the main image section of the site. (Looks so classy.) I need to post some of the portfolio image alternatives I came up, but decided not to use.
This post is all about site performance optimization, what I did and what I learned. (That big, fat, red F in my cover image is explained below!)
Getting Started
I wasn’t initially set on improving the performance of my site. (It’s only 1 page.) But, remembering all my lessons on Treehouse, I decided to minify some files anyway, like a pro. For CSS minification, here’s a nice simple site for that: cssminifier.com. This site also has a js minifier and image optimizers. In addition to working on my style.css file, I went through and deleted unnecessary classes for my font-awesome css file, and minified the CSS, since I only needed about 12 icons. (I’ve since added a few back.) I also minified the smoothscroll.js file, which gives my site that, you know, smooth scroll effect. It’s a pretty short file, but it doesn’t hurt.
Before I used cssminifier.com, I also took it through a clean CSS filter on http://www.website-performance.org/ to prettify* my style.CSS file before minifying it. While I was there, I also decided check out the site performance. Ouch! Some big issues, especially with compressing images, including my new classy photo. This is where I got started on improving site performance.
Optimizing Files
Two big problems were too many CSS calls and images that were not optimized. I realized that I needed to link to some CDNs to reduce CSS calls. Instead of including the jQuery.js, Bootstrap.js, and Bootstrap CSS files, I’m now linking to the the files via CDN. I tried using one of the above websites to optimize my images, and also convert some of them to PNGs, but the server couldn’t handle it. So I used good, old Photoshop.
“Gzip Compression”
I did not know what this term meant, but I got an F from a few site performance websites. GTMetrix explains that using a compressed, zip, file will save a lot of space. But it’s up to the browser to decide which file to use. GTMetrix and Website-Performance.org both suggested compressing my styles.ccs, bootstrap.css, and font-awesome.min.css files. Well, since I’m going to be using a CDN for the Bootstrap and jQuery files, I’m not too concerned about those. But I did continue as it advised for the relevant files.
Having done all this, I am happy my site loads fast, especially on mobile. And a learned a lot, not just from these websites, but also about the tools I used to complete them. For instance, Cyberduck, an FTP-transfer client doesn’t show .htaccess files, but Filezilla does.
Annoyances
The sites were a little pedantic about image compression, and they would complain about the need to compress images another 1-4% or so. Since I’m using a portfolio site, it’s not really that important to me to try to squeeze every last unnecessary pixel out of my images, especially since most of them aren’t visible when the page loads. The only one I might consider continue to optimize is the main hero image, because it’s the first one you see.
The optimization sites also pointed about how long it takes for an embedded Vimeo link to load. This is also not a concern for me, because the video is only visible in a pop-up. And the sites also dinged all my embedded CSS files and image files because they were not coming a CDN. I looked into the option of uploading them into a CDN, but abandoned that idea. (I think it might have required a payment, and per my previous entry, that was not going to work for me.)
Summary
For my next project, I’ll start with this site first, because it lists out everything that’s slowing down a site, such as a missing .htaccess file — or I may use it to improve the performance of my other project sites. The nice thing about the results it provides is that it’s very helpful for organizing tasks and working systematically through the performance optimization process.
* Yes, prettify is word!
