Slow website, looking for advice

NSG

Joined
Dec 27, 2019
Messages
39
Likes
18
Degree
0
My web design "skills" are beginner at best. I've created two websites through LightSail with a standard Linux/Unix blueprint install and WordPress. I went as light as possible on plugins. I'm less concerned right now about the overall look/feel of the website and more concerned about page speed and reliability. The website is very photo heavy which I think is causing a lot of the problems. I'm currently hosting the photos on my LightSail instance.

I checked my pagespeed for a random article and it's showing up as 99 on desktop and 32 for mobile. I'm guessing this has something to do with the theme I chose (used standard 2020 WordPress theme). Even on the desktop version the pictures don't always load consistently.

1) Is there a better way to handle photos? Should I host them on a third-party site and link back?
2) Would I be better off creating a static site?
3) Do I need to start over outside of WordPress and go with a different system?
4) Am I better off just trashing the whole thing and having someone build me a site that actually works and is fast? And if that is the case, how do I find a reputable web builder that isn't going to rake me over the coals in costs or create something worse than I have now?

Thank you :-)
 
1) You can lower your picture size with tinypng.
Moving your pictures to a subdomain could also help. I don't know the technical reason. I learned this from the websites that evaluate your pagespeed.
A CDN (Content Delivery Network) could also speed things up.

On the websites where you do the speed tests, they usually give more info on what the problems are.
Following their suggestions will get you a long way.

2) Static site is not needed. You could, but I don't see the point.

3) WordPress is fine. I use BuSo Lightning as my theme, but as long as your theme isn't bloated you should be fine.

4) Learning how to do this properly will pay off in the long run. It's not impossible, especially when you have access to a forum like this.

Take a loot at the BuSo Crash Course.
Mainly, page speed optimization.

If it is all too technical you could hire somebody, but I advise learning the basics.
The plugin Autoptimize could help as well.
 
Thanks @WinMore! I'll go back and re-read the page speed optimization section. I fully credit this site for getting me as far as I have on my own. At some point if I truly want to be successful I know I'll have to start outsourcing some of this work. But I'm also stubborn and would really like to figure it out for myself so I know the right questions to ask.
 
It may not be the speed giving you a bad score so much as things like Cumulative Layout Shift, etc.

But since you're image heavy you're going to want to rely on:
  • Optimizing image quality - I use Kraken.io these days.
  • Image resolution size - Only load the size needed to be shown. The theme should be doing this, creating various sizes and only loading the biggest one needed.
  • Lazy loading - I would be lazy loading so it defers the loading of the images till needed and they aren't render blocking. But what you need is to make sure you're loading images from the Media Library so that they include the width and height inline in the HTML. This will tell the browser to carve out an empty space of 300x400 (for example) so when the image loads it doesn't cause the rest of the page to be bumped downward (layout shifting).
 
As @Ryuzaki has said, you should add lazy loading. I've just added `loading="lazy"` to the `img` tag and it works a treat. Set the `width` and `height` set on each `img` tag to get the maximum benefit.

You can also check how big your images actually are: if you're using Chrome, check the developer console (right-click > Inspect). I look at the Network tab, check the Disable Cache checkbox and then reload the page. If you then click on "Img" you'll see exactly how many images were loaded, and their sizes. You'll be able to see if you've got any images which are huge. Personally I try to keep images under 100kb.

When you say images don't load "consistently", what do you mean?
 
  • Like
Reactions: NSG
Thanks everyone for the help. @Ceefax , I had a user report they needed to refresh the page to get the pictures to load. (some didn't load, but some did).

The biggest problem was indeed the photo sizes. I did a test on one of the posts with resized images and the improvement was pretty amazing. I also switched to another theme that seems to be better coded. I'm running around 98/99 on both mobile & desktop now. Working on the other items recommended. Thanks again!
 
>We use the following stack for all our projects:
1. Digital Ocean Droplet
2. Cloudflare
3. WP Rocket
4. Shortpixel
5. Generate Press Theme

For most projects, in the first 6 to 12 months this is all the speed optimization that is needed.
 
You can follow this speed optimization Steps Listed below:

  • Use a Content Delivery Network (CDN)
  • Move your website to a better host.
  • Optimize the size of images on your website.
  • Reduce the number of plugins.
  • Minimize the number of JavaScript and CSS files.
  • Use website caching.
  • Implement Gzip Compression.
  • Database optimization in CMS.
Here is a site where i did some of the part of speed optimization and got result from it.

I hope this helps.
 
  • Like
Reactions: NSG
I'm not affiliated with them but you should have a look at Nitropack.io. I'm getting 99/100 on all of my WP sites with them. However this is a subscription based service, but it's worth every penny in my opinion.

Earlier this year I spent weeks to get my sites better manually via WP Rocket, Shortpixel etc. I wish I had discovered Nitropack before that time.

These guys are going to back so insanely hard when the Core Web Vital update comes out somewhere in the next months.

The image below is in Dutch but it speaks for itself I think:

image.jpg
 
What does the rest of you think about Nitropack?

Seems weird they can just get 100% mobile by flipping a switch.

I'm skeptical.
 
CBDOil said:
It works.
Click to expand...

It works in the sense of giving high Page Speed Insight scores, but it seems obvious to me that there are some shenanigans going on and with googling, it seems they do some shady shit.

Probably going to pass on this.
 
bernard said:
It works in the sense of giving high Page Speed Insight scores, but it seems obvious to me that there are some shenanigans going on and with googling, it seems they do some shady shit.

Probably going to pass on this.
Click to expand...
Elaborate?
 
If it's too good to be true?

I mean, installing a plugin, pressing a button and going from 40 to 99 in Page Speed Insights?
 
MrMedia said:
Designed to hook in tech noobs like me.
Click to expand...
It was recommended by Authority Hackers.

The thing is, it probably works - for now, or AH wouldnt have recommended it.

Blackhat? Maybe.
 
"To confuse Google tests, NitroPack is postponing all JavaScript execution. It destroys the visual appearance of pages with dynamic content and presents static content without interactive functionality. It will take extra two seconds after the first click on a mobile device’s menu button to parse JavaScript files. Only after that unwelcome delay, your menu buttons will start responding correctly."

-----

This means that they not loading any Javascript at all, which means if any of the look or FUNCTIONALITY of your site depends on Javascript or jQuery it's going to look and act messed up. Like mobile menu's being expanded from the start, mega menu's looking all crazy, and that's just the header.

Let's assume that they're doing this just for Googlebot and not users. That might fool the pagespeed tests but it's not going to fool the Lighthouse measurements for the Core Web Vitals. In fact it's going to make it a lot worse. The first input delay is going to be astronomical (several seconds in the best case scenario).

If they're doing it for everyone and not just Googlebot (doubtful but I figure I'd mention it) then your Cumulative Layout Shift is going to be 100% most likely.

This plugin or whatever sounds like a great way to sabotage your Core Web Vitals unknowingly while thinking you fixed your page speed.
 
NSG said:
My web design "skills" are beginner at best. I've created two websites through LightSail with a standard Linux/Unix blueprint install and WordPress. I went as light as possible on plugins. I'm less concerned right now about the overall look/feel of the website and more concerned about page speed and reliability. The website is very photo heavy which I think is causing a lot of the problems. I'm currently hosting the photos on my LightSail instance.

I checked my pagespeed for a random article and it's showing up as 99 on desktop and 32 for mobile. I'm guessing this has something to do with the theme I chose (used standard 2020 WordPress theme). Even on the desktop version the pictures don't always load consistently.

1) Is there a better way to handle photos? Should I host them on a third-party site and link back?
2) Would I be better off creating a static site?
3) Do I need to start over outside of WordPress and go with a different system?
4) Am I better off just trashing the whole thing and having someone build me a site that actually works and is fast? And if that is the case, how do I find a reputable web builder that isn't going to rake me over the coals in costs or create something worse than I have now?

Thank you :-)
Click to expand...
@NSG

The site doesn't need a complete overhaul.

Look at speed at a step-by-step process to improve it.

A VPS host is going to deliver faster speeds than shared hosting.

Using a CDN can cost as little as $1/month and can speed images and static files. Bunny.net is a good place to start. They have a plugin to make setting it up a breeze. Also, can block traffic from malicious countries that are doing more attempted hacking than visiting.

Use a thumbnail setup for YouTube embeds, like the Lazy Load for Videos plugin (it's free).

The WordPress theme makes a huge difference to speed. GeneratePress or Astra is quick.

Lastly, use a static caching plugin like the WP-Optimize plugin to generate static HTML pages to speed up page loading for first-time visitors.
 
  • Like
Reactions: NSG
don't overestimate "web core vitals".
Do have checked google's own sites with these checkers? you would be surprised.

if you have a solid foundation.
WordPress, WP Rocket, a good Hoster, a CDN like Cloudflare and Optimize your Graphics, you get Good Scores.

btw. it's interesting that the Authority Hacker Guys launched only for the "web core vitals" a new course. :D

it's kind of funny. people think really if you have 100/100 you get such a ranking boost. haha...
 
bestresources said:
@NSG

The site doesn't need a complete overhaul.

Look at speed at a step-by-step process to improve it.

A VPS host is going to deliver faster speeds than shared hosting.

Using a CDN can cost as little as $1/month and can speed images and static files. Bunny.net is a good place to start. They have a plugin to make setting it up a breeze. Also, can block traffic from malicious countries that are doing more attempted hacking than visiting.

Use a thumbnail setup for YouTube embeds, like the Lazy Load for Videos plugin (it's free).

The WordPress theme makes a huge difference to speed. GeneratePress or Astra is quick.

Lastly, use a static caching plugin like the WP-Optimize plugin to generate static HTML pages to speed up page loading for first-time visitors.
Click to expand...
I just redid my sites using the NEVE theme. many people have analyzed and speed tested it and it’s designed mobile first. It is FREE and there is a paid version. I don’t like to create my own websites either and was very unhappy with all of the technical hell I’ve been in the last few weeks.

also FWIW I had generatepress on one site and tested Astra too. The never theme builder and started sites are MUCH easier to use.

i had major issues too and realized that w all of the problems Ezoic was saying I had, that there was no way to fix them w the premium theme I was using, feom one of the top WP theme vendors.

hope this helps…
 
I actually posted about making my sites faster in another forum, I'll post it here too - hope it helps:

So you know that Core Web Vitals (CWV) thing everyone’s panicking about? Well I managed to get 7 sites with different tech stacks to pass - on mobile and desktop! All without doing anything too techy – no developers round here! And as a give back to the community I thought I’d share how I did it so hopefully others can do the same.

P.S. I’m not a tech guy, just an online publisher who suffered weeks of headaches trying to figure this stuff out. If I use some incorrect terminology, feel free to let me know and I’ll change it. I’m not an expert and I’m still learning, but hopefully you’ll get some value. Now let’s get started:

• Get your tech stack right. If you’re trying to pass on an old, bloated tech stack… good luck! The below tools are proven to be CWV friendly. I’m sure there are alternatives to all of these, but these are what have worked for me after lots of trial and error:

‣ Cache: WP Rocket. My new favorite tool, blows the competition out of the water. Much more than a cache plugin.

‣ CDN: Cloudflare Free plan + Cloudflare APO. Reduced initial load time and makes your site faster worldwide.

‣ Images: ShortPixel. Compress those bloated images baby! I mean, who cares about image quality anyway?!

‣ Hosting: WPX. Fast hosting at a good price, nice.

‣ Theme: Needs to be fast. I’ve passed with Kadence (my fave), GeneratePress (fastest apparently) and the Genesis theme ‘Milan Pro’. I’m sure there are others that’ll work too, I just haven’t tried them.

So now you’re kitted out, but it’s not all about the tech, oh no. To pass there are a number of other things you need to do:

• Remove old code and CSS. These can cause CLS issues, blocking issues and more. So have a look at all the code on your site and see if any can be gotten rid of. E.g. I had old MailChimp code though I now use Active Campaign. I also had Facebook Like Box code and CSS which shifted my line height. All gotten rid of.

• Add video dimensions. This stops CLS issues.

• Remove excess plugins. If it doesn’t either make you money, increase your security or make your site faster, why have it? Oh, it makes your button more shiny? Shame on you!

• Optimize image size. Both in terms of dimensions and compression as mentioned above. Don’t have bigger than needed. Save compressed even before you upload to WordPress.

• Avoid most lead gen plugins. Ones I’ve used slow down your site a LOT. I now use opt-in code from Active Campaign and style with Kadence Blocks. Side note, if you have a lead gen plugin [with a lightbox / pop up feature] and are still able to pass on mobile, please let me know which you use so I can try it out. :smile:

• If you’re using AdThrive or Mediavine, use all their CWV related tools. With Adthrive especially this can take you from miserably failing to passing on mobile.

And… that’s it! Hopefully by now you pass Core Web Vitals.

Of course, there will always be some plugins or scripts that can stop you getting a passing grade, I’ve seen lead gen plugins to be a big barrier for example. But likely the above changes will greatly speed up your site, and unless you’ve got a trillion plugins, there’s a good chance you’ll now have a passing grade.

So, any questions? If I can help I will. And when the world opens up and everyone’s traveling again, you can buy me an orange juice as a thank you. :smile:
 
You must log in or register to reply here.
Back