Internet connections keep getting faster and faster, allowing sites to load almost instantly. In spite of these higher speeds, there can be instances where a page takes nearly a minute *gasp!* to fully load. Page load time is still a crucial aspect of your website’s build. If your page loads slowly, you’re guaranteed to lose visitors from your site.
Imagine this scenario: after months of hard work, your communications team is ready to launch your organization’s new website. It’s well thought out, ticking off all of the boxes from good UX to being accessible to users with disabilities. You’re excited (and maybe a little bit nervous) to see your colleagues’ reactions throughout the organization. You get lots of positive feedback, and everyone compliments the new design and structure. The launch is a success!
For a couple of months, things seem to be going well. You track visitors to your site and the numbers are up. Sooner or later, however, the honeymoon period ends. You start to notice the numbers drop off. You return to your beautiful site with critical eyes and realize that it loads pretty slowly.
Startled as you may be, slow load times are not inevitable! Everything from the images on your site, to the way it was built have an impact on your website’s performance. Here’s how to address the issues that might be slowing down your site, and ultimately, drive traffic numbers back up.
5 Ways to Boost Site Performance: From Crisp Images to Stray Javascript
1. Set a Performance Budget for Your Site
When it comes to page load time, think of a user’s connection like a pipeline. Only so much data can flow through the pipe before it becomes clogged. A bigger pipeline, or better connection, allows more information to flow through and for a page to load faster and vice versa. This is how your performance budget should work. Like a financial budget, a performance budget is the baseline maximum amount that you set for a page’s total content size. It is the highest amount of information you are willing to let pass through any given pipeline.
Since load time varies widely depending on different pipeline sizes, you should try to optimize your site so that the data can fit through the smallest pipeline that users may be taking. These days, more and more users browse mainly using their phones, therefore we should optimize websites for a 1.6 Mbps connection, or Mobile 3G Fast connection.
Your site should take about 10 to 15 seconds to fully load. This performance budget tool helps you to calculate what your budget is for line items such as images, CSS, and Javascript. This will give you a max file size to work toward when making adjustments to your site.
2. Use the Right File Types for Your Images
Now that you’ve determined how much budget you have to work with, you can review the images that you are using. There are many ways that you can save an image: JPEG, PNG, SVG, GIF, but which do you use?
- PNG: Vector-focused, simple photos with less colors
- GIF: Text-heavy images
- JPEG: Anything with a lot of photos or colors
- SVG: Text (If not live-coded), logos, icons
- MP4: Screen recordings & video
- WEBP (optional): WebP is an image file format that is smaller than regular JPEG and PNG files and can help you save on your bandwidth budget, but are not compatible with some browsers. If you do use them, you’ll also have to ensure that JPEGs and PNG files are available for browsers that do not support WebP images.
3. Reconsider Redundant Images
Do you have lines, circles, or squares on your site that are loaded as SVG images? Samples of typography that are loaded as JPEGs? Laptop or tablet mockups to show how an app works? Background colors added as an SVG?
HTML, CSS, and Javascript can be used to create a log of these design elements. By eliminating the use of image files, you can reduce the amount of information that needs to flow through your pipeline in order for your page to fully load. As a result, you’ll significantly reduce load time. In turn, you can make your website feel more dynamic since coding these visual elements allows you to add animation to them.
To make this feel more real, check out this case study for our work with Unbounded. See the colored quote boxes throughout? We’re in the process of changing those elements from static images into live text boxes built with code.
4. Incorporate Flex & CSS Positioning
When using HTML and CSS to create elements of your website, Flex and CSS Positioning are powerful tools that allow you to create interesting layering and parallax effects without the need to load heavy images. Flex is a CSS property that defines how elements of different sizes stack and align. CSS Positioning is a set of CSS Properties that manipulates how elements on a page are positioned, relative to each other.
Let’s imagine you were designing a portfolio site. Without Flex and CSS Positioning, you might be forced to export a large full-width image to show a group of three overlapping objects. Flex and CSS Positioning allow you to improve load time. It does so by first breaking the larger image down into three smaller sized image files. Then, it uses the available CSS Positioning properties to place the images relative to each other and skew them to the left, right or any other direction.
5. Inspect Your Site for Faulty Code
It’s great that you have started utilizing more HTML, CSS, and Javascript to create your site. Things function smoothly and still look great, but under the hood, you have to make sure the machine is well-oiled. In the same way that images are loaded and take up some of your budget, we need to allot some of our performance budget to loading code.
Work together with your web developer to make sure there is no erroneous code floating around. For example, a lot of people build websites using a WordPress template builder. These templates allow you to create a site rather quickly but sometimes they create multiple CSS and JQuery files in the process. Some of these builders will also add miscellaneous white space in the code that increases file size. The good news is you can work with your developers to identify these files and minify them, or combine multiple files of code into one file. Minifying the files will reduce the file size, decreasing the chances of your pipeline getting clogged up.
There’s Nothing Stopping You Now!
Follow these steps and you will be able to keep the data flowing quickly through the pipeline. Images are both a blessing and a curse. By knowing how to set the images up and serve them to your users, you can create a rich experience that will bring visitors back to your site and keep them there.
