Hola, estoy tratando de optimizar (usando gtmetrix.com) una pagina web que estoy realizando.
Cuando me reporta el informe me dice que estoy usando CSS que no no eficaces.
Os pongo el reporte:
Cita: Inefficient rules (good to fix on interactive pages):
#nav-tabs .off:hover span Tag key with 2 descendant selectors
#nav-tabs .current span Tag key with 2 descendant selectors
Rules that use the :hover pseudo-selector on non-anchor elements. This can cause performance problems in Internet Explorer versions 7 and 8 when a strict doctype is used.
#nav-tabs .off:hover span
.sprite-carta-menu-png:hover
.sprite-carta-vinos-png:hover
.sprite-compartir-png:hover
.sprite-google-maps-png:hover
.sprite-hotel-reservas-png:hover
.sprite-mas-informacion-png:hover
.sprite-pantalla-completa-png:hover
.sprite-precios-png:hover
.sprite-prevision-png:hover
.sprite-qr-a-movil-png:hover
.sprite-servicios-png:hover
.sprite-logo-gigapan-360-png:hover
.sprite-logo-pentax-360-png:hover
.sprite-logo-samyang-360-png:hover
.sprite-logo-sigma-360-png:hover
Mi archivo CSS es este:
Código:
#nav-tabs {
position:absolute;
top:0px;
left:470px;
width:490px;
top:0px;
color:#FFF;
}
#nav-tabs ul {
margin:0;
padding:0;
}
#nav-tabs li {
float:left;
margin:0 5px 0 0;
display:inline;
height:25px;
line-height:25px;
}
#nav-tabs a {
float:left;
padding:0 15px 0 0;
font-size:0.94em;
background:#0c141e url(imagenes/bg-nav-tabs4.png) 100% 0 no-repeat;
color:#4D4D4D;
font-weight:bold;
text-transform:capitalize;
}
#nav-tabs span {
float:left;
height:25px;
padding:0 0 0 15px;
background:url(imagenes/bg-nav-tabs4.png) 0 0 no-repeat;
}
#nav-tabs a:hover, #nav-tabs .current {
text-decoration:none;
background-color:#0c141e;
background-position:100% -36px;
color:#fff;
}
#nav-tabs .off:hover span {
text-decoration:none;
color:#fff;
background-position:0 -36px;
}
#nav-tabs .current span {
padding-left:15px;
background-position:0 -180px;
}
.sprite-carta-menu-png {
float:right;
background: url(imagenes/iconos-tuciudad2.png) no-repeat;
width: 32px;
height: 32px;
background-position: -108px -144px;
}
.sprite-carta-menu-png:hover {
float:right;
background: url(imagenes/iconos-tuciudad2.png) no-repeat;
width: 32px;
height: 32px;
background-position: -72px -144px;
}
.sprite-carta-vinos-png {
float:right;
background: url(imagenes/iconos-tuciudad2.png) no-repeat;
width: 32px;
height: 32px;
background-position: -36px -144px;
}
.sprite-carta-vinos-png:hover {
float:right;
background: url(imagenes/iconos-tuciudad2.png) no-repeat;
width: 32px;
height: 32px;
background-position: -0px -144px;
}
.sprite-compartir-png {
float:left;
background: url(imagenes/iconos-tuciudad2.png) no-repeat;
width: 32px;
height: 32px;
background-position: -144px -108px;
}
.sprite-compartir-png:hover {
float:left;
background: url(imagenes/iconos-tuciudad2.png) no-repeat;
width: 32px;
height: 32px;
background-position: -108px -108px;
}
.sprite-google-maps-png {
float:right;
background: url(imagenes/iconos-tuciudad2.png) no-repeat;
width: 32px;
height: 32px;
background-position: -72px -108px;
}
.sprite-google-maps-png:hover {
float:right;
background: url(imagenes/iconos-tuciudad2.png) no-repeat;
width: 32px;
height: 32px;
background-position: -36px -108px;
}
.sprite-hotel-reservas-png {
float:right;
background: url(imagenes/iconos-tuciudad2.png) no-repeat;
width: 32px;
height: 32px;
background-position: -0px -108px;
}
.sprite-hotel-reservas-png:hover {
float:right;
background: url(imagenes/iconos-tuciudad2.png) no-repeat;
width: 32px;
height: 32px;
background-position: -144px -72px;
}
.sprite-mas-informacion-png {
float:right;
background: url(imagenes/iconos-tuciudad2.png) no-repeat;
width: 32px;
height: 32px;
background-position: -108px -72px;
}
.sprite-mas-informacion-png:hover {
float:right;
background: url(imagenes/iconos-tuciudad2.png) no-repeat;
width: 32px;
height: 32px;
background-position: -72px -72px;
}
.sprite-pantalla-completa-png {
float:right;
background: url(imagenes/iconos-tuciudad2.png) no-repeat;
width: 32px;
height: 32px;
background-position: -36px -72px;
}
.sprite-pantalla-completa-png:hover {
float:right;
background: url(imagenes/iconos-tuciudad2.png) no-repeat;
width: 32px;
height: 32px;
background-position: -0px -72px;
}
.sprite-precios-png {
float:right;
background: url(imagenes/iconos-tuciudad2.png) no-repeat;
width: 32px;
height: 32px;
background-position: -159px -36px;
}
.sprite-precios-png:hover {
float:right;
background: url(imagenes/iconos-tuciudad2.png) no-repeat;
width: 32px;
height: 32px;
background-position: -123px -36px;
}
.sprite-prevision-png {
float:right;
background: url(imagenes/iconos-tuciudad2.png) no-repeat;
width: 47px;
height: 32px;
background-position: -0px -36px;
}
.sprite-prevision-png:hover {
float:right;
background: url(imagenes/iconos-tuciudad2.png) no-repeat;
width: 47px;
height: 32px;
background-position: -124px -0px;
}
.sprite-qr-a-movil-png {
float:left;
background: url(imagenes/iconos-tuciudad2.png) no-repeat;
width: 58px;
height: 32px;
background-position: -62px -0px;
}
.sprite-qr-a-movil-png:hover {
float:left;
background: url(imagenes/iconos-tuciudad2.png) no-repeat;
width: 58px;
height: 32px;
background-position: -0px -0px;
}
.sprite-servicios-png {
float:right;
background: url(imagenes/iconos-tuciudad2.png) no-repeat;
width: 32px;
height: 32px;
background-position: -87px -36px;
}
.sprite-servicios-png:hover {
float:right;
background: url(imagenes/iconos-tuciudad2.png) no-repeat;
width: 32px;
height: 32px;
background-position: -51px -36px;
}
.sprite-logo-gigapan-360-png:hover {
background: url(imagenes/iconospatrocinador.png) no-repeat;
width: 74px;
height: 15px;
background-position: -0px -54px;
}
.sprite-logo-gigapan-360-png {
background: url(imagenes/iconospatrocinador.png) no-repeat;
width: 74px;
height: 15px;
background-position: -0px -36px;
}
.sprite-logo-pentax-360-png:hover {
background: url(imagenes/iconospatrocinador.png) no-repeat;
width: 71px;
height: 15px;
background-position: -0px -90px;
}
.sprite-logo-pentax-360-png {
background: url(imagenes/iconospatrocinador.png) no-repeat;
width: 71px;
height: 15px;
background-position: -0px -72px;
}
.sprite-logo-samyang-360-png:hover {
background: url(imagenes/iconospatrocinador.png) no-repeat;
width: 78px;
height: 15px;
background-position: -0px -18px;
}
.sprite-logo-samyang-360-png {
background: url(imagenes/iconospatrocinador.png) no-repeat;
width: 78px;
height: 15px;
background-position: -0px -0px;
}
.sprite-logo-sigma-360-png:hover {
background: url(imagenes/iconospatrocinador.png) no-repeat;
width: 63px;
height: 15px;
background-position: -81px -0px;
}
.sprite-logo-sigma-360-png {
background: url(imagenes/iconospatrocinador.png) no-repeat;
width: 63px;
height: 15px;
background-position: -0px -108px;
}
La verdad no se muy bien a que se refiere con lo que me reporta.
Puede alguien ayudarme?
Saludos!