Added some more optimizations for browser efficiency

This commit is contained in:
Jeremy Karst 2025-01-14 23:13:15 -05:00
parent cf4172181d
commit b81a33ba42
4 changed files with 67 additions and 2 deletions

View file

@ -5,7 +5,7 @@ services:
context: .
dockerfile: osg.dockerfile
image: osg:25 # <--automate this number change to trigger stack redeploy.
image: osg:26 # <--automate this number change to trigger stack redeploy.
environment:
DOCKER: "true"

View file

@ -53,6 +53,8 @@ def run_server(host_ip, host_port, host_prefix, static_dir, database_connection,
'tools.staticdir.index': 'index.html',
'tools.expires.on': True,
'tools.expires.secs': 30*24*60*60, # 30 days
'tools.gzip.on': True,
'tools.gzip.mime_types': ['text/*', 'application/*', 'font/*'],
},
'/images': {
'tools.caching.on': True,

View file

@ -7,6 +7,43 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
</head>
<!-- Add critical layout CSS inline to prevent layout shift -->
<style>
.hidden {
display: none !important;
}
body {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
}
#document-container {
width: 70%;
max-width: 500px;
height: 300px;
margin: 100px auto 20px auto;
padding: 40px;
}
.controls {
margin: 20px auto;
padding: 10px 20px;
display: flex;
align-items: center;
gap: 20px;
width: 80%;
max-width: 540px;
}
#title-container {
position: absolute;
width: 100%;
top: 20px;
text-align: center;
}
</style>
<body>
<div id="title-container">
<h1>

View file

@ -6,6 +6,33 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
</head>
<!-- Add critical layout CSS inline to prevent layout shift -->
<style>
.hidden {
display: none !important;
}
body {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
}
#document-container {
width: 70%;
max-width: 600px;
margin: 100px auto 20px auto;
padding: 40px;
}
#title-container {
position: absolute;
width: 100%;
top: 20px;
text-align: center;
}
</style>
<body>
<div id="title-container">
<h1>
@ -119,7 +146,6 @@
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: Arial, sans-serif;
}