On the web, speed is important. 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. In fact, 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 page 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 tool provides a good way to get a general idea of your site’s speed. You can simply enter your site’s URL, and it will give you an overall score and highlight any issues that you should consider fixing.
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 ensure good site 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 desktop version 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 view the mobile version of the site 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 browser will send a request to the 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 performance. If possible, the CSS or JavaScript requests should be concatenated, so that all of these requests are done at once rather than making a number of separate requests.
HTTP requests can also be reduced by eliminating objects that aren’t necessary, such as loading images that are used to create gradient effects or display certain fonts. Using CSS to create gradients and a webfont service for fonts will greatly reduce the number of requests made to the server, resulting in better performance and a better experience for the site’s users.
Minify JavaScript and CSS
In addition to reducing the number of server requests that your site’s CSS and JavaScript code makes, you should also try to reduce the size of the code itself. Luckily, there are a number of tools that can make this process automatic, including Gulp and Grunt. At Diagram, we use Gulp, and we integrate it with Visual Studio so that whenever we save a file, it will compile it into CSS and then automatically minify it. This ensures that when we upload files to the server, they are already minified and concatenated in order to ensure the best performance on the sites we create.
Optimize Images 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 really 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 performance 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 on any size screen.
These are just a few of the ways that web designers and developers can improve a site’s performance, but they’re a good way to get started ensuring that your site provides a good experience for every user, no matter what device or screen size they are using. If you have any tips of your own, please feel free to share them in the comments, and if you have any questions, don’t hesitate to contact us. Thanks for reading!
Photo from Unsplash
