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.
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…
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.
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.
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?)
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.