As a creative business owner, your website is an opportunity to showcase your talents by sharing the beautiful work that you do. After all, your website serves as your online portfolio, displaying your services and best work to your ideal clients and customers. This usually means our websites are fairly image heavy, not to mention wanting to display all the custom fonts, too! Whilst it’s important that our websites visually grasp our visitor’s attention, it’s equally important to make sure that our website loads fast so that all of that beautiful content doesn’t get missed. Slow load times = missed opportunities.

The awesome folks at Flothemes create some of the most premium website templates around. Designed with creatives like photographers and designers in mind, if anyone knows how to make stunning image focused websites and how to make them load super fast, it’s these guys. In this guide, the team at Flothemes share with us their expert industry insights and top tips and for optimising your website for lightening speed load times. Enjoy!

Everyone competes for your attention online. Whether it’s a brand that tries to sell you something, an influencer who wants your likes, or a news channel that uses click bait to get you on their site – the ultimate goal is to get you engaged with their content. And since people are bombarded with so much information on a daily basis, they’ve grown impatient. They won’t wait 20-40 seconds for a website to load. In other words, if your site is slow, you’re losing business opportunities.

According to CrazyEgg, a 1 second delay in page loading time can cause a 11% drop in page views and 7% drop in conversions. And to give you additional perspective, around 47% of consumers expect a website to load in 2 seconds or less. If a website loads in more than 3 seconds, 40% of users will exit it.

Does your website load slowly? Not sure how how to measure your site’s speed? Keep reading. In today’s article we’re sharing a tool to help you determine how fast your website is, as well as 10 steps you can take to speed up your site.

What is an acceptable or good page load time?

According to Google, if your website loads in less than 3-4 seconds, you’re out of trouble. If it takes longer, you’ll notice a decrease in traffic and conversions and an increase in bounce rates.

How to test your site speed and what does your score mean?

There are several tools you can use to measure your website’s speed. Our preferred ones are GTmetrix and Pingdom Tools. They work in a similar way, and highlight the things that need to be improved. We will use GTmetrix as an example, yet know that the principle is the same for Pingdom Tools. Follow these steps:

1. Sign up for a free GTmetrix account

This will allow you to tap into additional settings, such as server location, browser type, and records of previous tests, so you can easily compare some before and after results.

Choose the location that is closest to where your clients live to get a more accurate understanding of how they experience your site.

NOTE: Your hosting (your server) has a tremendous impact on your loading scores. It’s highly recommended to choose a hosting company that is closest to your clients’ location. If you use WordPress, here are the main criteria that you need to look at when choosing the right hosting provider. With other platforms that directly host your website, we recommend running some checks to get an idea of how fast they server content. 

2. Test your website

We recommend to test your website a few times to ensure the accuracy of the score. You’ll notice that the second or third time the loading time may reduce. That’s due to caching.Also try and test various pages, not just your Homepage. Check your site analytics, and start with the pages that get most traffic (i.e. your Homepage, About page, Investment, Portfolio pages, etc). 

NOTE: If you’re using a caching plugin (relevant for WordPress users), make sure that you clear your cache after each change that you implement on your website. Only after that test your score again. 

3. Analyse your site speed score

When you run a test via GTmetrix, you’ll get 5 main metrics – your PageSpeed score, your YSlow score, the time it takes your page to fully load, the size of your page, and the number of requests you have for that particular page. Additionally, you will notice a bunch of tabs below, each containing a variety of criteria and recommendations, depending on what slows down your website. 

Let’s analyse these 5 main metrics: 

PageSpeed

GTmetrix uses Google Page Speed Insights to calculate your website’s score. The score ranges from 0 to 100 (from F to A). All the criteria and recommendations listed under the PageSpeed tab will help you figure out what needs to be done to improve your score and make your website load faster. Check out this article by Kinsta for more details on each criteria.

YSlow Score

YSlow is a score based on Yahoo’s 23 rules for high-performance websites. Most of the recommendations listed in the YSlow tab overlap or are similar to the ones inside the PageSpeed tab. If you’re wondering which ones are the most important and should be addressed, this article by Kinsta dives deeper into each criteria. 

Fully Loaded Time

This score shows how long it takes a particular page on your website to load fully. Ideally, you want to keep this score under 3-4 seconds. Otherwise, you’re losing potential clients. 

Total Page Size

This indicator shows how heavy is your page (in MB). For an optimal result, your pages need to weight up to 4-5 MB. The heaviest elements on your website are usually unoptimised imagery or self-hosted video files. We’ll talk about ways you can optimise these in the next sections.

Requests

This indicator shows you the number of HTTP requests needed to load your website page. In other words, everything that loads on your website, all the images, fonts, plugins, videos, they each generate an HTTP request. The fewer HTTP requests your website has, the faster it loads.

Mobile Site Speed vs Desktop Site Speed

Back in March 2018, Google rolled out mobile-first indexing, which means that it uses the mobile version of a website to index and rank it in search results. Before the update, the ranking and indexing was based solely on the desktop version of a site.

What does this mean for you, as a website owner? You need to make sure that your website is fast and pleasant to browse, on large and on small screens. This article with 5 steps for a better mobile-first compatibility with Google can help you improve your site for your mobile visitors. 
Additional Resource to check out: Speed Optimised Mobile Websites Overshadow Desktop Internet Success – by Kinsta. 

10 Tips to Speed Up Your Website and Keep it Optimised

NOTE: Many of these tips are more relevant for WordPress users, due to the fact that WordPress allows more control over your server, extensions, etc. Yet, we still recommend you to check out the steps listed below, as many are universal for any website platform. Also, before you start making any changes, we highly advise you to create a back up for your website. If you’re on WordPress, here’s how to do it. If you use a different platform, check out their documentation for instructions.

Now, let’s explore the 10 ways you can speed up your website and keep it loading fast in the future:

1. Optimise Your Images or Videos

One of the main reasons why websites load slow – are large, unoptimised image or video files. A lot of website owners upload large photos and videos because they want to present the best possible quality of their work, yet this compromises their site’s performance. Large files make their website pages heavier, which increases the time needed to load their content.

The solutions are simple: 

• Optimise and prepare your images for the web, before uploading them. Reduce their size to the recommended size of the site section to which you will upload them (there’s no need to use a full screen image for a testimonials section that has a small photo of your client. Scale them accordingly). Run your photos through an optimisation tool, such as TinyPNG or JPEGmini. Only then upload them to your site. 
• If you want to upload a video to your website, scale its dimensions to the appropriate size of the website section you plan to show it on. Then, run it through a video optimisation tool, such as VideoSmaller. Often, it makes more sense to embed a video from Youtube, rather than host it on your website. This helps save some page MBs. 
• Let’s also talk about your existing website content. There are 2 ways you can reduce the size for the images  that you’ve previously uploaded to your website. ONE is optimise and re-upload them. TWO is to use tools that do the work for you. If you have a WordPress website, you can use plugins such as Resmush.it or ShortPixel Image Optimizer. With video content – you can either re-upload optimised video files, or upload your videos to Youtube and replace them with embeds. 

For a more in-depth article on how to optimise images, check these resources:

How to Optimize Images for your WordPress Site(Full Guide)

Optimize images before uploading them to your site(How to save images for web on Squarespace)

2. Curate Content

Another mistake is uploading thousands of photos or videos on your website. Even if they are reduced in size and optimised for the web, they still create a large amount of HTTP requests, which can contribute to your website taking longer to load.

Curate your work and upload only the best examples of your work and projects. Give your prospects just enough to make a decision. Yet don’t overwhelm them with everything you’ve got. 

3. Recommended Plugins (for WordPress Users)

If you’re running a WordPress site you can improve its performance by using dedicated plugins. The 3 most important aspects that you need to look into, are caching, minification and compression. Here are 3 free plugins that we recommend using:

WP Super Cache for caching

This plugin generates static HTML files from your dynamic WordPress site. After an HTML file is generated your web server will serve that file instead of processing the comparatively heavier WordPress scripts.

Autoptimize for minification

The Autoptimize plugin can aggregate, minify and cache scripts and styles, defer CSS and JS files, optimise Google Fonts, etc. It’s a powerful tool that can help you improve your website’s performance and loading time. Note that the Image Optimisation option from this plugin can sometimes change the source of images and logos, which may overlap. Hence we recommend disabling this setting.

WP Performance Score Booster for compression

You can use this plugin to enable GZIP compression, remove any query strings from static resources like CSS or JS files, set expires caching to leverage browser caching, etc. All these will help you speed up your site.

Know that setting up these plugins requires some technical knowledge. You will also need to run some testing to find the best settings that work for your website. As an alternative solution, you can look into an all-in-one premium plugin like WP Rocket. It comprises all of the features listed above. 

NOTE: The beauty of WordPress is that you can add a bunch of plugins to extend the functionality and features of your website. And while plugins can add a lot of value and benefits to your website, they can also slow it down if you have too many, they can cause security issues – if you have outdated ones, and they can break your website – if not configured correctly or if they conflict with other plugins/site settings. We recommend doing regular plugin checkups, to clean up any outdated or irrelevant ones. 

4. Get Good or Better Hosting (for WordPress Users)

If you’re a WordPress user, you can choose which ever hosting company (server) you want for your website. This gives you more control over how your website works, and how fast it loads information for your clients. 
There are 5 main criteria that you need to look at, when choosing the right hosting provider for your website – server speed, server location, pricing, customer support and the amount of monthly site visitors you have. If you’re curious to find out how your hosting affects your site performance and why it’s important to get a reliable provider, read this article.

5. Use a CDN (for WordPress Users)

A Content Delivery Network (CDN) will drastically reduce the loading time of your website by storing static resources on a network of fast loading servers. What this means is that a CDN holds a cached version of your static content (Images, CSS and JavaScript) on various servers all over the world and delivers them to your visitors based on their location.

If you need a recommendation, you can look into CDN77, StackPath (formerly MaxCDN), Cloudflare.

NOTE: Using a CDN makes sense for those who have multiple website visitors from different parts of the world. If your business is local, use a reliable hosting provider with servers located closest to your city or country, no need for a CDN.

6. Implement Lazy Loading (for WordPress Users)

Lazy loading is a technique that allows websites to serve content when it’s needed, instead of loading it all at once and making the user wait for the page to fully load.  Here are 4 ways you can add it to your WordPress website. 

7. Reduce the Use of Web Fonts

Of course, the temptation of using pretty custom fonts is always there. We work in the creative industry,  standing out and showcasing our elegant branding through exquisite typography and design – that’s how we get clients. Yet too many fonts can unfortunately slow down your site. Consider using web safe fonts or reduce the number of fonts on your site to two. You can always use variations of those font families to add more depth and character to your brand.

Though, if using a custom font is an absolute necessity, we recommend preloading your fonts. Here is how you can preload fonts on your website.

8. Reduce Redirects 

Creating redirects for old, deleted pages is a common practice to avoid broken links and provide site visitors with a relevant and good quality experience. Yet, having too many redirects creates additional HTTP requests that can slow down your website. Google recommends minimising or fully eliminating redirects on your website. Also, avoid redirect chains, these are redirects that point to other redirected pages, which create extra requests and cause your pages to load slower.

To check your site’s redirects or identify whether there are any broken links that need to be fixed, you can use Google Search Console (go to Index – Coverage – Excluded report).

9. Reduce the Number of Requests

Every time you visit a website, your browser is requesting and receiving files. The browser requests different files from a web server to load the content of your page. These are also known as HTTP requests and the more requests you have the bigger your loading time is.

Reducing the number of files can help speed up your site, fewer files = fewer requests. You can do it by following some of these tips:

• Combine HTML, CSS, JavaScript files to reduce the number of requests. Please note that combining files might change your site appearance or functionality, so use this option sparingly. Plugins like Autoptimize or WP Rocket can help you out.
• Defer files you don’t need. In some cases, your site might load extra files that are not required and slow down your page. You can use the Asset CleanUp plugin to defer files you don’t need.
• Consider removing 3rd party tools that you no longer use. 3rd party tools (analytics, live chat, heatmap tools, etc.) can add extra requests to your site. Consider removing the tools that you no longer need.

10. Get an Optimised Website Template

Do your research before purchasing a website template, or signing up for a site platform. Yes, design options and customisation flexibility is important, yet try to find out how well this template/platform performs in terms of SEO and loading speed. Avoid bloated templates, that include hundreds of features and widgets that you don’t actually need. Because all that extra functionality that you’ll never put to work, will impact the way your site loads and performs.

Here at Flothemes, we try our best to create tools that allow our clients to self-express themselves through their website design, ensuring at the same time that their site performs well and can be fully optimised for SEO and speed. You can read more about Flexthemes and their SEO features here.

Final Recommendation: Monitor your Performance and Results 

Whether you choose to implement all the recommendations listed in this article or just several of them, remember to test your website before and after each single change. This will help you understand which steps are helpful and how much of an impact they have on your website’s speed.

If you haven’t already, get Google Analytics and Google Search Console accounts for your website. Track your site’s performance, track your traffic and KPIs. Changes and improvement decisions should always be made based on hard data, rather than gut feeling.

Good luck! 

A huge thanks to the Flothemes team for sharing these awesome tips for getting your website up to speed. We’d love to know if any of these ideas were helpful, so be sure to let us know if you try any of these tips out in the comments section below!