Website owners spend a lot of time optimizing their websites for conversions and sales. Sometimes a person focuses too much on one thing that they abandon everything else, including vital website elements like load speed. According to Nielsen Normal Group, an average user stays on a page only about 10 - 20 seconds, so there isn’t a lot of time to catch the user and retain them. If they spend half of that 10 seconds loading your page, their impression of your website will be off to a bad start from the start.
In this article, I’m going to show you a few different techniques for speeding up your website. If you are using a CMS system like WordPress or Joomla, I’ll also share some caching plugins that work wonders for your blogs and websites.
Icon Fonts
Icon fonts are a fairly new web design trend that involves using a font made up of icons. The reason this tactic is great is because fonts are vector and therefore are scalable to any size without a loss in quality. So we can essentially have icons that look good on mobile devices, computers, and even high-resolution retina or hi-DPI displays.
I wrote an article on how to use icon fonts, so if you are interested in employing this technique, it is worth a read.
Image Sprites
One major issue that causes a poor load time is requesting too many images to load. If a website uses 30 images, it is essentially 30 different calls to a server. Because of so many calls, you can’t utilize the full speed of your Internet access as you’re downloading a bunch of small files.
Image spites were pretty popular a couple of years ago, but its usage has slowly faded away as web designers try to use as few images as possible. If your website still uses a lot of images, I would recommend implementing image sprites. Image spites allow you to combine many individual images in one larger image, and then you would display only a part of the image you want with CSS. So if you were able to combine 30 of those images into one larger image, each user that visits your website would be making 29 fewer calls to the servers than they would otherwise.
CSS3 In Place of Images
The reason image sprites aren’t used as much anymore is because designers try to utilize the latest advancements in CSS to replace images. With new CSS3 properties such as text-shadow, box-shadow, gradients, and border-radius, designers can replicate most things that were done as images five years ago with just CSS. The only reason images are still absolutely needed is with photography as that’s a realistic raster image, which can’t vectorized. CSS Deck is a great resource to see and learn what’s possible to create with HTML5 and CSS3 without images.
CSS at the Top and JavaScript at the Bottom of the Page
Sometimes when a web page is loading, it hangs up because it’s waiting for JavaScript to load. Most JS scripts aren’t coded to load asynchronously, so they have the potential to delay the load of rest of your page. A smart strategy is to move all JS files to the bottom of the page, right before the closing </body> tag. This allows the entire page to load so that even if a JS file can’t be loaded, it doesn’t interfere with the user’s experience.
When it comes to CSS, the best technique is to try to have as few CSS files as possible and avoid inline styling. But make sure all CSS files are loaded at the top of the page so that they load before your content.
Use a CDN (Content Delivery Network)
A Content delivery network is basically a web host provider that has many server locations in various parts of the country (or world) and can send the files to your users from the closest and most appropriate location.
Big companies like Google and Yahoo have been using content delivery networks for a long time, but they are now starting to be used in the mainstream as well. CDNs are not free, so you do have to pay for it, but if you’re running a business that’s dependent on the website, it’s worth the money to ensure it’s reliable and speedy.
There are many CDN providers, but some of the most popular ones are Amazon Cloudfront, Cachefly, CloudFlare, and MaxCDN.
For WordPress Users
If your website runs on WordPress and you just don’t have the time or knowledge to implement the things mentioned above, there are some useful plugins to help you. The Cache Plugin automatically caches your pages so that they’re served to the user much faster. The only thing you have to do is install it and let it do its magic. There are many other caching plugins, so experiment and see which one works best for you and your website.
For Joomla Users
Likewise, for Joomla websites, there are many excellent extensions for speeding up your website. One I’ve found particularly useful is RocketTheme’s RokBooster extension. It automatically combines your JS and CSS files and encodes your images. You should instantly see the boost in your website’s load performance after installing this extension.
Conclusion
There you have it! Several different ways to make your website speedy so that your users aren’t frustrated and forced to leave your website before they even see your message or product. Always keep in mind that you want to make it seamless for your users to come to your website, view your products or services, and make purchases or contact you. Don’t make it difficult for them; otherwise, they’ll just give their business to your competitor.
