Steps in loading a Wordpress page

Web Performance Discuss Test Results
1

I just want to make sure that I clearly understand the process of loading a Wordpress page or I guess any basic PHP page. Below is how I understand it:

  1. DNS Lookup
  2. Initial Connection
  3. PHP is parsed
  4. DB Queries are requested to retrieve data
  5. External Files are requested (TTFB)
  6. Execute header JS/CSS
  • DNS Lookup (* if not on same server)
  • Initial Connection
  • Getting the file (TTFB)
  • Downloading the file
  1. Execute inline JS/CSS
  2. Start Render (body HTML/images/other media files)
  • DNS Lookup (* if not on same server)
  • Initial Connection
  • Getting the file (TTFB)
  • Downloading the file
  1. Page Complete

Does this seem about right?

2

You’re kind of mixing things that are done on the front-end (browser) and back-end (php server/wordpress) so it’s a bit confusing.

From the Browser’s perspective:

1 - DNS lookup
2 - Initial Connection
3 - Send HTTP Request
…This is where the web server does it’s thing (PHP parsed, database queries, etc)
4 - HTML for the base page is received
5 - Parse the HTML, load resources as needed (each resource can include it’s own DNS lookup, initial connect, request and download)

  • Execute any script tags as they are encountered
  • At some point after everything in the head has been processed and there is enough parsed content to display the initial render is done
  • After everything that was referenced by the HTML, referenced by CSS or inserted by Javascript has finished loading then the “load” event fires (traditional page complete)
3

Thank you for the explanation. Basically, what I am trying to do is combine three things. 1) How a traditional page loads, 2) How Wordpress page loads and 3) How it all fits into webpagetest.org report. So far this is what I have:

  1. Resolving the DNS for the domain of your initial request (yourdomain.com)
  2. Creating a TCP connection to the resolved webserver, which in turn translates your request into a bunch of filesystem lookups, looking for the file you requested.

…now begins the WordPress specific process:

  1. WordPress loads a bunch of PHP files
  2. Various Database calls are made to load your configuration settings.
  3. Your Theme is located and loaded.
  4. Your Plugins (according to your configuration) are loaded
  5. The render process begins, which can include many more MySQL queries and the webserver outputs HTML
    This is the end of the WordPress process, it is a single call.

Now your browser takes over:

  1. Your browser interprets and parses the HTML returned by the webserver.
  2. It looks for any external dependencies, usually images, javascript includes and css includes.
  3. For every single external dependency, the browser loads each file/image with it’s own TCP connection over the HTTP protocol (port 80 typically)
4

The “wordpress” part as far as WebPagetest is concerned is all in the first non-redirect request in the waterfall. Everything else falls into stuff the browser does based on what the HTML sent back from wordpress tells it to do.