I've been doing web development for a summer camp now for 6 months, and I have had a lot of trouble understanding why our site loads so slowly.

Even simple pages without much content are taking 10+ seconds to load! Parents and frequent users of the site have complained, our bounce rate is 50% which I think is far too high and is related to this issue. I want to resolve this issue once and for all.

My boss still has the person who initially created the site under contract, and I've reached out to him about the issue. He says from his end, there is nothing else he can do to make it load quicker. I can't imagine this to be the case when other sites with sometimes far more content are loading much faster!

Some comments: I have compressed all files to levels I believe are sufficient (all pictures are below 100KB where possible). We do not have many WordPress plugins installed or active, and those that are do not have reported issues causing sites to slow down this much.

Hi,
if you look in the "Performace review" of the test it is showing:
Compress Images: 100/100
58.7 KB total in images, target size = 58.7 KB - potential savings = 0.0 KB

I think this is "miss-leading" because you are using png-files for the slider.
(In using png this test cant show you the better results)
And this is a problem - because here you can do the most - very easy!
The slider-images on the index-page are not optimized.
In the "waterfall" you see the long blue bars from the png-files (images) .

I think they are much to heavy. (Click of each blue bar and you see file size)
One example:http://campvoyageur.com/wp-content/uploa...ne2-01.png
has nearly 1.3 MB (loading time 9119ms!)
If you try this free online compression tool ( https://tinypng.com/ )
you come from 1.3 MB to 433 kB (lossy png compression but good!)
But better is using jpeg-Format for the image-slider - you get smaller file sizes (but optical good results)
In Photoshop you get this 1.3 MB Image to 260KB in a good quality saved as jpg.

Next big thing "Time To First Byte" (TTFB) ist too long with 3sec.
May be a problem of the hoster because of a "slow database".
Normally I have about 0.2 sec TTFB with static html-files.
There is are some WP-Plugins which offers static html-files for better performance. Example: https://de.wordpress.org/plugins/wp-super-cache/

Greets from Germany
(Interesting site you made - hope you get it faster)

Your main problem is bloat. How fast does anyone expect over 5.6 megabytes to load on a browser? That is equivalent to a five and a half minute CD quality mp3 file! Show me a fat site and I will show you a slow site, every time.

First main way to address this bloat is by following the suggestions in the post above about optimizing these images. The massive png image pointed out above needs to be turned into a progressive jpg since it's not a transparency or anything special. This will eliminate 1mb of load right there without changing anything else!

You're also scaling these images in the code to appear smaller in dimensions than they are, on the rendered page. But this does not affect the file size of these images - the entire image still loads on the browser no matter how small you make it appear to be.

Also - every image in your slideshow loads regardless of what the visitor is actually seeing.

IE11 is seeing even more calls and more MB than IE 10 you used to test, is.

I'll go ahead and compress all these images. To be honest, I'm shocked that the guy who was contracted to build the site had not compressed it (I assumed he had). The site in general (since I have worked on it) has been sloppy to say the least. The file management is just a mess, and the way he built some of the pages just doesn't make sense to me.

But what's the deal with this First Byte time? I mean he insists that there is nothing he can do about it. I know we are hosted through him somehow. A little background on the guy: he runs an independent operation in TN, had a career change and has recently started doing web development/marketing. My boss pays him a monthly fee (not sure what he pays) and he manages the hosting, etc.

Again, I appreciate the feedback. I wish I was a little more savvy as to the technical aspects of our site.

(01-05-2016 06:04 AM)campvoyageur Wrote: [ -> ]But what's the deal with this First Byte time? I mean he insists that there is nothing he can do about it. I know we are hosted through him somehow. A little background on the guy: he runs an independent operation in TN, had a career change and has recently started doing web development/marketing. My boss pays him a monthly fee (not sure what he pays) and he manages the hosting, etc.

Well, lets first get the bloat addressed. Let's fix the seconds of load time, then sweat the milliseconds FBT represents. You should be able to get this pageload down to just over 1mb total still using all your images and slideshow and all.

Just turn all those large png images into progressive jpegs, and upload them in place of these monsters. Then let's see where we are.

You may want to consider installing some RUM performance tracking like SOASTA's mPulse (free) which will give you more visibility into the timing from users visiting the site. From the looks of the 2 tests you provided, I'm guessing that there is a lot of variability in the back-end timing (FBT) and when it is really slow that is causing the really slow times that people are reporting.

Clicking around a bit I regularly see 2-3 second delays in getting the base page back and that's making it feel excruciatingly slow, even on a fast connection. Going into the blog was on the order of 20-30 seconds.

After hitting one of the pages, running tests against it were somewhat faster which looks exactly like a slow database (first visit triggered the queries to get cached so subsequent visits were less painful). Since he is doing the hosting, fixing that is 100% in his hands. Simply throwing the database onto a SSD instead of slower disks would solve most of the issue.

I'm assuming he also built or at least deployed the wordpress theme for you. If so then automatically resizing the images to an appropriate size is also his responsibility. There are plugins that can help but from a quick search it also looks like the theme can specify it explicitly: http://www.buckleupstudios.com/blog/auto...necessary/

I couldn't replicate the long 20-30s load times so I can't say what was causing that (whether it was the FBT or further along the waterfall). However I'd recommend installing a page caching plugin such as Super Cache, W3 Total Cache to help to reduce the first byte time. If properly configured correctly it should make a significant difference for most users.

The second main issue is the fade in transition between pages. The page can actually begin to render a lot sooner than it currently is. Right now it looks like it's waiting for all the resources to load before rendering the page. This should help to make the website appear to load a lot quicker for users but won't affect the overall load time.

Optimizing the images as per above recommendations will also help.

If you still have a lot of variability in the load time (especially for the FBT) when browsing the site after making the above changes, then upgrading to a faster should address this.

The FIRST and really only main issue is the bloat. You cannot reasonably expect good performance when you are loading over 5 and a half MEGABYTES on browsers. Fix this first, then sweat the small stuff.