Another obscure question about my client’s website that I can’t post much about here…
When pages load (e.g Category page for articles on trucks), it often looks like the page is being assembled top to bottom, which looks weird.
When I go to professional sites, what I see “above the fold” all seems to load at the same time.
What is going on, and is what I am seeing a sign that I screwed up my client’s entire website?! 
The page IS being assembled top to bottom (browser reads top to bottom.)
Do you have any sort of caching system in place? Cloudfare? I don’t believe any special tricks exist aside from increasing your page load time. Might be wrong though.
I’m feeling really down right now… 
Sometimes I just don’t think I have what it takes to be like all of you.
I have put so much efort into this clients site, and it looked great in Dev, but now I feel like a real loser developer, and I feel that everything from my database design to PHP to web design could be broken…
No, I don’t have any caching system in place. But even if I did, I don’t think that would help the issue I see on initial loads…
Maybe your server just is slow to respond.
View non-big name websitse. Random “susy selling lemonade” type websites. Do they load fast and all at once?
Some load fast, others not. Some load all at once, others load in parts.
It sure seems to me like if my client’s website was architected better or coded better, it would load all at once like big sites.
Sounds like images were loaded instantly from Dev but need to come across HTTP on the live site.
Have you optimized the images for the web?
I wanted to try this technique and searches only revealed that it is possible by using JavaScript…
If the problem is only with image assets loading slowly consider optimizing them more and/or using a dedicated cdn. There are a vast sea of optimizing techniques but that is where I would recommend beginning. Consider using a page analysis tool to pinpoint issues with things taking long to load.
The typical use case there are components that are secondary to the main content like sidebar items. Deferring secondary content such as; sidebar blocks which don’t have much of an impact on SEO to AJAX has the potential to significantly reduce first response time. Furthermore, when content served isn’t unique static caching can be used to avoid hitting the server at the all using something like varnish or a static caching layer in front of the site.
However, these are all techniques that really only prove necessary for sites with a very high traffic that already run the dedicated servers. If you’re running a site on a shared server and you are running into performance issues due to volume than it is time to move to a dedicated server either virtual or physical. No level of caching is going to make up for sharing resources with a gazillion other websites hosted on the same hardware and/or environment. I haven’t worked on a site without several caching in several years. Realistically it is a necessary means to an end for high traffic, dynamic websites.
Though the push toward REST and JavaScript frameworks tends to be partially a direct reaction to the limited performance adjustments that can be made by mixing presentation with logic as with traditional HTML pages. The only means of combating the bloat incurred by full pages of HTML is to load pieces and/or implement caching layers. You might also look into edge side includes but the server has to support them.
Out of 22 images, one is 135KB, one 72KB, one 51KB, and the rest under 20KB.
What is an acceptable image file-size?
What is an acceptable page file-size?
Is there some tool that will tell me how big each page is?
Any free ones?
Is varnish an app?
(I’m looking for free, open-source solutions…)
This website is loaded on a VPS with ONE user one it (i.e. Me)!!!
If I was using MVC would this improve?
Varnish is a caching middle ware which you would install on your server and implement on the website.
https://www.varnish-cache.org/
Using JavaScript MVC framework would typically improve performance because you’re sending a limited amount of data back from server that typically won’t include presentation. Though it depends. The same mistakes can always be made so you you have to know what to avoid to start.
It is difficult to speak in generic terms but it sounds like your VPS is just slow. If you’re having issues with a single user than there is something physically wrong with the set-up and/or environment. Though the image size might be the cause as well if the everything loads fine except for images.
How hard is it to install and configure?
Typically how much difference does it make?
You’re mixing of terms confuses me.
When I said MVC, I meant like rewriting my PHP using an MVC architecture.
What does JavaScript have to do with that??
So how would I know if what I perceive to be slow is indeed to slow?
Per the title of this thread, what annoys me is how it looks like a dot-matrix printer is creating the page?!
For instance, on my Article Summary page, I have several Categories and each one has a thin gray border and links to articles inside it, with a thumbnail to the main articles.
When you go to that page, the top 1/4 loads instantly, but then it looks like each Category below it is one of those lists where you click on some “+” sign and it expands. And then the right page column - which is purely text - looks like it is being draw by a dot-matrix printer at the very end.
That is with just me on the website.
(I have HORRIBLE wireless connectivity where I am now, but that shouldn’t impact how the page loads, or would it?)
So what is an acceptable file-size for photos?
That would most definitely impact how fast things load and is the likely root cause.
To optimize the images I would just go into Photoshop and optimize for web with about 75% of compression or so. Once that is done check the size of the generated image in relation to the current size. If the difference is significant than perhaps the images haven’t been optimized for web. If you received the images directly from the client than it is highly likely that they are not optimized for web. So that is something to confirm. Confirming that can be done with just going through the process I mentioned for three or so random photos on the page.
But it wouldn’t cause the page to load in parts…
How would I do that in Gimp? (Photoshop is not an option.)