How to Check Your Page Loading Speed<\/h2>\n\n\n\n
The easiest way to check how fast your website is, is by heading over to Google Page Speed Insights at pagespeed.web.dev<\/a><\/p>\n\n\n\n Simply copy and paste any URL into the bar at the top and it will provide it a scores for both mobile and desktop, and even more usefully give you some tips to help speed it up. The tool will give you 4 different scores: <\/p>\n\n\n\n For page speed, the “performance” score is what you need to look at.<\/p>\n\n\n\n Check out the example below for this website:<\/p>\n\n\n\n So what is a good score to get? <\/p>\n\n\n\n The tool does give you an indication by highlighting the score in either red, orange or green:<\/p>\n\n\n\n I’d advise taking these categories with a pinch of salt, as the vast majority of websites fall into the orange or red category.<\/p>\n\n\n\n According to tunetheweb.com<\/a>, who analysed over 15 million websites, the average page score for performance was just 32 (well into the red category), whilst only 10% of websites achieved a score of over 75. <\/p>\n\n\n\n You’ll also get a breakdown of the key metrics:<\/p>\n\n\n\n Aiming for as close to a score of 100 as possible is of course ideal, however you should not obsess over it. I consider the page speed to be good if a website has:<\/p>\n\n\n\n Okay so now we know how to analyse your website’s loading time, lets go through some top tips to speed it up.<\/p>\n\n\n\n Using website builders such as Wix, Squarespace and Weebly make web design much easier for complete beginners as they often use intuitive drag and drop systems, however they are really not good for page speed, and SEO as a result.<\/p>\n\n\n\n Why?<\/p>\n\n\n\n At the expense of the ease of use, website builders have an incredibly bloated HTML markup which is the code behind the website. This is because there are loads of styling effects, and hidden elements which clog up the code and make the pages load much slower. <\/p>\n\n\n\n So what is the alternative?<\/p>\n\n\n\n I build all my websites using WordPress.org which is an open-source platform that can be installed and hosted separately. WordPress websites have numerous benefits over website builders including:<\/p>\n\n\n\n Check out my head-to-head comparison between WordPress and website builder<\/a>s to learn more.<\/p>\n\n\n\n WordPress is a more difficult platform to get to grips with though compared to website builders. That’s why I offer WordPress website design packages aimed at small-medium sized business. Take a look at my web design services page<\/a> for more information.<\/p>\n\n\n\n If you do go down the WordPress route, I also recommend steering clear of installing any “page builders” such as Elementor and Beaver Builder. These, like website builders make the pages load much more slowly. <\/p>\n\n\n\n Every website needs a host for it to actually be live on the internet. The hosting service essentially makes all the files that comprise the website available to actually view online. The hosting service that you use affects how quickly your website loads. <\/p>\n\n\n\n There are actually loads of different hosting services available and they all have different packages to suit different requirements. The most common types of hosting are:<\/p>\n\n\n\n For most small business websites, you won’t need a very expensive hosting package in order to get good page load speeds. In the vast majority of cases, choosing a basic Shared Hosting plan will be completely fine. A good shared host should be able to handle 100,000 visitors per month. <\/p>\n\n\n\n VPS Hosting typically is capable of handling over 10,000-20,000 visitors per day whereas Dedicated Hosting is capable of handling at least 50,000 visitors per day. <\/p>\n\n\n\n If you get high traffic and are currently running on a shared hosting plan, you should definitely think about upgrading to a VPS or Dedicated plan to ensure your website still runs nice and quickly. <\/p>\n\n\n\n Images take a lot longer to load compared to text on a website. <\/p>\n\n\n\n Removing all the images from your page will undoubtably lead to faster load times, however it will make it look incredibly boring. So how do we get around this? The best thing you can do is optimise the format and size of your images to make sure they load as quickly as possible<\/p>\n\n\n\n If you followed the steps above and checked your website’s page speed on Google Page Speed Insights, then you may have noticed the following points under the “opportunities” section:<\/p>\n\n\n\n In order to make your images load as quickly as possible, you should ensure they are the correct size. Having unnecessarily large images will cause them to load super slowly and harm the user-experience. <\/p>\n\n\n\n So how big should your images be? It’s all about balance. You want them to be small enough so that they load quickly, but not so small that the quality looks poor. <\/p>\n\n\n\n For full-width images (for example in your website’s hero section) I personally would not go any wider than 1920px (x the required height) in order to prevent them from loading too slowly. <\/p>\n\n\n\n You should really avoid using too many full-width images and instead opt for smaller images to improve page speeds. Unless the image is super small, going for a size of 1000px x 1000px is about right for most images. This will ensure the image still looks sharp, but isn’t overly large. <\/p>\n\n\n\n If you want to go the extra mile, I’d highly recommend serving your images (or at least your largest images) in a next-gen format. <\/p>\n\n\n\n Most images saved to a device will either be in a .png, .jpeg or .jpg format. Whilst these file types are highly popular, they do not offer the best compression and hence load more slowly. <\/p>\n\n\n\n The answer to this issue, is to convert the image to a next-gen format such as .webp<\/p>\n\n\n\n WebP images load much faster but without sacrificing any image quality. Check out the comparison below (all images are the same size).<\/p>\n\n\n\n PNG Image<\/p>\n<\/div>\n\n\n\n JPG Image<\/p>\n<\/div>\n\n\n\n You can easily convert any image from .png\/ .jpeg to .webp by using an online converter.<\/a> <\/p>\n\n\n\n We already know that images (particularly those which are incorrectly sized and formatted) slow down a website. Having a featured video on your website is even worse.<\/p>\n\n\n\n Although having a video on your home page looks really cool and modern, it does more harm than good in my opinion. <\/p>\n\n\n\n I ran a quick test on one of my demo websites to see how much of a difference having a video actually made. The result was that the video almost doubled the page loading time. This is big problem for both user-experience and SEO. <\/p>\n\n\n\n If you absolutely have to have a video on your website, then at least use the following tips:<\/p>\n\n\n\n This applies if you are using a WordPress website. WordPress websites are built using a basic theme which you then customise to suit your requirements. <\/p>\n\n\n\n There are over 9,000 free themes available on WordPress. Some are fantastic, and some are pretty bad. Choosing the right theme not only affects how your website looks, but also quick it is. <\/p>\n\n\n\n Earlier I mentioned the issue with website builders (Wix, Squarespace, etc.) having bloated code and slowing down the website. Well, bad themes will create this issue as well. You should always aim to use a “lightweight” theme to avoid these issues.<\/p>\n\n\n\n Some of the best lightweight but still very functional and customisable WordPress themes are:<\/p>\n\n\n\n I am personally a big fan of the Blocksy theme as I find it to be very fast but also nice and easy to use, and packed with features.<\/p>\n\n\n\n Again, this is relevant for WordPress websites. <\/p>\n\n\n\n Your theme should ideally include a lot of the features you need to make your website look and function how you want it to. However, it’s very unlikely that your theme will have every single feature that it needs to. That’s where plugins come in.<\/p>\n\n\n\n WordPress plugins insert into your website to give it more functionality. Examples of popular plugin types include:<\/p>\n\n\n\n Whilst plugins are highly useful, you should definitely avoid having too many. Why? They can slow down your website. <\/p>\n\n\n\n Whenever you install and activate a new plugin, you add more code to the website. This typically means it adds more HTTP requests.<\/p>\n\n\n\n HTTP requests = slower loading times<\/p>\n\n\n\n Having at least some plugins on a WordPress website is almost entirely unavoidable. So, to mitigate the issue you should try and opt for “lightweight plugins”, as these will not slow down the website much at all. <\/p>\n\n\n\n So how many plugins is too much?<\/p>\n\n\n\n For most small-medium business websites which do not have an online store, having more than 10 plugins is in most cases unnecessary. You may need a few more if your website has a store or you need some more unique features, but I’d certainly advise against having more than 15 plugins active on a single WordPress installation. <\/p>\n\n\n\n A redirect happens when a URL points towards another URL, causing the page to redirect to another page. Redirects cause the page to load more slowly, because it is essentially wasting time trying to end up in the right place on the website. <\/p>\n\n\n\n In most cases, your pages should not be redirecting at all. However, in some cases it may be unavoidable if you’ve had to move to a new domain or have switched up the structure of your website completely. In this case, try and keep the number of redirects to a minimum. <\/p>\n\n\n\n Lazy loading is a popular technique to improve page speeds. It basically defers the loading of certain elements of the page, so that the rest of the content can load more quickly, hence improving user-experience. <\/p>\n\n\n\n The most popular elements which can be lazy loaded are images and videos, however JavaScript and CSS can also be lazy loaded. <\/p>\n\n\n\n For example, you may have a video 2\/3 the way down your home page. By lazy-loading the video, the part of the page that visitors see first will load nice and quickly because they are not being slowed down by the video later down the page. <\/p>\n\n\n\n Media Bright specialises in web design, SEO and content for small-medium business. Head over to my service page<\/a> for more information or get in touch using the contact form below.<\/p>\n\n\n\n
![\"\"](\"https:\/\/mediabrightweb.com\/wp-content\/uploads\/2023\/07\/image-2-1024x679.png\")
<\/figure>\n\n\n\nWhat Do the Scores Mean?<\/h4>\n\n\n\n
\n
\n
![\"\"](\"https:\/\/mediabrightweb.com\/wp-content\/uploads\/2023\/07\/image-3.png\")
<\/figure>\n<\/div>\n<\/div>\n\n\n\n\n
How to Speed Up Your Website<\/h2>\n\n\n\n
\n
1. Avoid Using Website and Page Builders<\/strong><\/h3>\n\n\n\n
\n
![\"\"](\"https:\/\/mediabrightweb.com\/wp-content\/uploads\/2023\/07\/web-design-1024x450.jpg\")
<\/figure>\n\n\n\n2. Use a Good Hosting Service<\/strong><\/h3>\n\n\n\n
\n
3.<\/strong> Format and Size Images Correctly<\/strong><\/h3>\n\n\n\n
\n
![\"\"](\"https:\/\/mediabrightweb.com\/wp-content\/uploads\/2023\/07\/image-5.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/mediabrightweb.com\/wp-content\/uploads\/2023\/07\/image-4.png\")
<\/figure>\n<\/div>\n\n\n\nProperly Size Images<\/h4>\n\n\n\n
Serve Images in Next-Gen Formats<\/h4>\n\n\n\n
![\"\"](\"https:\/\/mediabrightweb.com\/wp-content\/uploads\/2023\/07\/png-image.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/mediabrightweb.com\/wp-content\/uploads\/2023\/07\/jpg-image.jpg\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/mediabrightweb.com\/wp-content\/uploads\/2023\/07\/webp-image.webp\")
<\/figure>\n<\/div>\n<\/div>\n\n\n\n4. Avoid Using Video<\/strong><\/h3>\n\n\n\n
\n
5.<\/strong> Choose the Right Theme<\/strong><\/h3>\n\n\n\n
\n
![\"\"](\"https:\/\/mediabrightweb.com\/wp-content\/uploads\/2023\/07\/wordpress-1.jpg\")
<\/figure>\n\n\n\n6. Delete Unnecessary Plugins<\/strong><\/h3>\n\n\n\n
\n
7. Limit Redirects <\/strong><\/h3>\n\n\n\n
8. Consider Lazy Loading<\/strong><\/h3>\n\n\n\n
Need Help Making Your Website a Success? <\/h4>\n\n\n\n