Developing a great website requires a lot of work. Besides the development process itself, there are a lot of things to consider. Think about SEO, content, optimizing every single page with a clear call-to-action, and so on.
We’ve built dozens of websites ourselves. Usersnap actually evolved from our work in building websites & web applications for clients.
The website performance, or more specifically the loading times of your website or web app are essential in order to provide a great user experience. Let’s take a look at some things you can do to make your website faster.
Evaluate your current status quo
Before getting started with optimizing your website speed, I’d recommend taking a look at the status quo. Working in web development, you have probably a great internet connection. Never forget that your users don’t have that.
There are great tools available for checking your website speed and evaluating your current status (see the end of the post).
Optimize your images
This is a big one. Images on your website add to the size of the page. The reason is simple enough, larger images take much more time to load. We all know it and yet, it is often overlooked. If you’re looking for information on a website, the worst that can happen is that you have to wait for an image to load. But there are things you can do. Some image optimization efforts might do the trick:
- Format selection – When the quality of the image is your top concern, JPEGs are your solution. PNG images, on the other hand, work best for logos, signs, icons, illustrations and text. Then you have GIFs. Once the backbone of website “design”, this format is now best used only for simple and small images. And last, but not least, it’s best to avoid TIFF or BMP formats.
- Compression – Image compression should never affect the quality of an image. You have to strike a balance between the quality of an image and the size. Using the JPEG format, a compression of up to 70 percent usually yields pretty good results.
- Numbers of images – Unless you’re in a very visual business, using too many images isn’t always a good idea. Try and make sure you really need that last image to be included.
Optimize your CSS
- Use shorthand coding whenever possible – Using shorthand writing where possible allows you to use fewer declarations and operators and drastically cut the size of code. Use fewer lines of code, get faster load times.
- Get rid of that browser specific CSS code – Correctional declarations or browser specific hacks add bulk to your CSS files. Use speed optimized CSS code as it is simple and light and so servers can process efficiently
An important aspect of website speed optimization is decreasing the number of client-server requests for displaying website content.
In addition to this, simply deleting extra spaces, lines, and indentation while maintaining the readability of the code keeps your code lean and mean.
Tools for monitoring & optimizing your website speed
The Pingdom Website Speed Test is a great and free tool for testing your website speed and getting a first glimpse on how your website performs.
Google Webmaster Tools & PageSpeed Insights
The webmaster tools from google are another – yet great – resource for checking your website performance. The webmaster tools from Google will provide you with notifications and messages regarding the mobile usability of your website and if there are any crawling errors.
I definitely recommend checking out the mobile usability since it will definitely affect your search engine ranking and the mobile user experience of your site if there are any errors detected.
Besides the Webmaster Tools, Google also offers a great tool for testing your website speed. With PageSpeed Insights you can test the website speed of any URL. Google exactly tells you what you should fix and what you should consider fixing on your site in order to boost your speed.
I definitely recommend checking out the W3C validator who provides you with straightforward fixes to make. Simply run a W3C test for your website and see which errors appear on your site. The W3C validator tool exactly tells you the specific line of code where the error appears.
Similar to Woorank, nibbler not only checks your website speed but takes an overall look on how your website is perceived by crawlers and users.
The free tool from Nibbler takes a look at more than 20 parameters – such as code quality, internal links, page titles, headings and so on – and provides an overall score (between 0 and 10) for your website. Make sure to check your optimization progress regularly with Nibbler.
Chrome Developer Tools
Google Chrome offers a pre-set of devices where you can play around with screen sizes and network speed. I recommend testing your website in different network speed settings in order to get a glimpse on your true website speed (I promise you, you’ll be surprised how slow your website gets when using EDGE or a regular 3G connection 😉 )
W3 Total Cache
Tools like the Plugin W3 Total Cache for WordPress help you setting up your caching strategy for your website. If you’re not using WordPress make sure to check out other tools or projects (e.g. varnish cache project).
I also recommend to check out his post from Tenni Theurer on caching (the post is from 2007, but still a great resource on the basics of caching).
SpeedCurve allows you to monitor your website performance. Besides that, you can also monitor your competitor’s performance.
Automated and manual browser testing tools
Are you done with all your optimization? Well, definitely make sure to test your website in different browsers. You can automatically test your website with different automatization tools, or you can test your website manually. Not sure which one to choose? Make sure to check out this blog post on how to get started with browser testing.
Wrapping it up
Images (and the right compression and file format), stylesheet and other code snippets are truly important factors when dealing with poor loading times. By making use of these free tools you can do your homework and check on loading times and performances of your website.
PS: Also make sure to check out our latest post on the most annoying issues that will kill your website performance.
8 reasons why you need SEO skills in your SaaS business
As a founder of a SaaS startup, you probably think a lot about how to spread the word about your newly founded company and how to generate first leads and sales. In this article, I’m presenting you 8 reasons why you’ll definitely need someone in your team who’s bringing your SEO efforts at the next…
How to Get Started With Browser Testing In Less Than 2 Hours
Making web applications is fun. Well, it should be fun, but it’s often not. It’s not, because there’s so many browsers, operating systems, and devices to cater to. And who has the resources to cater to every device configuration and operating system setup which the average user is likely to have? Can anyone truly cover…
How to set up a bug-free development environment
(or: How we work at Usersnap) We – as a company providing a visual bug tracking tool which makes life for developers and everyone involved in web projects a lot easier – put a lot of thoughts into the field of bug-free development environments. In this post I’m going to show you how we have…
Integrate your chat tool with your project management software [productivity tips for web developers]
This article was brought to you by Usersnap – a visual bug tracking and user feedback solution for every web project. Recently we’ve presented our favorite chat tools and the basics of project communication. This time we’d like to take the next step and show you how to get more out of your team communication.…
Streamline your client approval process
Let clients draw directly in the browser.
Fix bugs in minutes with screenshot & metadata.
Trusted by 1000+ customers worldwide.