Appendix A. Optimizing Site Assets

Speed matters. It matters to users. Your site has to load fast or users will leave. It matters for SEO. Your site has to load fast or search engines downgrade your ranking.

With that in mind, let's take a moment to take stock of the portfolio site in Chapter 2, Bootstrappin' Your Portfolio. Specifically, let's look at a key page speed factor that we can easily control, the size of our asset files—images, CSS, and JavaScript. With just a few steps, we can drastically reduce our site's footprint and improve load times.

Optimizing images

Our images have already been optimized to a degree using Photoshop's "save to web" process. But, together, they still weigh in at 856 KB.

Optimizing images
Optimizing images

The images are important. (It's a portfolio site after all.) However, this is a considerable payload. In Appendix B, Implementing Responsive Images, I recommend a responsive image technique that will reduce the file size for smaller devices. But even without that technique, if we can reduce the file size by compressing these files more effectively, we should do it.

We can usually squeeze out a few more pixels without damaging our images by using tools such as Yahoo!'s Smushit (http://www.smushit.com/).

For Mac users, the free ImageOptim app at http://imageoptim.com/ is a similarly helpful tool. By using it in this case, I've been able to shave a total of 29 KB off my combined image weight.

Optimizing images

That's not a gigantic gain, but every bit helps a little. Let's keep going.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset