How can you make your Website Fantastically Fast? - Website Speed Optimization
There may be a ton of things that you want to work on to increase your google ranking, but in the top three should be the speed of your website. With the rise of mobile device usage, speed has become a pretty huge factor when Google decides what websites are worthy of gracing a particular keyword search. In fact, when Google takes the time to build a whole tool to allow you to test the speed of your website and give you recommendations on what you can change to speed it up... you better believe it is taking speed hugely into account when making that search choice... every... single... time.
So if your website is in a race with all of your competition's websites for top ranking and speed is a huge factor, then what can you do to get ready for the race? Does a runner sign up for a race and not train, buy the right sneakers, and lose some weight? Heck no! So do not be caught walking into the google race in flipflops, a beer belly, and no strategy for winning the race. Read on to learn more about winning this race and turning that gold medal into paying clients.
Did you know that 57% of people will leave a page if it takes more than 3 seconds to load? The average website in 2017 takes over 7 seconds to load, so don't assume you are under 3 seconds. Slower webpages give fewer page views, less customer satisfaction, and more importantly less conversions - that is dollars in your pocket. So knowing your user experience will suffer from a slow website, and your google ranking will drop from a slow website - are you on board yet with speeding up the ole web page yet?
How slow is too slow for my website?
In general you want your website to load in under 2 seconds. However you can use this as a guideline:
- Ideal Speed - Under 1 second
- Good Speed - 1-3 seconds
- Undesirable Speed - 3-7 seconds
- Terrible Speed - 7+ seconds
How can I test my website speed?
There are a number of great tools when you are working on speed optimization and the ones I list below will also tell you how fast your page loads:
- Pingdom Tools
- Google Page Insights
A quick google search will help you find these and other great tools out there.
How can I increase the speed (page load time) of my website?
Web Server Host Speed Optimization
- Select a great host - This means you will want to select a host that does not have overcrowded servers, has ample bandwidth, and system memory so that the pages load as quickly as they can and are not slowed down by the hardware at the server location.
- Select a local host - So if you were to find a great fast server over in japan, and your web viewers are all in the US, then you are working against yourself. Not only will this slow down the response time of the server due to the distance, but Google will notice your server is so far away and penalize you for that too. Remember - they aren't trying to keep the man down, they are trying to provide quality results for web searchers. Do you remember what web search was like before Google? One word. Irrelevant. Advertisements. Whoops that was two.
- Don't select too local of a host - I have worked with clients who try to keep it real local - like in their town, and often find less than performing servers and all kinds of hassles. Remember point one and then find someone in the same region of the country as you, or even the same country. Use a webhost that lots of people can vouch for - or at least one person that you really really trust.
- Maintain your database - Every once in a while you may need to clean your database and make sure it is optimized. Mysql makes this pretty easy with clean and optimizing functions so there you go.
Website Files? Speed Optimization
- Custom Site - one of the problems with using one of those website builders like Wordpress or Joomla is that it adds so much extra infrastructure and bits that you don't need because it is trying to fit everyone's needs and not just yours. That extra infrastructure takes longer to load and decreases your website speed. So if possible, I always recommend a custom website build to increase the speed of your website.
- HTACCESS - The htaccess file on your website is a hidden file that configures some website settings for the server. You can edit the htaccess on your site to configure some items that will make your website run faster for example: gzip, caching, expires, mod deflate, keep alives, and output compression.
- CDN - consider using a content delivery network (cdn) that uses a separate server to serve files for your website like images and videos and scripts. This allows those files to load simaltaneously with your onsite files, thus delivering a faster website load experience.
- Minimize Redirects - one of the things that can really jam up your website speed is configuring unecessary redirects. Each redirect will add quite some delay to your page load so go through your configs and make sure you aren't redirecting anytime it is not absolutely necessary to increase the speed of your website.
- Fix broken links - if you have broken links on your page you are wasting valuable page load time looking for something that is not there. There are tools aplenty to look for broken links on your website so you can fix or remove them.
- Specify A Character Set - a quick meta tag will take care of this and keep your browser from having to take the extra time to determine the character set on its own.
- Minify CSS - when you minify your cascading style sheet pages you are removing all the extra whitespace and helping your browser read the file as fast as it possibly can.
- Link CSS up top - when you link to the css up top (don't @import as it takes longer) you are allowing the page to load right the first time instead of taking extra time at the end to reload everything with the styles.
- Link JS at bottom - when you link all your scripts at the bottom of the page it doesn't hold up the loading of the page elements, thus speeding up page load time of your website.
Website Design Speed Optimization
- Prioritize Content - you will want to prioritize the content on the webpage above the fold. Above the fold is a reference to the part of the website that is visible in the screen of the user's device - or what the user is able to see without scrolling. Make sure you are putting the content above the fold that you most want them to see so that is loading first.
- Drop the Ads - unless you are making your revenue from ads on your website rather than the service or product that you are providing - drop the ads. Loading ads onto your webpage is one of the largest culprits of slow page loads. If it is not your source of income, the truth is you may be making less than a dollar per month, and worse even advertising your competition on your own webpage. So unless you have a formula focused on ads - drop em if you want to increase the speed of your website.
- Minimalize your Template - make your website template as trim as possible. You can make a beautiful template with all kinda of impressive pieces, without slowing the site down. Go ahead and make your template images compressed and as small as possible while still viewing at high quality. Make these bits of the website that load on every single page as small and trim as possible so you can save some of that page load time for the bigger resources that are important to include on specific pages of your site.
Website Images Speed Optimization
- Image Sizing - You want your images on your site to be super high quality - crisp, clean, sharp, vibrant, but you do not want them to be super large which will slow your site down considerably. You will have some images that may need to be large, but the important thing here is to only make them as large as they have to be. So if your image is going in a space of the site that maxes out in width at 1000px, then don't make that image 2000px wide and size it down. Then you are wasting a ton of space thus page load time on something that should not have been more than 1000px.
- Image File Sizing - Large file sizes will slow down your website and is one of the big culprits when a website is taking more than 5 seconds to load. Your image file size varies based on quality, dimensions, file type, and compression. If you want to keep high quality images, and you need a certain dimension and file type, then the best thing to do is lossless compression. A website called tinypng will allow you to upload an image file, and then download the same file at the same dimensions with a much smaller file size using lossless compression technology. Other sites can do the same but tinypng has worked well for me and often turns my 3MB image files into 200kb easy peasy.
- File Typing - Various file types offer varying compression rates on your images which can make your file size larger or smaller. Generally on a website you want all of your images to be jpegs (.jpg) which has the highest compression available. The exception is when you are making files with transparencies you will need to use a png file, which is your second best option to increase the speed of your website.
- Declare your Dimensions - If you throw an image into your website without declaring the dimensions, the browser then has to take additional time to calculate how to size it. So, if you declare your dimensions (width and height) then you will save time and increase your page load time, thus increasing the speed of your website.
- CSS Sprites - No this is not a style for your favorite soft drink but a way to use css to minify your images... kind of. A CSS Sprite takes a whole bunch of images you use on your website (maybe the images from your design or template) and puts them into one image. Then css is used to focus in on one of those images in the big image. This way you load one image instead of 10 or 20. It cuts down on image requests thus speeding up your website. A quick google search will help you find some cool tools that will perform some of this for you.
Increasing the speed of your website has never been more important than it is right now. Trimming the fat of your website so it loads faster will also require less bandwitch from mobile devices that many people are still paying by the GB for. BigTimers like Amazon and Walmart have found that by simply increasing the speed of their website their profits increased by percentage points. So if a little invested time on your website can result in an increase in an ongoing flow of profits, isn't that worth your time?
As always - if you would like some professional help on increasing the speed of your website - thus profits for your business - contact us for a quote!
We thought you might like to see these other posts about web development...
Kim Young is Founder, CEO, and a developer at Foo - a web development company based in Wesley Chapel, Florida. She can also be found on Google+. With over 16 years of experience as a web developer, Kim is excited to share with you tidbits that she has picked up along the way. Kim prioritizes continuing education and out of box thinking in order to bring the most valuable solution to Fooweb's clients.