[et_pb_section fb_built=”1″ _builder_version=”4.11.3″ _module_preset=”default”][et_pb_row _builder_version=”4.11.3″ _module_preset=”default”][et_pb_column _builder_version=”4.11.3″ _module_preset=”default” type=”4_4″][et_pb_text _builder_version=”4.11.3″ _module_preset=”default” text_text_color=”#000000″ text_font_size=”15px” hover_enabled=”0″ sticky_enabled=”0″]
One of the most important things you may not think about regarding your website design is how long it takes to load. As faster internet becomes the norm in today’s age, patience on waiting for websites to load has become a thing of the past. If a page takes longer then a few seconds to load for many, they simply close out. It’s not worth the hassle of waiting.
Another reason it’s important to have fast loading pages these days is that recently Google once again updated their algorithm. The newest updated, named the Panda update, now checks website load times whenever deciding your rankings in Google. So for your website to have good rankings in search engines, fast load times are a must!
There are a few simple things you can do on your website to help increase load times. Most of it is pretty simple, although it can get more technical based on how much you want to do.
[/et_pb_text][et_pb_text _builder_version=”4.11.3″ _module_preset=”default” header_font=”Montserrat||||||||” header_font_size=”31px” header_text_color=”#58008e” text_text_color=”#000000″ text_font_size=”15px” hover_enabled=”0″ sticky_enabled=”0″]
Tools Needed
First off, you’ll need to download a couple of tools to help you out with this process. The tools we recommend for this process are the YSlow and Page Speed plugins for the Firebug add-on for Firefox. You can download these from the links below.
Firebug – http://addons.mozilla.org/en-US/firefox/addon/firebug/
YSlow – http://addons.mozilla.org/en-US/firefox/addon/YSlow/
Page Speed – http://code.google.com/speed/page-speed/download.html
Once you download and install these add-ons, we’re ready to start.
[/et_pb_text][et_pb_text _builder_version=”4.11.3″ _module_preset=”default” header_font=”Montserrat||||||||” header_font_size=”31px” header_text_color=”#58008e” text_text_color=”#000000″ text_font_size=”15px” hover_enabled=”0″ sticky_enabled=”0″]
Increase Your Website Speed
Open up Firefox and navigate to the website you would like to optimize loading times on. Click on the Firebug icon in your add-on bar, which will open up the Firebug console. Then click on the Page Speed tab and then the Analyze Performance tab. Wait a few seconds, and it will give your website a grade out of 100. You want your website to be as close to 100 as possible. Hopefully, you already have decent to good load times, and your score will be around 70 or 80.
[/et_pb_text][et_pb_text _builder_version=”4.11.3″ _module_preset=”default” header_font=”Montserrat||||||||” header_font_size=”31px” header_text_color=”#58008e” text_text_color=”#000000″ text_font_size=”15px” hover_enabled=”0″ sticky_enabled=”0″]
Page Speed Firefox Addon
Page Speed shows you which items need to be optimized the most.
[/et_pb_text][et_pb_text _builder_version=”4.11.3″ _module_preset=”default” header_font=”Montserrat||||||||” header_font_size=”31px” header_text_color=”#58008e” text_text_color=”#000000″ text_font_size=”15px” hover_enabled=”0″ sticky_enabled=”0″]
After running the test, Page Speed then breaks down the ways you can improve loading times by importance for the page you are optimizing. Green items are good, yellow items could be improved, and red items need definite improvement.
To use YSlow, it’s basically the same exact process. Navigate to the page you want to optimize and click the YSlow button to open it. Click the Run Test button and YSlow starts running through its list of things to check, which is almost identical to Page Speed’s list. Once again, the items are color-coded by how important loading times they are.
So now that you know how to use these add-ons to see what needs to be improved upon, let’s go more in-depth on the optimization process. Here are the simplest things you can do to improve the speed of your website.
[/et_pb_text][et_pb_text _builder_version=”4.11.3″ _module_preset=”default” header_font=”Montserrat||||||||” header_font_size=”31px” header_text_color=”#58008e” text_text_color=”#000000″ text_font_size=”15px” hover_enabled=”0″ sticky_enabled=”0″]
Minimize Your CSS Code
CSS (Cascading Style Sheets) is what makes your website pretty. It’s the coding that defines which fonts you use, what colors they are, and how your background images appear. Without the CSS, your website would be very bland and boring. Any website with more then 5 pages will probably have a couple hundred lines of CSS code, if not into the thousands. Each space, comma, semi-colon and line break in those lines of code add file size to your site, and little by little increases load times. Good CSS styling is important to use while coding CSS so you can read the code easier, however when it loads in the browser, the users of your site will never see the code so copy uploaded to your server doesn’t have to look pretty.
[/et_pb_text][et_pb_text _builder_version=”4.11.3″ _module_preset=”default” header_font=”Montserrat||||||||” header_font_size=”31px” header_text_color=”#58008e” text_text_color=”#000000″ text_font_size=”15px” hover_enabled=”0″ sticky_enabled=”0″]
Uncompressed CSS Code
CSS code is usually styled like this, but increases page load times.
In order to minimize the CSS code, you want to keep a copy of the original formatted code that is easy to read. This will be your copy so you or your developers can easily edit it. Then you’ll want to make a compressed version, which takes out line breaks and spacing. The compressed version is ugly and hard to read, but it will help load your pages fast.
[/et_pb_text][et_pb_text _builder_version=”4.11.3″ _module_preset=”default” header_font=”Montserrat||||||||” header_font_size=”31px” header_text_color=”#58008e” text_text_color=”#000000″ text_font_size=”15px” hover_enabled=”0″ sticky_enabled=”0″]
Compressed CSS Code
Compress CSS code isn’t as pretty as non-compressed code, but it will save page loading times.
Page Speed has a built in CSS compressor, but we recommend using www.csscompressor.com.
[/et_pb_text][et_pb_text _builder_version=”4.11.3″ _module_preset=”default” header_font=”Montserrat||||||||” header_font_size=”31px” header_text_color=”#58008e” text_text_color=”#000000″ text_font_size=”15px” hover_enabled=”0″ sticky_enabled=”0″]
Minimize JavaScript Code
The way JavaScript is written, it’s similar to CSS because of all the spaces and line break in it. You can also minimize the JavaScript code on your site the same way you did the CSS code. Page Speed also comes with a built in JavaScript compressor.
[/et_pb_text][et_pb_text _builder_version=”4.11.3″ _module_preset=”default” header_font=”Montserrat||||||||” header_font_size=”31px” header_text_color=”#58008e” text_text_color=”#000000″ text_font_size=”15px” hover_enabled=”0″ sticky_enabled=”0″]
Minimize File Requests
For every file request your website makes to the server, it slows the loading time of your site. Next time you develop (or you order website development services), think of ways you can replace images with CSS. For every image requested, it takes longer to the load the page. You can use CSS for a ton of things images normally do, such as gradients, rollovers, buttons, rounded corners, and more.
Each request your code makes for a CSS file or JavaScript file also increases load times. Instead of having 7 different .js files for each JavaScript script you have, put them all into 1 larger JavaScript code file. Instead of 7 requests to your server, you now only have 1. This works the same with external CSS files also.
[/et_pb_text][et_pb_text _builder_version=”4.11.3″ _module_preset=”default” header_font=”Montserrat||||||||” header_font_size=”31px” header_text_color=”#58008e” text_text_color=”#000000″ text_font_size=”15px” hover_enabled=”0″ sticky_enabled=”0″]
Optimize Images
Some images can be pretty large depending on the file type and content of the image. All these requests add up over time on your bandwidth, especially for the layout images. Optimizing these images can add up and save a ton of bandwidth and largely decrease your load times.
You can use Photoshop of Fireworks to see the size of the file before you save it. If the file is too large, change the file type to another that isn’t as large but still looks good. Smaller images can usually use a .png file type, but for larger ones you’ll probably want to use a .jpg.
[/et_pb_text][et_pb_text _builder_version=”4.11.3″ _module_preset=”default” header_font=”Montserrat||||||||” header_font_size=”31px” header_text_color=”#58008e” text_text_color=”#000000″ text_font_size=”15px” hover_enabled=”0″ sticky_enabled=”0″]
WordPress Caching
If you use WordPress as a content management system (CMS), enable a caching plugin. Installing the plugin shouldn’t take more than five minutes, and it can greatly improve loading times for your site, especially on peak days and traffic spikes.
We use and recommend WP Super Cache, which is an extremely easy to use plugin. Just navigation to the Plugins page, search for it, install and active. After that, simply switch it from off to on and you will begin to see how much faster pages start loading.
WP Super Cache WordPress Plugin
WP Super Cache will help your WordPress blog load much faster.
[/et_pb_text][et_pb_text _builder_version=”4.11.3″ _module_preset=”default” header_font=”Montserrat||||||||” header_font_size=”31px” header_text_color=”#58008e” text_text_color=”#000000″ text_font_size=”15px” hover_enabled=”0″ sticky_enabled=”0″]
In Conclusion
We hope this guide has helped you improve your website’s loading times. We’ve used many of these tips on our own sites and client sites to great success. Also, just so you know, this isn’t a complete guide to optimizing your loading times. There are many other different ways you can improve your load times, so we encourage you to look around for other ways if you need to.
Another note, just so you know, YSlow is very similar to Page Speed. Each offers a little more insight into certain things than the other will.
We would like to know if this guide had worked to help you and your loading times. Did you do anything differently than we mentioned on here? Leave us a comment and tell us your methods.
[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]