On the web, speed is important. It's important for user experience. If a site takes a long time to load, people will probably go elsewhere to find the information they are looking for or complete their tasks. It's also important for SEO. Google uses site performance as one of the ranking signals that determine how a site ranks in search results, and it has been demonstrated that website speed is an especially important factor in determining the rankings for mobile searches.
If you’re looking to discover whether your site has any performance issues, Google’s PageSpeed Insights and WebPageTest are two tools that provide detailed information about your web page speed and gives you performance optimization ideas. You can simply enter your page URL, and these tools will analyze your page to score key web performance factors and highlight any issues that you should consider fixing. It’s important to note that these tools are testing the page-load of the specific URL that you provide, it's not an entire website speed test, so remember to test pages of your website individually – it’s not just about the homepage!
In order to help you understand how to resolve the issues that may be causing performance issues, we’ve compiled this list of tips for how to build your site for performance in a way that provides the best experience for your users.
Plan for Mobile
We often talk about the importance of “mobile-first” design, which ensures that websites provide a good experience for users who are accessing them on smartphones or tablets. One of the ways that mobile-first design can help increase website performance is to make sure that the site does not load unnecessary resources that are specific to larger screen sizes. Since mobile devices often have slower connection speeds, eliminating these resources will improve performance for mobile users.
For instance, the widescreen view of a site may use a large background image, but you may not want to display this image on smaller screens. You’ll want to ensure that users who are viewing the site on a narrow screen, like a smartphone, will not be forced to download an image that is never displayed on their screen. By planning for mobile-first, you can avoid loading these types of resources and improve the experience for mobile users.
Reduce HTTP requests
When someone accesses your site, their web browser will send an HTTP request to the web server for all the resources it needs, including images, CSS, JavaScript, etc. Each request made to the server requires data to be transferred in both directions, so too many requests can lead to decreases in website performance. If possible, CSS files and JavaScript files should be combined, so that all these files are bundled into two requests – one for CSS and one for JavaScript, rather than multiple.
HTTP requests can also be reduced by eliminating requests that aren’t necessary, such as images to used create effects that can be achieved with CSS and unused webfont styles. You can get creative with CSS to display gradients, patterns, shadows, and many other design elements that once required an image. Using webfonts can quickly add to the page load time, so it’s important to consider the styles that you choose and question if it’s necessary to have multiple similar weights and styles. Reducing the number of HTTP requests for these unnecessary assets results in a faster load time and a better experience for the site’s users.
Additionally, the critical rendering path can be optimized by placing JavaScript near the end of an HTML document - right before the </body> tag. This allows the page to begin rendering content before scripts are called, which can block rendering.
Minify JavaScript and CSS
In addition to reducing the number of HTTP requests that your site’s CSS and JavaScript files make, you should also try to reduce the size of the code itself by minifying these files. Luckily, there are several tools that can automate this minification process, including Gulp and Grunt. At Diagram, we use Gulp, and we integrate it with Visual Studio so that whenever we save a file, it automatically compiles and minifies our CSS and JS assets. This ensures that when we upload files to the server, they are already minified and concatenated in order to increase performance on the sites we create.
Optimize Images, File Sizes and Use Vector Graphics
We’ve written before about compressing images to make sure the files that a site’s users need to download aren’t too large, but often, optimizing the images used on a site simply consists of using the right format. Many sites use JPEG (.jpg) files for all their images, but that format is best for photos. For illustrations and other types of images, .png files are more suitable, and .gif files should be used for animation.
Another way to improve load time is to use Scalable Vector Graphics (SVG) for graphical elements like icons, logos, and illustrations instead of raster images. These files can be used as sprites that are embedded in the site code, allowing individual icons or logos to be included on any page without making an additional request to the server. As an added benefit, vectors can scale to different sizes without the need to worry about pixel densities, resulting in images that look good at any resolution.
Measuring Results
First, you should validate your fixes by doing performance testing again to make sure your score has improved using Google's Pagespeed Insights. But, how do you know if your performance optimization efforts paid off? Comparing bounce rates in Google Analytics is one way. Of course, bounce rate is influenced by other factors other than website performance, but it can be a metric to look at for positive changes. Another way to measure results is to track how the search engines are valuing your pages, either through improved changes in rankings or lifts in organic traffic. Again, there are other factors that can influence how Google views your website, so use this as a pulse, rather than definitive proof.
These are just a few of the ways that web designers and web developers can improve a site’s performance, but they’re a good start to ensure that your site provides a good experience for every user, no matter what device or screen size they are using. If you'd like to chat more about website performance and how to improve your website speed, drop us a note in the comments below or get in touch.
