How this site works

Done once, before anyone visits: pages, photos and code are prepared as plain files.

1. Pages rendered once

   Every page is turned into finished HTML at build time; the server never assembles pages.

   Before your visit

   Starts

   • Find the file (Server): Published before any visit. Carries: Finished HTML files

2. Code bundled

   Scripts and styles are bundled into files whose names change when their content changes.

   Before your visit

   Starts

   • Cache rules (Server): Content-named files. Carries: A changed file gets a new name, so old copies can be kept a year

3. Photos prepared

   Each photo is saved as AVIF, WebP and JPEG at several widths, plus a tiny blurred preview.

   Before your visit

   Starts

   • Right file chosen (Images): Photo sets ready. Carries: AVIF, WebP and JPEG at several widths
   • Blurred preview (Images): Preview written in. Carries: 16 px blurred WebP inside the HTML

4. Filtered menus

   Four filtered menus are pre-built, so filters work even with scripts off.

   Before your visit

   Starts

   • Menu filters (Scripts): Filter already applied. Carries: The page says which diet it shows

Your browser finds the server, opens a secure connection and asks for the page.

1. Find the address

   The browser looks up which server answers for gata.ibaocchristian.com.

   While loadingBrowser’s own work

   Starts

   • Secure connection (Request): Address found. Carries: Where the server is

2. Secure connection

   An encrypted connection opens (HTTPS over HTTP/2; HTTP/3 offered for later requests).

   While loadingBrowser’s own work

   Started by

   • Find the address (Request): Address found. Carries: Where the server is

   Starts

   • Ask for a file (Request): Connection open. Carries: Encrypted HTTP/2

   In the replayed run: First byte at 0.00 s (Desktop, broadband) · 0.00 s (Mid-range Android, slow 4G) · 0.00 s (Same phone, slow 3G)

3. Ask for a file

   A GET request names the file and the compression the browser understands.

   While loadingBrowser’s own work

   Started by

   • Secure connection (Request): Connection open. Carries: Encrypted HTTP/2
   • Cache rules (Server): Next visit. Carries: Page re-checked (tiny reply if unchanged); bundled code reused without asking
   • Fetch early (HTML): Files requested. Carries: Same connection, side by side
   • Wait until near (Images): Photo requested. Carries: One file: best format, right width

   Starts

   • Read-only check (Server): GET request. Carries: Path and accepted compression (zstd, gzip)

A small web server sends the ready-made file. No database, no code runs per visit.

1. Read-only check

   Only reading is allowed; any attempt to send data is refused.

   While loading

   Started by

   • Ask for a file (Request): GET request. Carries: Path and accepted compression (zstd, gzip)

   Starts

   • Find the file (Server): Allowed. Carries: The path

2. Find the file

   The ready-made file is looked up; a folder means its index.html; hidden files are never served.

   While loading

   Started by

   • Pages rendered once (Build): Published before any visit. Carries: Finished HTML files
   • Read-only check (Server): Allowed. Carries: The path

   Starts

   • Safety headers (Server): File found. Carries: The file and its type

3. Safety headers

   Headers enforce HTTPS and allow scripts, fonts and images from this site only.

   While loading

   Started by

   • Find the file (Server): File found. Carries: The file and its type

   Starts

   • Cache rules (Server): Safety headers set. Carries: HTTPS-only, content policy, no framing by others

4. Cache rules

   Pages are re-checked on every visit; bundled code is kept a year; photos and fonts a day.

   While loading

   Started by

   • Code bundled (Build): Content-named files. Carries: A changed file gets a new name, so old copies can be kept a year
   • Safety headers (Server): Safety headers set. Carries: HTTPS-only, content policy, no framing by others

   Starts

   • Compress (Server): Cache rule set. Carries: How long the browser may keep it
   • Ask for a file (Request): Next visit. Carries: Page re-checked (tiny reply if unchanged); bundled code reused without asking

5. Compress

   Text files are compressed (zstd or gzip) before they travel.

   While loading

   Started by

   • Cache rules (Server): Cache rule set. Carries: How long the browser may keep it

   Starts

   • Read the HTML (HTML): Response. Carries: Compressed HTML, status 200 (404 for unknown pages)
   • Short log (Server): Logged. Carries: Time, address, method, path, status

6. Short log

   The request is logged for a short period, as the privacy notice says.

   While loading

   Started by

   • Compress (Server): Logged. Carries: Time, address, method, path, status

The browser reads the page top to bottom and builds its structure.

1. Read the HTML

   The parser reads the page as it streams in and builds the document.

   While loadingBrowser’s own work

   Started by

   • Compress (Server): Response. Carries: Compressed HTML, status 200 (404 for unknown pages)

   Starts

   • Fetch early (HTML): Files spotted early. Carries: Stylesheet, font files, first script, page scripts
   • First tiny script (HTML): Reading pauses. Carries: Waits for theme-init.js to arrive and run
   • Content complete (HTML): Content in place. Carries: Text, menu, hours and links
   • Right file chosen (Images): Photo slots found. Carries: Formats, widths and slot sizes
   • Document ready (HTML): End of document. Carries: Page scripts may now run

   In the replayed run: First byte at 0.00 s (Desktop, broadband) · 0.00 s (Mid-range Android, slow 4G) · 0.00 s (Same phone, slow 3G); html received at 0.05 s (Desktop, broadband) · 0.62 s (Mid-range Android, slow 4G) · 2.21 s (Same phone, slow 3G); dom interactive at 0.11 s (Desktop, broadband) · 1.23 s (Mid-range Android, slow 4G) · 4.30 s (Same phone, slow 3G)

2. Fetch early

   The browser spots the stylesheet, fonts and scripts early and requests them together.

   While loadingBrowser’s own work

   Started by

   • Read the HTML (HTML): Files spotted early. Carries: Stylesheet, font files, first script, page scripts

   Starts

   • Ask for a file (Request): Files requested. Carries: Same connection, side by side
   • Stylesheet (Styles and paint): Stylesheet arrives. Carries: One CSS file, compressed
   • The font (Styles and paint): Fonts arrive. Carries: Two WOFF2 files
   • Page scripts start (Scripts): Scripts arrive. Carries: Bundled JavaScript, compressed

3. First tiny script

   A small script runs before the first paint; reading pauses until it arrives.

   While loading

   Started by

   • Read the HTML (HTML): Reading pauses. Carries: Waits for theme-init.js to arrive and run
   • Dismiss notice (Your actions): Next page, this tab. Carries: Notice hidden before the first paint

   Starts

   • Script-ready look (Styles and paint): Classes on the page. Carries: "js"; "sd" (Save-Data); notice hidden if dismissed; scrollbar size; entrance flag

   In the replayed run: Scripts on at 0.11 s (Desktop, broadband) · 1.22 s (Mid-range Android, slow 4G) · 4.29 s (Same phone, slow 3G)

4. Content complete

   Text, menu, hours and links are all in the HTML, readable without any script.

   While loading

   Started by

   • Read the HTML (HTML): Content in place. Carries: Text, menu, hours and links

   Starts

   • Extra letters (Styles and paint): Character needs it. Carries: For example ₱ (U+20B1)

5. Document ready

   Parsing ends, the page scripts run, then DOMContentLoaded fires.

   While loadingBrowser’s own work

   Started by

   • Read the HTML (HTML): End of document. Carries: Page scripts may now run
   • Page scripts start (Scripts): Scripts finished. Carries: Then DOMContentLoaded fires

   In the replayed run: Document ready at 0.15 s (Desktop, broadband) · 1.44 s (Mid-range Android, slow 4G) · 5.13 s (Same phone, slow 3G)

One stylesheet and a font decide how it looks; then the browser draws it.

1. Stylesheet

   One stylesheet for the whole site; nothing is drawn until it has arrived.

   While loading

   Started by

   • Fetch early (HTML): Stylesheet arrives. Carries: One CSS file, compressed

   Starts

   • First paint (Styles and paint): Stylesheet ready. Carries: Nothing is drawn before this
   • Page scripts start (Scripts): Scripts wait for styles. Carries: Page scripts run only after the stylesheet

2. The font

   The font loads early; text shows at once in a size-matched stand-in, then swaps.

   While loading

   Started by

   • Fetch early (HTML): Fonts arrive. Carries: Two WOFF2 files

   Starts

   • Largest paint (Styles and paint): Font swaps in. Carries: Text redrawn in the real font; stand-in was size-matched

   In the replayed run: Fonts ready at 0.27 s (Desktop, broadband) · 2.36 s (Mid-range Android, slow 4G) · 7.78 s (Same phone, slow 3G)

3. Extra letters

   A second font file loads only if the page uses a character from it, such as ₱.

   While loading

   Started by

   • Content complete (HTML): Character needs it. Carries: For example ₱ (U+20B1)

4. Script-ready look

   A class set before the first paint switches on controls that need scripts, with no flash.

   While loading

   Started by

   • First tiny script (HTML): Classes on the page. Carries: "js"; "sd" (Save-Data); notice hidden if dismissed; scrollbar size; entrance flag

   Starts

   • First paint (Styles and paint): Right controls at first paint. Carries: No flash of the no-script layout

5. First paint

   The browser first draws text and colour on the screen.

   While loadingBrowser’s own work

   Started by

   • Stylesheet (Styles and paint): Stylesheet ready. Carries: Nothing is drawn before this
   • Script-ready look (Styles and paint): Right controls at first paint. Carries: No flash of the no-script layout
   • Blurred preview (Images): Preview paints too. Carries: Inside the page, no extra request

   Starts

   • Largest paint (Styles and paint): More is drawn. Carries: Largest block in view so far

   In the replayed run: fp at 0.21 s (Desktop, broadband) · 1.61 s (Mid-range Android, slow 4G) · 5.10 s (Same phone, slow 3G); First paint at 0.21 s (Desktop, broadband) · 1.61 s (Mid-range Android, slow 4G) · 5.10 s (Same phone, slow 3G)

6. Largest paint

   The biggest text block or photo in view is drawn; which one is measured per page.

   While loadingBrowser’s own work

   Started by

   • First paint (Styles and paint): More is drawn. Carries: Largest block in view so far
   • The font (Styles and paint): Font swaps in. Carries: Text redrawn in the real font; stand-in was size-matched
   • Fade in (Images): Photo arrives. Carries: Fades in over its preview (300 ms, set in code)

   In the replayed run: Largest paint at 0.21 s (Desktop, broadband) · 1.61 s (Mid-range Android, slow 4G) · 5.10 s (Same phone, slow 3G)

Small scripts add live time, controls and motion. Everything is readable without them.

1. Page scripts start

   Bundled scripts download in parallel and run in order once the HTML is read.

   While loadingBrowser’s own work

   Started by

   • Fetch early (HTML): Scripts arrive. Carries: Bundled JavaScript, compressed
   • Stylesheet (Styles and paint): Scripts wait for styles. Carries: Page scripts run only after the stylesheet

   Starts

   • Document ready (HTML): Scripts finished. Carries: Then DOMContentLoaded fires
   • Notice button (Scripts): Step 1
   • Pages menu (Scripts): Step 2
   • Open-now badge (Scripts): Step 3
   • Fade in (Images): Step 5. Carries: Photos not yet loaded are marked
   • Page-only code (Scripts): Step 7. Carries: Checks which page this is
   • Reveal setup (Scripts): Step 8, next frame

   In the replayed run: script eval at 0.11 s (Desktop, broadband) · 1.22 s (Mid-range Android, slow 4G) · 4.29 s (Same phone, slow 3G)

2. Notice button

   The concept notice gets its dismiss button.

   While loading

   Started by

   • Page scripts start (Scripts): Step 1

   Starts

   • Dismiss notice (Your actions): Button wired

3. Pages menu

   On narrow screens, the Pages button opens a sheet that keeps keyboard focus inside.

   While loading

   Narrow screens

   Started by

   • Page scripts start (Scripts): Step 2

   Starts

   • Open Pages (Your actions): Button wired

4. Open-now badge

   Manila time decides "Open now" or "Closed" and marks today in the hours table.

   While loading

   Started by

   • Page scripts start (Scripts): Step 3
   • Minute tick (Clock and page life): Every minute. Carries: Manila weekday and minute (on the minute)

   Starts

   • Minute tick (Clock and page life): Joins the minute tick. Carries: Badge refresh

   In the replayed run: Open-now badge at 0.15 s (Desktop, broadband) · 1.44 s (Mid-range Android, slow 4G) · 5.13 s (Same phone, slow 3G)

5. Page-only code

   Extra code downloads only on pages that need it: menu, gallery and reservation.

   While loading

   Started by

   • Page scripts start (Scripts): Step 7. Carries: Checks which page this is

   Starts

   • Menu filters (Scripts): Menu page found. Carries: Menu code (separate file)

6. Reveal setup

   One frame later, only content below the fold is set to appear as you scroll.

   While loading

   Only with motion allowed

   Started by

   • Page scripts start (Scripts): Step 8, next frame

   Starts

   • Scroll reveals (Your actions): Waiting groups watched. Carries: Below the fold only; line at 90% of the screen
   • Safety net (Clock and page life): Safety timer. Carries: Show everything (2 s, set in code)
   • Keyboard first (Your actions): Focus listener

   In the replayed run: Reveals armed at 0.19 s (Desktop, broadband) · 1.57 s (Mid-range Android, slow 4G) · 5.14 s (Same phone, slow 3G)

7. Menu filters

   The chosen diet (from the page or the address) is applied and the count updated.

   While loading

   Started by

   • Filtered menus (Build): Filter already applied. Carries: The page says which diet it shows
   • Page-only code (Scripts): Menu page found. Carries: Menu code (separate file)

   Starts

   • Diet chips (Your actions): Chips wired. Carries: Active filters
   • Where am I (Your actions): Scroll listener. Carries: Category positions

   In the replayed run: Filters ready at 0.19 s (Desktop, broadband) · 2.01 s (Mid-range Android, slow 4G) · 7.17 s (Same phone, slow 3G)

Photos arrive in the best format and size for your screen, only when needed.

1. Blurred preview

   A tiny blurred version is inside the page itself and shows with the first paint.

   While loading

   Started by

   • Photos prepared (Build): Preview written in. Carries: 16 px blurred WebP inside the HTML

   Starts

   • First paint (Styles and paint): Preview paints too. Carries: Inside the page, no extra request

2. Right file chosen

   The browser picks AVIF, WebP or JPEG at the width your screen needs.

   While loadingBrowser’s own work

   Started by

   • Photos prepared (Build): Photo sets ready. Carries: AVIF, WebP and JPEG at several widths
   • Read the HTML (HTML): Photo slots found. Carries: Formats, widths and slot sizes

   Starts

   • Wait until near (Images): Off-screen photo. Carries: Waits

3. Wait until near

   Photos further down wait until you scroll close to them.

   As you scrollBrowser’s own work

   Started by

   • Scroll reveals (Your actions): Scrolling near photos. Carries: The browser starts their download
   • Right file chosen (Images): Off-screen photo. Carries: Waits

   Starts

   • Ask for a file (Request): Photo requested. Carries: One file: best format, right width

4. Fade in

   A photo that arrives late fades in over its preview.

   After loading

   Only with motion allowed

   Started by

   • Page scripts start (Scripts): Step 5. Carries: Photos not yet loaded are marked

   Starts

   • Largest paint (Styles and paint): Photo arrives. Carries: Fades in over its preview (300 ms, set in code)

Taps, clicks, keys and scrolling. Nothing you do here sends data anywhere.

1. Scroll reveals

   Content rises or draws in once as it nears the screen, then stays still.

   As you scroll

   Only with motion allowed

   Started by

   • Where am I (Your actions): Jump skips reveals. Carries: Sections passed by a jump show at once
   • Reveal setup (Scripts): Waiting groups watched. Carries: Below the fold only; line at 90% of the screen

   Starts

   • Wait until near (Images): Scrolling near photos. Carries: The browser starts their download

2. Keyboard first

   Tabbing into content that has not appeared yet shows it at once.

   When you act

   Started by

   • Reveal setup (Scripts): Focus listener

3. Dismiss notice

   Closing the concept notice hides it for this tab only.

   When you act

   Started by

   • Notice button (Scripts): Button wired

   Starts

   • First tiny script (HTML): Next page, this tab. Carries: Notice hidden before the first paint

4. Open Pages

   The sheet opens; Esc closes it and focus returns to the button.

   When you act

   Narrow screens

   Started by

   • Pages menu (Scripts): Button wired

5. Diet chips

   Filters combine in place; the address updates; nothing is requested.

   When you act

   Started by

   • Menu filters (Scripts): Chips wired. Carries: Active filters

6. Where am I

   Scrolling marks the current category in the sticky bar, once per frame.

   As you scroll

   Started by

   • Menu filters (Scripts): Scroll listener. Carries: Category positions

   Starts

   • Scroll reveals (Your actions): Jump skips reveals. Carries: Sections passed by a jump show at once

A once-a-minute tick keeps the time-based text right; leaving and returning are handled.

1. Minute tick

   One timer on each minute boundary refreshes every piece of time-based text.

   Every minute

   Started by

   • Open-now badge (Scripts): Joins the minute tick. Carries: Badge refresh
   • Leave and return (Clock and page life): pagehide / pageshow. Carries: Stop on leave; refresh and restart on Back

   Starts

   • Open-now badge (Scripts): Every minute. Carries: Manila weekday and minute (on the minute)

2. Leave and return

   Leaving stops the timer; coming back with Back refreshes the time at once.

   Leaving and coming back

   Starts

   • Minute tick (Clock and page life): pagehide / pageshow. Carries: Stop on leave; refresh and restart on Back

3. Safety net

   If scroll tracking never reports, all content shows anyway.

   After loading

   Only with motion allowed

   Started by

   • Reveal setup (Scripts): Safety timer. Carries: Show everything (2 s, set in code)