Work On Page Speed|

So let's talk page speed for a minute and why its important. I see a lot of beautiful sites out there and it kills me to see such a nice website load so slowly. So what's the catch?
I think people are preoccupied with design and don't worry about performance nearly as much. Take any pretty site you find out there and run it through Google's Page Speed Insights benchmark, and you'll start to see things more clearly. I'm not saying that I own magical performance powers but I do make my sites perform. Because page load speeds and code efficiency all lead to more love from google, you should worry about it now. Slow sites provide a bad user experience and rank lower on google. So imagine having a slick looking car powered by steam. Sucks right? I'm going to mention a couple of things that I use for smaller sites like personal sites/blogs/portfolios and pretty templates from TF, CM...

Before you start to code

When you work on a design in photoshop, sketch... Try and think one step ahead. Can something be drawn with CSS or do you absolutely need to use an image there? Try and make the bulk of your design CSS based! Remember that CSS is fast and images are slow.

CSS

Make your classes reusable. An example? If your template's color is #8bc0ec, then don't add it to every little thing that uses it. Add a class called .color and apply it to every element that needs it. you get rid of 50 lines of CSS with just that one little tip.
Now delivery of CSS and JS is also a big thing. I usually have a CSS file but load it inline on the page. With whatever you use for the backend just read the minified CSS file and insert it into the page in a style element close to the end of the html.

JS

Use the async attribute on your javascript elements and do load it in the footer of the site... The async attribute tells the browser to load the page and it's CSS first and load the JS when it's available. So you don't have to wait for everything to be loaded up in order for the page to show up.

HTML

Be minimal with your HTML. Don't make something out of six div's if it could be made with just one. Think about your layouts and draw them out before starting. Simplify everything!

Flat design

I have a love/hate relationship with it. I love it because it promotes cleaner and more minimal sites that need less code to run. Imagine a site from 2005. Well all those pretty PNG images that show up as details on the site were HUGE! You can make a flat looking design with just CSS, so the difference is big. I love skeumorphism, don't get me wrong... But the web is a better place with it gone.

Google Page Speed Insights

Use it and abuse it. Try and shoot for a 95+ rating. It means your site performs like a dream and users will notice it! I noticed a big improvement with user engagement since relaunching my site recently and I believe a lot of it has to do with the speed of the thing. Fast sites provide a much better user experience. For example my page views per visit jumped from 4 to 9 with the relaunched site and the content/navigation was 100% identical.

Closing thoughts

There are a ton of other things that you can do to make your site faster. Just open the Page Speed Insights Documentation and there is a whole library of things to improve. I mentioned just a couple here but there is a lot more that you can do. So go out and do it, now. Because a slow site does nothing good for your product/service/blog/portfolio.

Oh, and if you were wondering how my site squares up here you go :)