NB: since the answer to this could involve JavaScript or PHP programming, or general networking, or IT systems, I put it here, but if some mod thinks it's better suited for SuperUser or ServerFault, I won't object to it being moved.
I have a landing page to which I'm driving traffic through PPC. I've set up AWS CloudWatch to get RUM data, and the page is performing terribly — an average load time of 9.9s and max of 21.5!
I've done all of the "standard" optimization I can think of or research. The site is built with WordPress, running on Apache on an EC2 server. I've
Upgraded the EC2 instance to ensure I have enough memory
Written a custom plugin to filter out any other plugins that aren't explicitly used on the landing page in question
Customised my theme code so that it sets proper srcset and creates the correct image sizes on upload
Minified all the JS and CSS that I include through plugins or themes I've written
Put the site itself as a distribution to CloudFront
Installed the WP Super Cache plugin, and created a separate CDN distribution on CloudFront for it
Set appropriate cache control headers on CloudFront and told it to gzip everything
Put a facade in place of any videos
The site is blazing fast for me — "load" is less than 1 second. But my RUM says that's not the case for my users. So, I dug a little deeper. 70.2% of my visitors use Chrome, and 27.7% use other, of which almost 1/3rd are Android Browser — which as I understand it is just some sort of "Chrome Lite" — so nearly 80% of my visitors are using some Chrome variant.
Sure enough — if I load the page on Safari (to ensure nothing has expired on CloudFront), clear my browser cache, and reload the page, the first request shows a waiting time of 21.2ms, TTFB of 22.6ms, and download time of 4.8ms. The whole page shows that it's finished loading in 973ms.
Firefox is slightly slower, with the first request taking 100ms total, and the whole load about 1.75s — not blazing fast, but still within the understood "2 second" limit for good user experience.
On the other hand, for Chrome that same first request takes almost 570ms waiting and 208ms download. So, just the first request (which is 36k in size) takes almost as long to load in Chrome as the whole site takes in Safari. And that repeats for every single request, where both the waiting time and the download time are an order of magnitude slower on Chrome than on Safari (on the same device on the same network):
Whereas on Safari:
I would think "waiting" and "download" times would be primarily network driven, but I can repeat this all day long and the results are the same.
I might just assume that Chrome is not optimized for the Mac on which I'm running it, but, as I said, this all started with RUM data, so it's clearly not that. As much as I might like to, I obviously can't force all of my visitors to swap their Android devices for iPhones. Equally obviously, I can't have an average load time of 10 seconds.
So, why is my site so slow on Chrome? What else can I do to optimize this?
The landing page in question is here: https://www.chrisrichardson.info/lp/prague-b/
Note, a lot of the optimization I've done is for that page in particular, so other pages on the site might perform even worse, but I don't care about that, at least at the moment.
Hahahaha.
OK, just leaving this here for posterity's sake. The 10x latency was because Chrome had preserved in devtools from a previous session throttling to 3G. So, if you stumble upon this problem, check your throttling.
That still doesn't address my RUM issue, however, but I'll open that up as a different question.
Chrome Timing View
The image above show chrome spends most of the time queuing up the request. I am trying to figure out why that is happening to minimize it.
According to chrome developer documents:
A request being queued indicates that:
The request was postponed by the rendering engine because it's
considered lower priority than critical resources (such as
scripts/styles). This often happens with images.
The request was put on hold to wait for an unavailable TCP socket that's about to free up.
The request was put on hold because the browser only allows six TCP connections per origin on HTTP 1.
Time spent making disk cache
entries (typically very quick.)
Number 3 seems to be the most likely problem according to chrome developer documents but I know that only one request is going out at a time so that can't be it. I don't think it is number 1 either because the performance monitor doesn't show a lag from rendering. Maybe it is either 2 or 4 but I don't know how to test that.
Chrome Performance Monitor
I've included a picture of the performance monitor that shows these long tasks where something is happening in the system. These are also a mystery to me and seem related.
Any help is greatly appreciated!
Edit: It seems you can disable the disk cache when you open dev tools and that didn't seem to fix the problem.
I am running performance tests on a webpage and I noticed the network tab of Chrome DevTools has a summary bar at the bottom with number of requests, bytes transferred and finish time. I would like to console.log (or even better log to a file) these values at the end of each test.
I do see a chrome.loadTimes() which has the timing info. Is there something similar to retrieve number of requests and bytes transferred?
Check out the Resource Timing API. It can give you a whole bunch of info on every resource that a page requests. And it's got good cross-browser support, so you can use it to collect some Real User Metrics on your page's load performance in the wild.
This is a screenshot of Chrome's network timing and I'm trying to figure out the "stalled" time of ~250ms. Google's docs say the stalled status is for time spent either waiting for a socket (possibly due to max 6 rule) or time spent negotiating a proxy. However, in my case, this is the only active request (so it's not a max 6 issue), and there is no other network activity on the computer or even the network. I'm also not using any form of proxy or VPN.
I eventually figured out that this "stalled" time disappears if I change from https to plain http, so at first, I figured this was SSL setup time. But if that were the case, why isn't it showing up in the "SSL" section of the timing?
What's causing this "stalled" time taking 30% of the load time?
Edit
I had my buddy on the opposite coast hit the same page and it's worse for him, which suggests that it could be server-proximity related?
HTTPS
HTTP
Is there a way to alert a visitor that the website may load slowly because of their slow connetion?
i.e.
Heads up!
The page seems to be loading slowly becasue of your connection. Please allow extra time for the website to load.
You may download a known payload using ajax. Note down the request begin time and end time. If that is beyond some threshold you may alert the user about slow connection. For example, you download a 100 kb payload. You know under normal situations it takes 2 seconds. You may alert the user about slow network if it goes beyond acceptable threshold of say, 5 seconds. The payload you download need not be a waste request - you may use any ajax request for detecting the slow connections. This will work with one big assumption - your server is always responding quickly under heavy loads too - indicating only source of slow response is because of user's network conditions.