How to Fix Slow Website Loading

Code Updates for Slow Website Loading Photo by Christopher Gower on Unsplash

If you’ve noticed it’s taking more than a few seconds to load your website, it’s probably time for a few updates. It doesn’t matter how great your site looks. If you have a slow website loading, it will deter potential clients. 

How Can I Make My Website Load Faster?

First, it is important to know why it is important to fix your page load speed. Not only will a slow load deter customers once they are on your page, but it actually will be harder for potential clients to find your website as well. Google now prioritizes optimized sites on their search engine results. Google Page Speed Insights is a good place to start by benchmarking how your site is running. We also put together some recommendations on our blog post, How to Understand and Optimize Page Speed Insights

The good news is there are many small fixes you can make to optimize your website that will make an immediate impact on page speed. Many of these fixes are simple to do on the back end, and some just need a little coding. The idea is to only load what is necessary first so the page appears quickly for the user. The smaller the initial data payload, the better. Prioritizing the order in which page elements load and optimizing what is stored on each page of your site is crucial.

Optimize Images on Page

With many different image types and sizes, it is important to keep consistency on your site. Webp is now considered the standard for being the image type that is most optimized for websites. Developed by Google, it is designed to create smaller and better-looking images compared to other image types like jpg, png, and jpeg. You can convert your images using an online converter such as Cloud Convert.

Another thing to consider with your images is image size. Mobile and desktop screen sizes vary with each device. Having responsive image size or optimized images per screen will help with loading time. Slow website loading can also be caused by having too many images on your page. Choose your favorites and don’t overwhelm each page with excess images.

If possible pick a layout with image dimensions that will be the same on all screen sizes. Think of code as a description of what you are visually seeing. The less it needs to describe, the faster the page loads.

Defer Non-Critical JavaScript and CSS

CSS and JavaScript are the coding languages used to create your website and make it interactive. By deferring non-critical CSS and JS, you are allowing the most important parts of the site to load first. When you defer the non-critical JSS and CSS, Time to First Paint and Time to First Interactive will become faster.

Two important factors with Page Speed Insights is Time to Paint and Time to Interactive. These are the measurements for how long it takes for your page to appear and how long it takes for the site visitor to be able to use it. By prioritizing these critical pieces of code, your site will be optimized and page speed will increase. 

Optimize Fonts & Font Weights

Generally speaking, having consistency with fonts will create a clean-looking website and also will speed up your website speed. A particular typeface may come in different weights or thicknesses which is important to consider for readability and user experience. Although custom web fonts look great, they can heavily affect loading time due to file size.

Every font style and weight is an additional file on your site that adds to the amount your page has to load. It is considered standard practice to use 4-6 total font variants on your page to optimize page speed and readability. That said, if the page loading speed is your top priority, we recommend using a max of 2 and if possible go with default fonts.

Remove Blockers & Bloat

Just as with fonts and images, the more plugins you have, the more your page will have to load. Depending on the platform and the function of the additional code, some 3rd party additions can hurt more then help your page loading time. Use the coverage tool in the Chrome inspector to see what is slowing your page down the most. Use lighthouse to determine what still needs deferred. Go through your plugins and track which ones you actually are using and try to clear out as many as possible. It’s also important to update plugins as you can, which also will help with optimization. The less your page has to load, the faster it will be!

Look Into Your Hosting Service & Increase Server Resources

If you have gone through all of the above steps and your site is still loading slowly, you might need to look into where your website is being hosted. You might need to purchase your own server or get more resources from your hosting service to speed up page loading if everything else is optimized. If you don’t know where your website is hosted, take a look at where you pay for your domain name and you will likely find it in the same place. 

A note about Layout Shift

If you’re like us, you will dive right in and end up with a faster loading page that scores higher on Google Lighthouse and Google PSI. But, you may notice when you load the page you see a lot of glitchy movements and delayed loading of elements. To some degree, there is a trade-off to these performance upgrades. Usually, it is possible to smooth things out with one last step.

Most back-end ‘optimizers’ will try to load your entire site’s CSS in one shot which will dampen performance. To fix this, you can oftentimes clean up your website by updating the critical CSS needed for that page to cleanly load. You can also do this by hand or do it per page with an online tool that will generate the styles for a given published page. It may not be perfect and you may need to add back in some styles, but this approach is usually the most time-efficient. Some online tools to explore are Pegasaas, web.dev, or Sitelocity.

Need Help with Slow Website Loading?

Software Harmonics, LLC can help! We’ve done it many times for our sites and our clients, so we are experts in all of the little details. For example, something you may not even think about is if you are testing on redirects. We’ve learned from that mistake so you don’t have to! 

Not sure where to start? Give us a call or sign up for a call with our web experts for a free Website Optimization Assessment. We will give you our recommendations and we can make a game plan from there. Let’s work together to level up your web game! 


Want to get our blog posts delivered directly to your inbox? Sign up for our mailing list here.