A slow-loading website hurts your business in more ways than you might think. Obviously, it’s annoying to would-be website visitors to have to wait until your page loads (and according to a study commissioned by Google last year, website visitors will wait an average of two SECONDS for your site to load before moving on).
But if your website is slow, would-be prospects might not even get to you in the first place: search engine ranking algorithms, including Google’s, look at how fast your site loads. If your website loads slowly, it will hurt your search engine rank.
Here are the six easy steps for speeding up your website:
Step 1: Optimize your images. This is the #1 mistake rookie web designers and do-it-yourselfers make: using images that are way too big and relying on the website code to serve up the right sized image.
How do you fix this? First, resize your images to just a little bit larger than the size you’ll need for your website. Unless you have a full page background image, you typically won’t need an image that’s 3000 x 3000 pixels. If you don’t have photo editing software, online tools for resizing images include Canva and, my favorite, Sprout Social’s Landscape (https://sproutsocial.com/landscape).
Second, optimize your images. When you optimize your images, you reduce the file size as much as possible without sacrificing quality. Even when I optimize my images using Adobe Photoshop, I take it one step further by using the free online drag-and-drop compression service, TinyPNG (https://tinypng.com).
Step 2: Stop using unnecessary plugins. If you are using a framework such as WordPress, plugins are awesome – they make it easy to add bells & whistles and needed functions to your website, often for free. But they often add extra javascript and css stylesheets to the header of every single page in your site. If it’s needed, it’s worth it. But if it’s not, you’re paying the price in page loading times.
It’s easy to install a plugin and then forget about it. Do a plugin audit regularly to make sure that every plugin that’s active on your website is needed.
Step 3: Don’t use too many fonts. Unless you’ve got a compelling design reason, don’t use more than three different font families on your website. It looks unprofessional and cluttered, to begin with, and loading additional fonts adds time and requires more resources.
Step 4: Minify all your CSS and Javascript files. When you minify files, you remove all comments, extra spaces and hard returns, all of which are ignored by browsers anyway, and drastically cut the size of these files.
Where possible, load your minified script files from the footer of your web pages instead of the header. This doesn’t actually speed up page loading times, but it speeds up the time it seems to take the page to load, which is all your website visitors care about.
Step 5: Enable gZIP compression. When gZIP compression is enabled, your server send web elements – images, style sheets, Javascript, etc. – in a single compressed package from the server to the browser. It’s an easy way to speed up your website performance.
Most web hosts have gZIP compression available, but it often needs to be manually added. To enable gZIP compression, you’ll need to make a simple change to your .htaccess file.
If you have cPanel, here’s how to view your .htaccess file:
(Note: if you do not have cPanel, you can find your .htaccess file by accessing your website through FTP.)
1. Log into your cPanel.
2. Under Files section, select File Manager menu.
3. cPanel will popup a message asking you where you would like land within your website directories. In the same window, you will see the checkbox asking if you would like to show hidden files. Check the checkbox Show Hidden Files and click Go.
4. Under public_html folder of your website, find and edit the file called .htaccess.
5. Paste the following code into .htaccess file at the end of your existing content.
## GZIP Compression ### Compress HTML, CSS, JavaScript, Text, XML and fonts AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml # Removing browser bugs for older browsers BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html Header append Vary User-Agent ## END GZIP Compression ##
Step 6: Cache your files. A website cache is a snapshot of your files stored in temporary memory – if your website can show itself without having to regenerate the pages every time it will load much faster. There are a multitude of plugins and free online services to do this. My go-to is CloudFlare, which not only will give you a free SSL certificate – also a must for higher SEO ranking – it also provides full site caching.
However, when you cache your files, you also need to specify when cached files should expire. To do that, you’ll once again need to edit your .htaccess file, and add the following code to the end, editing the expiration times as needed:
Header set Cache-Control “max-age=84600, public” ## EXPIRES HEADER CACHING ##ExpiresActive On ExpiresByType image/jpg “access 1 year” ExpiresByType image/jpeg “access 1 year” ExpiresByType image/gif “access 1 year” ExpiresByType image/png “access 1 year” ExpiresByType image/svg “access 1 year” ExpiresByType text/css “access 1 month” ExpiresByType application/pdf “access 1 month” ExpiresByType application/javascript “access 1 month” ExpiresByType application/x-javascript “access 1 month” ExpiresByType application/x-shockwave-flash “access 1 month” ExpiresByType image/x-icon “access 1 year” ExpiresDefault “access 2 days” ## EXPIRES HEADER CACHING ##
Before making any of these changes, always back up your website, just in case something goes wrong.
Some causes of slow-loading websites – bulky WordPress themes, for example – don’t have a simple fix, other than a site overhaul. The steps listed above are relatively simple things that you can do to speed up your website.
I’m Leslie Smith, I own Heron Design. I’ve worked in marketing & communications for three decades, and started my company 18 years ago. I love helping clients realize how much power they have in creating their own lifestyles. I believe that the right branding & marketing can open a whole new world for a business owner.
You can learn more about me here. If you’d like to talk about whether I can help you, let’s set up a 20-minute conversation!