Added some more optimizations for browser efficiency
This commit is contained in:
		
							parent
							
								
									cf4172181d
								
							
						
					
					
						commit
						b81a33ba42
					
				
					 4 changed files with 67 additions and 2 deletions
				
			
		| 
						 | 
					@ -5,7 +5,7 @@ services:
 | 
				
			||||||
      context: .
 | 
					      context: .
 | 
				
			||||||
      dockerfile: osg.dockerfile
 | 
					      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:
 | 
					    environment:
 | 
				
			||||||
      DOCKER: "true"
 | 
					      DOCKER: "true"
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -53,6 +53,8 @@ def run_server(host_ip, host_port, host_prefix, static_dir, database_connection,
 | 
				
			||||||
                'tools.staticdir.index': 'index.html',
 | 
					                'tools.staticdir.index': 'index.html',
 | 
				
			||||||
                'tools.expires.on': True,
 | 
					                'tools.expires.on': True,
 | 
				
			||||||
                'tools.expires.secs': 30*24*60*60, # 30 days
 | 
					                'tools.expires.secs': 30*24*60*60, # 30 days
 | 
				
			||||||
 | 
					                'tools.gzip.on': True,
 | 
				
			||||||
 | 
					                'tools.gzip.mime_types': ['text/*', 'application/*', 'font/*'],
 | 
				
			||||||
            },
 | 
					            },
 | 
				
			||||||
        '/images': {
 | 
					        '/images': {
 | 
				
			||||||
            'tools.caching.on': True,
 | 
					            'tools.caching.on': True,
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -7,6 +7,43 @@
 | 
				
			||||||
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 | 
					    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 | 
				
			||||||
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
 | 
					    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
 | 
				
			||||||
</head>
 | 
					</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>
 | 
					<body>
 | 
				
			||||||
    <div id="title-container">
 | 
					    <div id="title-container">
 | 
				
			||||||
        <h1>
 | 
					        <h1>
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -6,6 +6,33 @@
 | 
				
			||||||
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 | 
					    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 | 
				
			||||||
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
 | 
					    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
 | 
				
			||||||
</head>
 | 
					</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>
 | 
					<body>
 | 
				
			||||||
    <div id="title-container">
 | 
					    <div id="title-container">
 | 
				
			||||||
        <h1>
 | 
					        <h1>
 | 
				
			||||||
| 
						 | 
					@ -119,7 +146,6 @@
 | 
				
			||||||
        flex-direction: column;
 | 
					        flex-direction: column;
 | 
				
			||||||
        justify-content: center;
 | 
					        justify-content: center;
 | 
				
			||||||
        align-items: center;
 | 
					        align-items: center;
 | 
				
			||||||
        
 | 
					 | 
				
			||||||
        min-height: 100vh;
 | 
					        min-height: 100vh;
 | 
				
			||||||
        font-family: Arial, sans-serif;
 | 
					        font-family: Arial, sans-serif;
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
	Add table
		
		Reference in a new issue