When considering modern web design, you want your site to not only look good but perform well too. By that, I mean a site should load in a decent amount of time, offer a pleasant user experience and have as few bugs and errors as possible.
One of the most important elements of a well-performing site are the page loading times. Speed can really suffer when you spend more time worrying about the aesthetics of a site by trying to add slick functionality, animations or content. Some administrators even overlook slow loading times because they care more about the way their site looks than how using it feels.
In truth, page loading times should always be one of the first things you work to improve. Speed now factors heavily into search engine rankings, but consumers want to see speedier sites too. According to an infographic from Kissmetrics, 40 percent of people say that they leave a website any time it takes more than three seconds to load.
Furthermore, an additional one-second delay in page loading time can lower your conversion rate by seven percent. If this happens on an e-commerce site that brings in $100,000 per day, that page delay translates to a loss of $2.5 million in sales each year.
Page loading times matter — there’s no question about that.
What can you do to ensure that your site is streamlined and doesn’t run into these performance issues? It depends on what kind of content you have on your site, how well it has been put together and how many plugins or add-ons you have loading at one time.
We’re going to take a look at five general ways you can improve site loading times. Keep in mind that these tips may not apply to every site, but they offer a good place to start with improvements.
1. To Speed up Loading Times, Use a Content Delivery Network or CDN
A Content Delivery Network or CDN is not the same thing as a Content Management System (CMS). They can actually work in tandem to deliver a fully optimized site.
A CMS is a platform that can be used to create, schedule and publish content. It includes services like Magento, Joomla, Drupal, WordPress and more. It can also include a custom-made CMS designed with PHP or HTML.
A CDN, on the other hand, is a server-based system spaced throughout various data centers across the internet. It can essentially be used to store files and data from a website — like your web server — and deliver these files to visitors. It works better than a traditional server system because it takes into account a person’s geographical location. It delivers content and data from a local server, so the site is rendered much faster. When used in combination with a CMS, the system drastically improves page loading times for a site.
The other benefit of using a CDN is that it alleviates some of the load on your actual server. This doesn’t necessarily make a difference if you’re using a third-party hosting provider, but if you’re running the site from your own servers it can give the hardware a break.
The most popular CDN services include CloudFlare and MaxCDN. CloudFlare also offers DNS provider services.
2. Enable the Apache “KeepAlive” Feature
Apache is a server platform that is one of the most commonly used by most providers. More specifically, it’s deployed for a lot of shared hosting setups and can be run for a relatively low-cost. It also happens to have a feature that can increase HTTP request limits for visitors.
The feature is called “KeepAlive,” and it allows multiple HTTP requests for a single connection, a process that allows a website to load much faster for visitors because it relies heavily on HTML.
You’ll need to check with your host provider first to see whether or not they have the feature active. If they do not, you’ll also need to make sure you have access to the httpd.conf file in your Apache setup. The location of this file will differ depending on what kind of server system is running (Windows or Linux).
If you do have access, open the file and check whether or not “KeepAlive On” is located somewhere within. If it is not, don’t worry: You can activate it using your .htaccess file. Include the following piece of code in your htaccess to turn the feature on:
<ifModule mod_headers.c>
Header set Connection keep-alive
</ifModule>
The KeepAlive feature is great for improving performance on all sites, but works miracles if your site is running WordPress or a similar CMS.
If you cannot use this feature for whatever reason — perhaps your server is not running Apache — then consider minimizing the amount of HTTP requests your site calls for. This is also a good general maintenance task, as it can speed up load times.
There are several ways to minimize HTTP requests: combine CSS files, merge Javascript files or combine images into data sprites. Ultimately, you’re reducing the number of files that need to load. Yoast has a great guide on this if you’re running WordPress, but the guide can be used as a general reference for all sites.
3. Optimize Your Images
This next bit of advice shouldn’t come as a shock to anyone who has worked with websites or web development. The bigger your images are and the higher their quality, the longer they’re going to take to load. It doesn’t matter if you resize them using HTML or shortcode, because they still have to load in full.
Use a photo editing tool like Photoshop, GIMP or even something simple like Microsoft Office Picture Manager to resize them. Try to not to keep images on your server that are bigger than what you need. For example, there’s no reason to keep a raw image file in excess of 5000 pixels if all you’re doing is displaying it within your content. Three online tools that work great for resizing include Optimizilla, Kraken and Free Image Optimizer. They work by compressing an image in size, essentially making them smaller so a site can render them faster.
If you’ve already resized your images and just need to cut filesize, you can try running them through JPEGmini or TinyPNG. These tools cut out colors and meta data to shrink the space an image takes up without making its dimensions smaller.
Ultimately, you’re looking to trim down the overall size of the image itself and the storage size. Anything 2MB and above is pushing the limits, especially when you have a ton of images that your site needs to load.
4. Enable Caching for CMS
If you host a WordPress powered site — or a similar CMS — then by all means, look into a cache plugin or add-on. Caching works pretty much as you’d expect: The plugin builds a cache file of your entire site server-side and then delivers it to a client for faster loading times.
This is the same process your web browser uses to cache sites you visit. Your browser downloads images, CSS and Javascript files the first time you load up a site, and for each subsequent visit it simply loads those cached files so that the site may render faster.
When caching is enabled for a CMS, it builds a cache file of your entire site — or select pages — and every time a new visitor arrives it sends them the cached content. This is so that the site doesn’t have to be generated in full every time someone new lands there. Any time you make changes to the site, you’ll need to refresh your cache, but this is usually handled automatically by the plugin.
If you’re using WordPress, recommended plugins include W3 Total Cache, WP Super Cache or WP Fastest Cache. These are by no means the only ones out there. Have a look at the WordPress plugin repository and you’ll see at least a dozen more.
You can also define a browser caching policy for all server requests to your site. Google recommends keeping a cache time of at least one week for your site assets that aren’t changed often. This can include CSS, images and javascript files.
You can ensure this happens by including a cache command snippet in your .htaccess file.
<ifmodule mod_expires.c> ExpiresActive On ExpiresByType text/html “access plus 7200 seconds” ExpiresByType image/gif “access plus 864000 seconds” ExpiresByType image/jpg “access plus 864000 seconds” ExpiresByType image/png “access plus 864000 seconds” ExpiresByType text/css “access plus 864000 seconds” ExpiresByType text/javascript “access plus 864000 seconds” ExpiresByType application/javascript “access plus 864000 seconds” </ifmodule>
Other Ways to Speed up Your Site
This list is merely a handful of techniques you can use to boost loading times on your site. There are hundreds — if not thousands — of other things, large and small, that you can do to both improve performance and make your site look more professional.
You can do a simple web search to find more information. If you run a WordPress powered site, a ridiculous amount of guides and resources out there can help you boost performance, like Gregory Ciotti’s.
One thing to make a habit: checking whether or not your site meets Google’s webmaster guidelines. Sites that don’t follow the guidelines will often experience performance issues. You can check up on this using Varvy’s tool.
With a little invested time, you can have your site running in tip-top shape. Eventually, this should translate to lower bounce rates and more visitors!
Yo, Font-Addict! Make sure to check out The Big Book of Font Combinations. Go grab a copy from Amazon or B&N, or grab the DISCOUNTED ebook PDF digital download version (40% OFF the hardcover retail price!) from the BonFX Store, and stare at all 350+ examples of informative font combinations for web and print. You know you want to!
An Inspiring Collection of Fonts
