How to Decrease Page Load Time and Improve Site PerformanceDerrik Engel UI Designer
#Design Advice, #Hosting Insights
In order to help you understand how to resolve the issues that may be causing website performance issues, we’ve compiled a list of tips for how to build your site for performance in a way that provides the best experience for your users.
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
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.
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.
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.
Have questions or comments about this post? We'd love to hear from you.
5 Tools for Improving Your Website Content
Diagram's Britney Na shares 5 tools for improving your website content to help you measure your website performance.
Improve Your Google Page Speed by Optimizing Your Images
PageSpeed Insights is popular among companies when gauging the performance of their site for users. Let's look at improving your score with image optimization.
Website Traffic Woes?
Google search algorithm updates can wreak havoc on your website’s traffic. Don't let your organic rankings tank. Our free SEO health check can help you identify issues that make Google unhappy with your site.
Like what you read?
Subscribe to our blog "Diagram Views" for the latest trends in web design, inbound marketing and mobile strategy.