En la escuela se me pidió que hiciera una página en la cual tengo que poner los enlaces con cada una de las actividades que haga cada semana. Los archivos y carpetas son los siguientes:
- scripts: getdates.js, hamburgerButton.js
- styles: base.css, large.css, normalize.css
- index.html
Me han estado enseñando a usar las Developers tools de Chrome y me piden que mi página no pese mas de 500 kB, lo que hago es abrir una pestaña en incognito, entrar en la sección Network y hacer un Empty Cache and Hard Reload y cuando observo los kb transferred me aparece como:
553 kB transferred
Me he dado cuenta que el problema es un iframe con un url incrustado de mi ubicación, y si lo quito en sección Network me aparece:
91.4 kB transferred
Este es el código html:
<div class="map-responsive">
<iframe src="[aquí va mi ubicación]" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
Y estas son las reglas css de dicho elemento:
.map-responsive {
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
height: 0;
}
.map-responsive iframe {
left: 0;
top: 0;
height: 100%;
width: 100%;
position: absolute;
margin: 0 1rem;
}
Me gustaría saber si hay alguien de ustedes sabe como podría optimizarlo que me pueda ayudar. Si hay necesidad de poner mas información para que mi pregunta sea mas clara estaré al pendiente
Buen día!