diff --git a/esphome/components/web_server/__init__.py b/esphome/components/web_server/__init__.py
index ab54ae8582..b1cf8a5de6 100644
--- a/esphome/components/web_server/__init__.py
+++ b/esphome/components/web_server/__init__.py
@@ -1,3 +1,4 @@
+import gzip
 import esphome.codegen as cg
 import esphome.config_validation as cv
 from esphome.components import web_server_base
@@ -109,9 +110,13 @@ def build_index_html(config) -> str:
     return html
 
 
-def add_resource_as_progmem(resource_name: str, content: str) -> None:
+def add_resource_as_progmem(
+    resource_name: str, content: str, compress: bool = True
+) -> None:
     """Add a resource to progmem."""
     content_encoded = content.encode("utf-8")
+    if compress:
+        content_encoded = gzip.compress(content_encoded)
     content_encoded_size = len(content_encoded)
     bytes_as_int = ", ".join(str(x) for x in content_encoded)
     uint8_t = f"const uint8_t ESPHOME_WEBSERVER_{resource_name}[{content_encoded_size}] PROGMEM = {{{bytes_as_int}}}"
@@ -137,7 +142,8 @@ async def to_code(config):
     cg.add_define("USE_WEBSERVER_PORT", config[CONF_PORT])
     cg.add_define("USE_WEBSERVER_VERSION", version)
     if version == 2:
-        add_resource_as_progmem("INDEX_HTML", build_index_html(config))
+        # Don't compress the index HTML as the data sizes are almost the same.
+        add_resource_as_progmem("INDEX_HTML", build_index_html(config), compress=False)
     else:
         cg.add(var.set_css_url(config[CONF_CSS_URL]))
         cg.add(var.set_js_url(config[CONF_JS_URL]))
diff --git a/esphome/components/web_server/web_server.cpp b/esphome/components/web_server/web_server.cpp
index 01057fead6..e350e1b140 100644
--- a/esphome/components/web_server/web_server.cpp
+++ b/esphome/components/web_server/web_server.cpp
@@ -328,6 +328,7 @@ void WebServer::handle_index_request(AsyncWebServerRequest *request) {
 void WebServer::handle_index_request(AsyncWebServerRequest *request) {
   AsyncWebServerResponse *response =
       request->beginResponse_P(200, "text/html", ESPHOME_WEBSERVER_INDEX_HTML, ESPHOME_WEBSERVER_INDEX_HTML_SIZE);
+  // No gzip header here because the HTML file is so small
   request->send(response);
 }
 #endif
@@ -336,6 +337,7 @@ void WebServer::handle_index_request(AsyncWebServerRequest *request) {
 void WebServer::handle_css_request(AsyncWebServerRequest *request) {
   AsyncWebServerResponse *response =
       request->beginResponse_P(200, "text/css", ESPHOME_WEBSERVER_CSS_INCLUDE, ESPHOME_WEBSERVER_CSS_INCLUDE_SIZE);
+  response->addHeader("Content-Encoding", "gzip");
   request->send(response);
 }
 #endif
@@ -344,6 +346,7 @@ void WebServer::handle_css_request(AsyncWebServerRequest *request) {
 void WebServer::handle_js_request(AsyncWebServerRequest *request) {
   AsyncWebServerResponse *response =
       request->beginResponse_P(200, "text/javascript", ESPHOME_WEBSERVER_JS_INCLUDE, ESPHOME_WEBSERVER_JS_INCLUDE_SIZE);
+  response->addHeader("Content-Encoding", "gzip");
   request->send(response);
 }
 #endif
diff --git a/tests/test3.1.yaml b/tests/test3.1.yaml
index 46bc014204..ea8dc337be 100644
--- a/tests/test3.1.yaml
+++ b/tests/test3.1.yaml
@@ -21,6 +21,10 @@ wifi:
   ssid: "MySSID"
   password: "password1"
 
+web_server:
+  port: 80
+  version: 2
+
 i2c:
   sda: 4
   scl: 5