La verdad es que nunca he usado esa herramienta de Google, no sabría decirte porque tampoco sé muy bien qué analiza exactamente.
En lo referente a CSS, podrías mejorar algunas cosas. Estos selectores:
Código CSS:
Ver originalbody > section > div:nth-of-type(1) section article > div:nth-of-type(2) {}
Se me hacen un tanto exagerados. ¿Tienes algo en contra de usar clases e identificadores?
Para eso están las clases y los identificadores. Además de que no debe de ser muy cómodo trabajar sin ellos, porque mantener ese código es un dolor de cabeza.
Luego esto:
Código CSS:
Ver original-webkit-animation-name: noche;
-webkit-animation-duration: 35s;
-webkit-animation-direction: normal;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: steps(1.1);
-webkit-animation-delay: 1s;
Puedes reducirlo usando
shorthands que si que usas en otros atributos:
Código CSS:
Ver original-webkit-animation: noche 35s steps(1.1) 1s infinite;
Y cosas como esta:
Código CSS:
Ver original@keyframes noche{
0%{left: 0%;}
1%{left: 0%;}
2%{left: 0%;}
3%{left: 0%;}
4%{left: 0%;}
5%{left: 0%;}
6%{left: 0%;}
7%{left: 0%;}
8%{left: 0%;}
9%{left: 0%;}
10%{left: 0%;}
11%{left: 0%;}
12%{left: 0%;}
13%{left: 0%;}
14%{left: 0%;}
15%{left: 0%;}
16%{left: 0%;}
17%{left: 0%;}
18%{left: 0%;}
19%{left: 0%;}
20%{left: 0%;}
21%{left: 0%;}
22%{left: 0%;}
23%{left: 0%;}
24%{left: 0%;}
25%{left: 0%;}
26%{left: 0%;}
27%{left: 0%;}
28%{left: 0%;}
29%{left: 0%;}
30%{left: -100%;}
31%{left: -100%;}
32%{left: -100%;}
33%{left: -100%;}
34%{left: -100%;}
35%{left: -100%;}
36%{left: -100%;}
37%{left: -100%;}
38%{left: -100%;}
39%{left: -100%;}
40%{left: -100%;}
41%{left: -100%;}
42%{left: -100%;}
43%{left: -100%;}
44%{left: -100%;}
45%{left: -100%;}
46%{left: -100%;}
47%{left: -100%;}
48%{left: -100%;}
49%{left: -100%;}
50%{left: -100%;}
51%{left: -100%;}
52%{left: -100%;}
53%{left: -100%;}
54%{left: -100%;}
55%{left: -100%;}
56%{left: -100%;}
57%{left: -100%;}
58%{left: -100%;}
59%{left: -100%;}
60%{left: -200%;}
61%{left: -200%;}
62%{left: -200%;}
63%{left: -200%;}
64%{left: -200%;}
65%{left: -200%;}
66%{left: -200%;}
67%{left: -200%;}
68%{left: -200%;}
69%{left: -200%;}
70%{left: -200%;}
71%{left: -200%;}
72%{left: -200%;}
73%{left: -200%;}
74%{left: -200%;}
75%{left: -200%;}
76%{left: -200%;}
77%{left: -200%;}
78%{left: -200%;}
79%{left: -200%;}
80%{left: -200%;}
81%{left: -200%;}
82%{left: -200%;}
83%{left: -200%;}
84%{left: -200%;}
85%{left: -200%;}
86%{left: -200%;}
87%{left: -200%;}
88%{left: -200%;}
89%{left: -200%;}
90%{left: -300%;}
91%{left: -300%;}
92%{left: -300%;}
93%{left: -300%;}
94%{left: -300%;}
95%{left: -300%;}
96%{left: -300%;}
97%{left: -300%;}
97.1%{left: -300%;}
97.2%{left: -300%;}
97.3%{left: -300%;}
97.4%{left: -300%;}
97.5%{left: -300%;}
97.6%{left: -300%;}
97.7%{left: -300%;}
97.8%{left: -300%;}
97.9%{left: -300%;}
98%{left: -300%;}
98.1%{left: -300%;}
98.2%{left: -300%;}
98.3%{left: -300%;}
98.4%{left: -300%;}
98.5%{left: -300%;}
98.6%{left: -300%;}
98.7%{left: -300%;}
98.8%{left: -300%;}
98.9%{left: -300%;}
99%{left: -300%;}
99.1%{left: -300%;}
99.2%{left: -300%;}
99.3%{left: -300%;}
99.4%{left: -300%;}
99.5%{left: -300%;}
99.6%{left: -300%;}
99.7%{left: -300%;}
99.8%{left: -300%;}
99.9%{left: -300%;}
100%{left: 0%;}
}
Puedes reducirlas a:
Código CSS:
Ver original@keyframes noche{
0%{left: 0%;}
29%{left: 0%;}
30%{left: -100%;}
59%{left: -100%;}
60%{left: -200%;}
89%{left: -200%;}
90%{left: -300%;}
99.9%{left: -300%;}
100%{left: 0%;}
}
Al final hace exactamente lo mismo.
También puedes usar cosas como
-prefix-free para ahorrarte escribir los prefijos propietarios, o también cosas más avanzadas como
Sass —que tiene muchas otras ventajas— usando
Compass. Esto último es para mantener todo el código de forma más eficaz, ya que por ejemplo haces:
Código CSS:
Ver original+keyframes(noche)
0%
left: 0%
29%
left: 0%
30%
left: -100%
59%
left: -100%
60%
left: -200%
89%
left: -200%
90%
left: -300%
99.9%
left: -300%
100%
left: 0%
O
Código CSS:
Ver original+animation(noche 35s steps(1.1) 1s infinite)
Y ya te compila todos los
@keyframes y
animation necesarios para que funcione en todos los navegadores que lo soporten con sus prefijos y demás.
Sass tiene muchas otras ventajas, como la mayoría de preprocesadores CSS, como el uso de variables, declarar funciones, anidar selectores, etc.
No creo que ni cambiando todas estas cosas mejore el rendimiento del sitio. Debe de ser otra cosa, sobre todo imágenes y tal vez JavaScript hacen que la página pueda ir lenta. Obviamente también depende del servidor, aunque si es de pago no debe porqué.
