By Chris David
There are many, many (and many more) things that can make your website slow to load. From servers to scripts, from DNS to databases, truly understanding all the factors having to do with site speed can overwhelm even the most experienced web designer.
But the speed of your website is more critical than ever.
With so many websites and apps, not to mention smartphones, notifications and popups, attention spans are shorter than ever. Competition for attention is tougher than ever. Most people won’t wait more than a few seconds for a website to load. And the time window is even shorter if the visitor uses their smartphone.
Website speed is now one of the factors that Google and other search engines use in ranking pages within search results. If your site is slow, you’re downranked. And when you do get traffic, and your site takes more than a second to respond, the visitor is going to click back. Or simply give up and close the window.
Boom. You just lost money.
Where to begin in optimizing your website? Let’s take a look at how to define a “fast” website and some of the trade-offs involved in getting there. Then we’ll dive into specifics on what you can do today.
What is fast?
These days, we measure website speed in milliseconds. Two hundred milliseconds can make the difference between a sale and someone clicking the close button. If your competitor’s website is slightly faster than yours… You’ll start losing customers and visitors.
According to Google, the average page load time in the United States is 3.5 seconds on personal computers. On smartphones? Average page load stretches to nine seconds. So to be considered “fast”, at the very least we need to do better than 3.5 seconds on PCs and nine seconds on mobile.
Note that the major search engines, Google and Bing, show results in less than a second.
Understand the trade-offs
You want to show off your products with huge, crisp, high quality images? Everyone does of course, but those high-res images mean larger files and longer download times. For the best user experience and the fastest page load, you must find the balance between quality and file size.
Same goes for website features. You want fancy popups and interactive features, but everything has a cost. Full-screen slideshows, videos and 360 demos? What do you really need for the website to accomplish your goals?
Go through everything on your site and separate the features from the fluff.
Website speed makes one of the main factors driving user engagement. A site with fancy animations, large images and too many scripts will frustrate visitors. So once you review and prioritize your site features and decide what’s necessary, you’ll be ready to start making optimizations.
Optimize your images
Images are the number one factor that increases your total page size and slows down the experience for visitors. The format, quality and size of your images makes a big difference. Some formats are compressed to take up less space, while others are “lossless” and uncompressed.
Before you upload your images to the server, save them in an optimized and compressed format. Use JPG at quality 50 or less, and for most images the difference will be hardly noticeable.
Also take time to review the resolution of images you upload. Larger images mean big file sizes. Generally, if you plan to display an image at full screen, the width doesn’t need to be greater than 1920 pixels (most monitors have equal or less than this resolution). For other images, like inline images for posts and product pages, you don’t need to go higher than 1024 pixels.
Minimize script and CSS files
Scripts and CSS stylesheets can have a lot of whitespace, which bloats the file size. Before you deploy your files to the server, you should run all scripts and stylesheets through a minimizer program. A file minimizer will remove all unnecessary characters and pack the text together, making the files as small as possible.
Most web development frameworks now include tools that will do this for you. Content management systems like WordPress can also run plugins that will automatically minimize your scripts and other files.
Minimize resource calls in document header
Loading too many resources in your document header will slow down your website! For example: stylesheets, fonts, scripts and icons. The web browser must load resources referenced in the document header before it can display any of your page content.
Any resources that you don’t need at the very start of page load… Move them to the bottom of your document, just before the closing html tag.
Optimize your database
Is your database bloated? This is a common problem that affects databases of all ages. For each page load, the server searches your database for the requested content. A bigger database equals longer search times and slower page loads for your site.
Giving exact advice here depends on what type of database system you’re using. In general, flush the garbage. Compress pages, and set up indexes for searches. Remove unused tables. Sweep out the drafts and orphaned content. Create a regular database maintenance plan to optimize your tables and clear transactions.
Pare down your plugins
Too many plugins running on your website make things tougher on your webserver. Essentially, more plugins processed equals slower page loads. So review all your plugins for performance and remove unnecessary plugins. Replace separate plugins with one that offers multiple functionality.
Check your caching
Static resources (images, scripts and stylesheets) should be served with proper caching headers. On your webserver set cache control and expiry headers, to make sure that a visitor only has to download static resources once.
Make sure site is loaded in memory
Many web hosting providers will unload your site from memory if the site has not received a request in several minutes. However, this means that the first visitor to your website will experience a long delay, as the server must load everything from scratch, including the database, environment, process and plugins.
Consider setting up a service or program to periodically ping your website. You can set such a service to load a page once in a while, just to make sure that your site stays in memory.
Review your hosting
Is your web host taking longer than 500 milliseconds to respond? If so, it’s time to review your hosting plan and perhaps look at a faster hosting company.
Discuss your DNS
The system that translates a visitor’s web browser request from yourdomain.com to the address for your webserver is called DNS (domain name system). If the requests are slow to resolve, then your site will appear slow to load. Check your DNS provider for speed and discuss changing if need be.
Also, if you are loading resources in your pages from many different domains, that means many more DNS requests for a visitor to process. Try to consolidate resources on as few servers as possible, and consider using a CDN (content delivery network) to ensure that resources resolve and load as fast as possible.
Speed is king
Speed is the number one factor in determining how many people engage with your website. If a page takes more than a few seconds to load, most visitors will lose patience. If you try some of these tips to speed up your website, let us know below.
Go here to learn more about our website development and optimization.