Lately I’ve noticed more and more problems with websites loading slowly. There are many different variables that affect the page load time, one is the use of CSS on a website. Particularly with SEO impact, pages that are taking a while to load are messing with how Google is rendering and indexing the site. The answer is not necessarily to have a basic site, actually sites that are more visually appealing have better conversion rates.
So the question is, how do you have a visually appealing website while not causing SEO issues?
CONTROL YOUR BYTES
The way we measure the weight of a website is in bytes. The easiest way to understand a byte is one byte is equal to one character, so each letter, space, and period is one byte. So what is a good target byte size a webpage should be?
First off, CSS is not usually the main culprit when it comes to taking up space on a website. However, to insure that it is not the issue follow these steps:
1. Do not “code bloat”
While learning about web development in college, my front-end teacher constantly taught me the term “code bloat”. Code bloat basically means there are excess amounts of code in stylesheets that are not being used.
For example, let’s say that you are trying to style a button on a website. Some of the normal attributes used are color, padding, border-radius, border, background-color, etc. As a website developer you add these styles in an external stylesheet and save. One week down the road the CEO says he does not like the button and tells you to update it to look more modern. The issue arises when the developer goes back into the stylesheet and instead of deleting the old styles, adds the new attributes at the bottom of the file. As long as there are not any !important tags, this method works exactly as planned and as a result of these actions you now have some code bloat.
Now your first impression might be, “how much of a difference does one block of CSS code really make in website page speed?” Well, I’m glad you asked, let’s look into some data.
*
As a general rule, most people would say that a webpage should be at 1MB or 1000KB. When a webpage has this many bytes it is usually able to load in under two seconds. Two seconds is an unwritten industry standard for page speed. Google shoots for one second or less, as you can see each time you search something on the google page.
To give an example, the other day I was working on a client site that had a ten second page load time. When I downloaded their CSS files and opened them in a code editor, one stylesheet had a crazy 5000 lines of CSS. When I ran the CSS file in a byte counter, it had 275KB of data. First of all, I’ve been building websites for about 4 years now, and I can strongly say you do not need that many lines of code to style a website. To make matters worse, this was one of 4 large CSS sheets that were downloaded each time the page was loaded. That means this client reached the 1MB page size JUST WITH THEIR FOUR STYLESHEETS. This is not including the DOM and other files that were requesting to be downloaded. As I went through their styles I could see that code bloat was a major issue.
2. Manage your CSS files
There are a couple of things that you can do to your CSS file that will decrease the amount of bytes used. First, you can minify your files, which basically means you get rid of all the spaces. Browsers do not need to clearly read through your code in order to display them. Getting rid of the spaces will save you a lot of byte spaces.
*
The second thing is a little bit more complicated, this is something you will see done on larger company’s websites. Separate and organize CSS files per module. To explain, do not just have one large style.css file for your whole site. Have your style.css file be the one for your website theme that goes across all pages. Then as needed, separate CSS that is unique to certain pages be their own CSS files. This can include the use of forms, an application, or other functionality not use on every page. Once your files are broken up, distribute them in the of pages that need them. If you are running PHP you need to set up different PHP files in order to accomplish this. This option takes strategy and time, which is why only larger companies can afford this ability.
The last tip is to not use @import. This is more complex and is not used as often as the better speed option, linking. @import has shown time and time again that when it comes to page speed, it takes much longer than just linking out to the stylesheet.
CONCLUSION
I challenge you to go to Yslow or Pingdom and analyze your website. These websites will tell you how many stylesheets are requested and how long they are taking. This will give you the best start in optimizing your CSS files.
Also, try to get your website page speed down as much as possible. Walmart reported that they had a 2% increase in conversions for every one second of improvement. To put this in perspective, a site that earns $100K per day could gain $730,000 per second per year. Try to shoot for a more realistic goal of a 2MB website that loads in about two seconds. This will give your website the edge over the competition. More tips to come soon!
Much success,
*These metrics are taken from HTTP Archive on 2/5/16
Looking for more great reads? Check out these related articles:
- How to Use UX to Make Your Website Ultra-Intuitive
- What Kind of Innovative Cloud Technology Do You Need?
- 6 Easy Ways to Boost SEO and Website Presence
- 5 Ways Your Site is Craving an Immediate Mobile Makeover
- 5 Ways SEO Should Impact Your Website Design
- If You Can’t Beat ‘em, Join ‘em: Creating High Performing Pages
