No sabía cómo llamar a este artículo y me vino a la cabeza este famoso eslogan de Todo cambia para que nada cambie. Durante éste puente de la constitución he aprovechado para darle un lavado de cara al blog y sobre todo mejorar la velocidad de carga y la optimización de la web: WPO. Éste eslogan define perfectamente lo que he estado haciendo. En apariencia es muy similar, pero por debajo he cambiado muchas cosas.
Tenía dos objetivos en mente: mejorar algo el diseño (no soy diseñador y he hecho lo que he podido…) y poner en práctica todos los consejos y todo lo que he aprendido sobre WPO siguiendo a referentes, leyendo artículos y asistiendo a charlas.
El WPO (Web Performance Optimization) son un conjunto de técnicas que permiten mejorar la velocidad de carga de tu página web. El WPO lleva tiempo entre nosotros y pienso que va a ser uno de los nichos más importantes dentro del desarrollo web en el futuro (si no lo es ya). Es indudable su incidencia directa en la experiencia de usuario, y también en el posicionamiento SEO ya que Google penaliza a las webs más lentas.
Cada vez más empresas apuestan por invertir en WPO, y probablemente (SPOILER ALERT) sea uno de los temas sobre los que más hable aquí el año que viene.
Volviendo al tema (nunca mejor dicho), creé éste blog en verano de 2015 con un tema desarrollado a medida. Lo hice a ratos durante mis vacaciones en la playa, y unos meses más tarde cambié algunas cosas, pequeñas modificaciones. Durante este año venía dándole vueltas a cómo mejorarlo y ahora que he tenido unos días me he puesto con ello. Éstos son los puntos clave:
Bye bye IE8
Adiós a IE8 definitivamente. Seguiré sufriéndolo en el trabajo (si, casi en 2017 y aún hay empresas que lo piden) pero nunca más en mi blog. Tanta gloria lleves como descanso dejas. Internet Explorer sigue su caída en picado, a día de hoy sólo un 5,2% de cuota de mercado. Hace unos meses Microsoft anunció que dejaba de darle soporte, y ya ni siquiera aparece en las estadísticas: http://www.w3schools.com/browsers/browsers_explorer.asp. Así que adiós a html5shiv, respond, condicionales y demás…
Bootstrap, sólo lo necesario
Suelo utilizar Bootstrap como framework responsive. No me he atrevido a meter la versión 4 porque aún anda en alpha, pero aproveché para actualizar la última versión e incluir sólo los componentes que utilizo, ahorrándome unos cuantos kBs, concretamente 28kB en CSS y 20kB en JS.
Estructura del tema
Me descargué Underscores, Sage y Twentyseventeen. Los estudié y cogí ideas de cada uno para montar la estructura base del nuevo tema. Ahora creo que tengo todo mejor ordenado y más reutilizable. Al igual que antes, sigo utilizando Gulp para concatenar y minificar todos los JS y CSS de tal manera que sólo cargo una hoja de estilos y un archivo script.
WP Post Ratings
Anteriormente venía utilizando el plugin WP Post Ratings para las valoraciones de las entradas. La verdad es que probé varios plugins para esta funcionalidad pero no encontré uno que hiciera exactamente lo que quería. Al final me decidí por éste, pero no me gustaba:
- Demasiadas opciones de configuración, lo que lleva a grabar más información en BBDD y sus consecuentes llamadas
- Las «estrellitas» para votar eran imágenes, por lo tanto en una página de listado de 10 posts, aparecen 5 imágenes por cada posts: 50 en total. Para más inri no estaban optimizadas, y carecían de atributo alt, un despropósito. Y para el hover, usaba otra imagen
- Creaba una tabla nueva en BBDD
Decidí hacerme mi propio plugin para esta funcionalidad. No es un plugin en sí, ya que está integrado en el propio tema, pero tiene lo que quiero y cómo lo quiero, mucho más rápido y liviano.
Compartir en redes sociales
En la versión anterior tenía integrado en el tema una funcionalidad que mostraba los iconos de compartir en redes sociales en un lateral. Eran los típicos botones cuadrados con los iconos de Facebook, Twitter, LinkedIn y Google+ y con su contador de veces compartido.
La idea en un principio pensaba que era buena, pero con el tiempo me he dado cuenta que de nada sirve el contador si Twitter capó esa funcionalidad, Facebook te cambia la API cada dos semanas y tampoco tenía tantos compartidos en LinkedIn y Google +. Por no hablar de que en cada carga de la página hacía una petición a cada API para obtener el resultado. Esto lo optimicé usando transients para almacenar esta información, pero aun así cada hora lanzaba estas peticiones.
Así que he cortado por lo sano y estos iconos ahora sólo aparecen en el detalle de cada entrada, y sin contadores para evitar peticiones a servicios externos.
Imagen destacada no sólo para listados
Anteriormente sólo utilizaba la imagen destacada para los listados. Ahora aparece en el detalle de cada entrada para dotar de una mayor presencia visual de imágenes en el post, creo que queda un poco más atractivo (no soy diseñador…). Y en los listados he utilizado FlexBox (bye bye IE8).
Menos publicidad
La verdad es que puse adsense de Google no para hacerme rico, pero tenía al menos la esperanza de que me diera para costearme el dominio y el alojamiento, pero no es así. Así que quité esa publicidad del sidebar: menos scripts, más velocidad.
Ciertas cosas cargadas en ciertos sitios
Por ejemplo, Disqus sólo en plantillas single.php y dashicons sólo en la plantilla de author.php (para mostrar los badges).
Optimización de código PHP
Entramos en micro-optimización. En líneas generales he optimizado alguna WP_Query, uso de variables en loops para almacenar los títulos y enlaces (sobre esto escribiré un post). Actuaciones que me han permitido mejorar milisegundos, todo suma.
¿Cuánto he mejorado?
Hice unas mediciones en PageSpeed Insights, GTmetrix, Pingdom Tools y WebPageTest con el antes y el después y éste es el resultado:
| Antes | Después | |
| PageSpeed Insights | 86 desktop / 70 mobile | 88 desktop / 74 mobile |
| GTmetrix | 84 PageSpeed / 66 Yslow | 96 PageSpeed / 82 Yslow |
| Pingdom Tools | 1,96s / 640kBs | 0,97s / 536kBs |
| WebPageTest | 2.221s | 1.820s |
Estas mediciones son en base a una media de 5 intentos cada una. La mejora es notable aunque aún tengo margen de mejora. Es lo que tiene el WPO, en una primera actuación se consiguen resultados notables, pero para ir a por el sobresaliente es necesario una constancia en el día a día.
¿Y ahora qué?
Pues como decía no me quedaré aquí. He conseguido una mejora importante pero tengo aún muchos puntos donde rascar, y que poco a poco iré investigando e intentando optimizar:
- Esperaré a Bootstrap 4 para ver si puede aportarme algo novedoso y que permita optimizar un poco más
- Esperaré a FontAwesome 5. Tiene una pinta tremenda y espero que entre sus opciones esté la de personalizar la librería y cargar sólo los grupos de iconos que te interesen, ganaríamos mucho en rendimiento.
- Luchar contra el FOUT. Utilizo Google Fonts y cargo las fuentes mediante la importación standar de estas fuentes (link en el head). Si lo hago así, en herramientas como PageSpeed Insights salta la alerta: Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página. Si lo cargo con Web Font Loader aparece el temido FOUT (flash of unstyled text), ese efecto raro que carga la fuente de sistema y a los pocos milisegundos se cambia por la de Google Font. Menos es más, la petición más rápida es aquella que no se hace…
- HTTP2 y PHP7: Para ello pongo mi confianza en un buen hosting.
- Continuar atento a las nuevas técnicas, estándares o prácticas que vengan y permitan mejorar el rendimiento del sitio.
Puede que también te interese
