0

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:

  1. scripts: getdates.js, hamburgerButton.js
  2. styles: base.css, large.css, normalize.css
  3. 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!

1
  • Tengo una suposición: el iframe incluye un canvas y, por lo tanto, tiene que enviar todos esos pixeles a tu pagina. Prueba con achicar un poco el iframe a ver si el tamaño de la pagina se reduce.
    – Dante S.
    Commented el 15 feb. a las 22:20

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.