Having an exciting, interactive website is important to stand out in today’s crowded internet market. However, far too often there are simple mistakes that result in slow page load times and a frustrating user experience; especially when you start adding on all the bells and whistles to your website. Not only will fixing these issues likely improve your bounce rates, it will also help with your SEO strategy. Ideally you will want to have a page load time of around 2 seconds or less, so if you notice your page is taking longer than that, you may be running into one of these 5 issues!
Unfortunately, some developers and companies (even large ones) just don’t care about following web development best practices, and decide that throwing massive amounts of hardware at their website will solve their problems. This may be a fix, even a potentially long-term one, but often this causes problems later on since the underlying issues are not addressed. Keep in mind that this is a list of common issues that occur, and if you are experiencing slow page loads it could be a number of other causes.
JavaScript Issues
The popularity of javascript/jQuery plugins has given easy access to a wide variety of dynamic features to websites. Third party javascript APIs have also become common, such as social media buttons and access to Google’s developer APIs (such as Google Maps).
When implemented incorrectly, these scripts can seriously impact page load time. There are many things that can go wrong, but here are some of the top ones:
- Loading multiple versions of jQuery – often content management systems have 3rd party applications that will have an option of loading jQuery. This can be problematic if you enable that feature on multiple applications. Additionally, some developers may be lazy and do a test upgrade of jQuery and realize it breaks some of their scripts, so as a workaround they implement a second or even third version on the site.
- 3rd Party APIs out of control – sometimes you may have an older, unsupported API implemented, or the API simply no longer exists. Often this can lead to browsers spending time waiting for a response before realizing that there is none. Loading too many APIs on your website can also cause a slower load time; remember, these APIs have to wait for requests from other services, so you lose some control of response time. There are also many poorly written APIs out there, so it’s best to only use ones from reputed companies (although there are no guarantees there either).
- Poorly written javascript – if used improperly, javascript can cripple your website page load time. Unfortunately, you won’t always see errors on the page, but you could always start with checking your browser’s console and look for error logs.
- Not following Best Practices – Some of the best practices of javascript won’t really effect page load time that much, but they still should be followed anyways. Probably the most important ones are deferring your javascript so it loads last, combining your javascript into one file, and avoiding inline javascript as much as possible.
Image Handling
I see this all the time – websites that have every file saved as a .PNG, images that are uncompressed, or images that are uploaded at larger sizes then scaled down to fit the page.
Here’s a summary of how image formats work:
- JPEG (.JPG or .JPEG): best used for more complex images with lots of colors, such as digital photography, stock images, etc.
- PNG (.PNG): best used for complex images with lots of colors that have a transparent background.
- GIF (.GIF): best used for animated images or small icons that aren’t very complex. These images may also have a transparent background.
- SVG (.SVG): this image format is becoming more common, and is suited for scalable vector graphics. These are usually used for icons that look good at any resolution.
Choosing the wrong formats or having larger than necessary images can delay page load times quite a bit. There are a few easy ways to fix these issues.
If you have a bunch of images saved in the wrong format, you can take the whole folder and run it through Adobe Photoshop’s automated image processor script (file > scripts > image processor).
The most common image type is JPEG, and often I need to compress images from an entire website. In this case, I use JPEGmini, which only costs $20 and is well worth the cash. You can download a server’s entire image folder, drop it into JPEGmini, and watch it compress all your images! It does an excellent job of compressing your images while still maintaining quality – even better than Photoshop’s save for web feature.
Excessive HTTP Requests
Having too many javascript, CSS, and image files can lead to too many HTTP requests; when a browser hits your website, it performs a separate request for each of these files. By combining these files into large ones, this reduces the number of requests made, significantly reducing page load times.
Content management systems have some excellent solutions for this, which will combine, compress, and minify your CSS and javascript files. Most of the time there will be a script file that won’t cooperate with this optimization process, so there’s usually some debugging required.
As for having too many images, icons that are used can be bundled into a larger sprite image, and be set individually with background position in CSS. There’s also CSS toolkits like Font Awesome, which have a huge collection of icons that are vector based. If you’re using a content management system with a template, you may already have a CSS toolkit implemented.
Not Using Server Optimization – Handlers, Caching and Gzipping
There are a wide variety of free options available for server-side caching, both on your web server and applications that run on your web server. Since I specialize in development on LAMP environments (Linux, Apache, MySQL, and PHP), I’ll be covering optimizations on those platforms.
To fully control your website’s server-side caching, you’ll likely need a virtual private server (VPS), or a dedicated server. Most shared hosts will already have a somewhat adequate Apache configuration and PHP handler setup, but you’ll get massive page load improvements from being able to control the configurations. Every environment is different, so it’s hard to determine which caching solution is best for you. Some of the ones I would recommend are Memcached, Alternative PHP Cache (APC), and XCache.
Another change that will reduce the overall size of content sent to browsers is enabling Apache compression, which is especially simple for cPanel users. Simply go to the Software/Services tab, and click on the Optimize Website icon. Set it to compress your content, and update – that’s it! Content management system users also have the option of enabling gzipping, which pretty much does the same thing.
This isn’t exactly server side, but leveraging browser caching is an important step to improve page load times for return visitors. This can be a simple change by adding ETag and Cache-Control information into your htaccess file.
Using Shared Web Hosting
Shared hosting is immensely popular with small businesses because of the low cost associated. They may be adequate for websites that aren’t too dynamic, and don’t have too much incoming traffic. The reason shared hosting often performs poorly is because you never know how many websites are being shared on the same server – and it’s very likely that server resources are stretched very thin. There are plenty of tools available to test your server response time (one of the key indicators for server performance), such as Google Page Insights or Pingdom Tools. Most shared hosts will respond in around 1-2 seconds or more, depending on configuration and how much traffic the website gets. Unfortunately, this is in addition to the time it takes to make all the requests and download all the files.
From my experience, a properly configured website will usually average 3-6 second page loads on a shared host. I’ve used Godaddy, HostGator, and WebHostingPad for shared hosting in the past, and have had mixed experiences. Godaddy has excellent support, but their shared hosting accounts don’t perform well with 3,000+ hits/month. HostGator is by far the worst, I’ve used them for shared and VPS servers; they have horrible support, and website performance is average. WebHostingPad I recommend to customers to just want really cheap hosting – and that’s exactly what it is. At $1.99 a month, they are very cheap and actually have pretty good customer service. Performance is slightly lower than others, but not bad for the low cost.
If you’re running a resource intensive website (such as e-commerce or user registration and interactivity) or have heavy traffic, you’re likely going to want to purchase either a virtual private server (VPS) or dedicated hosting plan. By doing so, you have many more resources available to your website, as well as more control for server-side optimization. Of course, these solutions will cost you more, but if your sales could decline from a poor user experience, then it is well worth the investment. Unfortunately, all of the cheaper VPS or dedicated hosting solutions are usually unmanaged, so if you’re looking for support then you’re out of luck. If you don’t know much about server administration, I highly recommend getting a managed hosting service. VPS hosting is usually a good choice for small businesses. They can be very powerful, but still be cost effective if you shop around enough. I’ve used Linode and Atlantic.Net for unmanaged VPS hosting, and found them both to be good choices (although Atlantic.net has better pricing).
A decent VPS or Dedicated website will usually respond rather quickly. Ideally, you want to come in at about .2 seconds (200 milliseconds), which is about what you can expect to get from these options. Additionally, you can setup multiple websites on these servers, so if you are already paying for multiple shared hosting accounts it may be a good idea to consolidate them onto one VPS host.
