Struggling to Optimize Page Load Times for My Country Codes Online Directory: What Am I Doing Wrong with Caching?

Hey everyone,

• Introduction: I'm a complete newcomer to the world of web development and I've just launched my very first web tool, 'Country Codes Directory: International Phone, Calling, Dialing & ISO Codes'. It's been an exciting journey, but I'm really struggling with one major issue: incredibly slow page load times. I'm hoping some of the seasoned pros here can shed some light on what I'm doing wrong, especially regarding caching.
• The Tool & Setup: Running a large online directory: My tool is essentially a large online directory of international phone, calling, dialing, and ISO codes. It's mostly static content – about 250 countries, each with various data points like country name, dial code, ISO alpha-2, alpha-3, numeric codes, and continent. I built it using basic PHP and MySQL, and for now, it's running on a shared hosting plan. The database isn't massive, but it's not tiny either.
• The Problem: The core problem is that even though the content is largely static, initial page loads and specific search queries (e.g., filtering by continent or searching for a specific country) are consistently taking anywhere from 5 to 8 seconds. This is absolutely terrible for user experience, and I know it's going to hit my SEO hard. I'm seeing these slow times across various browsers and network conditions, so it's not just my internet connection.
• What I've Tried So Far (and Failed):
  • I implemented a CDN (Cloudflare free tier) for static assets like CSS and JavaScript files, which helped a tiny bit with those specific assets but not the main page load.
  • I added basic browser caching headers (Expires, Cache-Control) for images and other static files in my .htaccess, which again, only targets certain file types.
  • I even attempted some very rudimentary server-side caching for database queries using file_put_contents to save query results to a temporary file for a few minutes. This seemed like a good idea on paper, but either it's ineffective, or I'm doing it completely wrong, as the page load times didn't improve noticeably for dynamic content.
  • I've also optimized my MySQL queries with indexes, which did provide some speed improvement for database lookups, but it hasn't solved the core issue of the main HTML document taking ages to load.
• Specific Observation / Dummy Log: What's really confusing me is what I'm seeing in my browser's network tab. It looks like caching is explicitly disabled for the main HTML document, even though I haven't set it that way myself for the main page! Here's a simplified example of the response headers for the main document request:

  Request URL: https://www.mycountrycodes.com/
  Request Method: GET
  Status Code: 200 OK
  Remote Address: [IP Address]
  Referrer Policy: strict-origin-when-cross-origin
  
  Response Headers:
      Cache-Control: no-store, no-cache, must-revalidate, proxy-revalidate
      Connection: keep-alive
      Content-Encoding: gzip
      Content-Type: text/html; charset=UTF-8
      Date: Tue, 04 Jun 2024 10:30:00 GMT
      Expires: Thu, 01 Jan 1970 00:00:01 GMT
      Pragma: no-cache
      Server: Apache
      Transfer-Encoding: chunked
      Vary: Accept-Encoding
      X-Powered-By: PHP/7.4.33
  

  It looks like caching is explicitly disabled for the main HTML, but I haven't set it that way myself for the main page!
• My Question: As a complete noob, what am I fundamentally misunderstanding about caching for a large, mostly static online directory? How can I properly implement effective caching for the main HTML content and dynamic search results to drastically cut down page load times?