Por qué merece la pena aprender a crear plantillas WordPress

  • Por
Por qué merece la pena crear una plantilla WordPress desde cero en vez de acudir a plataformas como ThemeForest. Veremos con imágenes cómo cambia la optimización de la web cambiando únicamente la plantilla.

Qué de webs se habrán hecho gracias a los cuñados, esos entes que aparecen de la nada para ocuparse de la presencia digital de nuestros proyectos, sea gratis y con conocimientos escasos o, aún peor, con algunos conocimientos y dinero mediante.

Qué de webs se habrán hecho con plantillas WordPress gratuitas vendidas como artesanales.

Pero esto tiene un coste.

Cuando acudimos a un mercado de plantillas WordPress, como por ejemplo ThemeForest, solemos buscar las más usadas o las mejor valoradas; difícilmente vamos a confiar la salud de nuestra web a una plantilla que haya sido votada positivamente dos veces y negativamente una, frente a otra que tenga miles de votos positivos. Sin embargo, muchas veces las plantillas son las más votadas no porque sean las mejores, sino sencillamente porque, y discúlpenme que resalte la obviedad, simplemente han sido votadas muchas más veces que las otras. Esto se debe a que mucha más gente ha adquirido esta plantilla por adaptarse mejor a sus propósitos. Es decir, que la plantilla más votada puede ser la que mejor se adapte al que la compra. ¿Y eso está mal? Pues tendría, por lo menos, que hacernos desconfiar: la plantilla que suele adaptarse mejor al cliente es la que suele necesitar mayor variedad de estilo. Si una plantilla solo admite como colores el azul y el naranja, pierde comparativamente con la que te permite elegir colores. Y no solo eso. Valoraremos más -tendrá más éxito- la plantilla que nos permita introducir o no un slider, la que nos permita añadir un plugin de votos y, qué sé yo, aquellos detalles, útiles o inútiles, que hacen de la variedad virtud adaptándose a los más exóticos caprichos del que acude a buscar una buena plantilla al "Bosque de las Plantillas".

Y sin embargo, el que la plantilla sea capaz de dejar que el cliente modifique colores, añada sliders y demás, exige un motor de programación interno. Ese motor debe estar preparado para todas estas modificaciones. Y es un motor que, para determinados clientes, podría ser innecesario. Al fin y al cabo, podemos confiar en la posibilidad de que el cliente NO quiera sliders (confiemos). La plantilla difícilmente va a dar únicamente los detalles de ajuste que el cliente necesita. Muy seguramente va a ofrecer mucho más.

Donde unos ven virtud, yo veo defecto, porque la mejor plantilla para cada web es la que se ciñe mejor a ella, la que no ofrece posibilidades que no vamos a usar. Por ello, la mejor plantilla para cada web es la que se crea pensando exclusivamente en ella. Frente a la plantilla popular de Themeforest que nos brinda una habitación con ventana a la plaza, jacuzzi, bombones en la almohada, piano, minibar y peluches de colores, tenemos la plantilla personalizada, que nos ofrece una cama comodísima y punto, justo lo que necesitamos si lo que le pedimos al hotel para una única noche de estancia es que nos deje dormir en paz. No necesitamos florituras que nos entretengan.

Toda esta teoría está muy bien, suena muy bien, pero el lector necesitará algo más que unas palabras por mi parte, ¿verdad? Verdad. Les cuento. Tengo una web de videojuegos (www.deusexmachina.es). Para ella adquirí una plantilla de ThemeForest que me ahorraba mucho tiempo pensando un diseño y preparando su estructura. Modifiqué estilos y pequeños detalles, pero en general el mérito de la web radicaba en la plantilla. Un año después, mis conocimientos de WordPress me han permitido crear una nueva plantilla desde cero, personalizada, ajustada y ceñida exclusivamente al proyecto. ¿Y qué ha ocurrido? Pues que pensando en esto que estoy escribiendo ahora mismo, he acudido a varios servicios de consulta de optimización online, y he tomado fotos del ANTES y del DESPUÉS. Vamos a poder comprobar con imágenes la diferencia entre una plantilla adquirida en ThemeForest y una hecha a mano. El servidor es el mismo, la base de datos es la misma, los ajustes de optimización -gzip, caché, .htaccess- son prácticamente los mismos (está bien, el hosting ahora permite activar la opción gzip en servidores compartidos, pero nada más). ¿La única diferencia?: la plantilla. Échenle un ojo a las imágenes y compartan conmigo el entusiasmo.

WebPageTest

Este primer test online de optimización se centra en el apartado de imágenes, la compresión o la caché. Situamos primero la imagen del ANTES y luego la del DESPUÉS y a partir de ahora será así.

Vemos que la caché ha mejorado, la compresión de imágenes ha empeorado (seguramente por la desactivación de un plugin que afectaba en ese aspecto) y la transferencia de compresión ha mejorado, pero lo más importante son los datos de carga de la derecha. Antes la web tardaba en cargarse totalmente 14 segundos. 14 nada menos. El primer byte llegaba a los siete segundos. Había 70 requests (peticiones de recursos, como por ejemplo las llamadas a documentos CSS de los plugin) y prácticamente 1.2 megas de información, en los que el slider del index ocupada un papel importante.

Tras el cambio de plantilla los requests se han reducido a 31, más de la mitad (ahora no hace falta llamar a tantos recursos, solo usaremos lo que necesitamos), la web se carga totalmente a los cuatro segundos y algo -más de tres veces menos de tiempo de carga. TRES VECES-, el primer byte llega a los dos segundos y algo y se ha pasado de cargar más de un mega a cargar ni 300 kilobytes. Pero que los sliders eran ineficientes y pesados ya lo sabíamos, ¿verdad?.

PageSpeed

Herramienta de análisis de optimización impulsada por Google. Y a Google hay que hacerle caso.

Esta herramienta no me otorga el sobresaliente, pero sí me da el notable. Pero es que antes ni aprobaba. En la versión móvil antes sacaba un terrible 46, ahora llego al 78. Veamos la versión de escritorio.

Si antes sacaba un 59, ahora se llega al 90.

Fíjense que en ambos casos la habilitación de la compresión que mencionaba al comienzo del artículo se deja notar, como también la falta de ese plugin que en el apartado anterior afectaba a la compresión de las imágenes y ahora a algunos detalles de minimización. Eso sí, el tiempo de respuesta del servidor se ha reducido, porque ahora hay mucho menos que cargar.

GTMetrix

Esta estupenda herramienta es de las mejores para buscar los cuellos de botella en la carga de nuestras web.

La mejoría es clara. Si antes se sacaba 71 tanto en PageSpeed como en YSlow -herramienta de Yahoo integrada aquí- ahora se saca 92 en el primero y 87. Que un magacín se cargue antes de los cuatro segundos es una gozada. ¿Conocen Smashing Magazine, referencia mundial del diseño web? Analícenlo en GTMetrix y verán. Que mi magacín, creado a mano partiendo de Bones y usando el LESS aprendido de Wakkos tenga calificaciones parecidas a las de esta web ya es sinónimo de orgullo, y el objetivo de todo proyecto web: ser rápido y ligero.

Wakkos

Pingdom Tools

Otro resultado espectacular.

Si antes se obtenía un 64 con 70 peticiones y un mega con dos de carga, ahora el peso es cuatro veces menor, hay la mitad de requests y se alcanza el 95. Si antes la web era más lenta que el 74% de las demás, ahora es un 42% más rápida que el resto. Mejorable, sí, pero el paciente ha pasado de andar titubeante a permitirse un buen sprint.

Ya que estamos, aprovecho para dejar dos enlaces sobre optimización de webs, uno y dos. En GTMetrix, al descubrir que tu web está hecha en WordPress, te dan consejos específicos para dicha plataforma. Si tienen más dudas, consúltenme en Twitter, o busquen en Google: toda la información está ahí esperando ser usada.

¿Recapitulamos?

Qué importante es la velocidad de carga de la web. Para Amazon, el que la web tarde 0.1 segundos más en cargar supone perder un 1% de sus ingresos. Y Amazon mueve dinero, ¿verdad?

¿Qué he hecho para reducir la carga de la web, reducir los requests, aligerar el peso, reducir entre tres o cuatro veces el tiempo de acceso? Crear una plantilla WordPress desde cero, sin buscarla por ahí o comprarla. Si saben ustedes desarrollar plantillas WordPress no ignoren el poder de su conocimiento. Si no saben, aprendan. Yo aprendí en esta casa, en Desarrollo Web, y los resultados los han estado ustedes viendo en las imágenes del artículo.

Autor

OldMith

Desarrollador Web. jQuery. Responsive Design. Wordpress. Friki por naturaleza.

Compartir

Comentarios

Matis

09/6/2014
Estoy de acuerdo...
Muy buen post.. la verdad que por ahí uno como desarrollador y no como diseñador acude a comprar templates que se ven maravillosos y no solo que nos ahorran un tiempo considerable sino que también, como dije, uno no es diseñador y por ahí presentar a un cliente un diseño atractivo y que impresione cuesta mucho. Coincido que casi nunca se usa todo lo que el template te ofrece, por ejemplo, nunca tuve el caso que un cliente cambia opciones de diseño desde el template, directamente te llama pidiéndotelo.
Concluyendo: creo que los templates son una buena opción para cuando te inicias en WP y queres lograr una website con buen diseño y en pocas horas. Pero como dice este post no todo es mágico y esto tiene su costo! Apoyo la idea con animare a mas y si el problema es de diseño, tal vez, se puede pensar en contratar un diseñador y terciarizar esa parte.
Saludos

Nacho

09/6/2014
Plantillas WordPress
Totalmente de acuerdo, además de que también podemos nosotros programar un panel de opciones personalizado para el cliente, con la posibilidad de que pueda modificar algunas cosas sin estropear totalmente la web, y así evitarnos que nos estén llamando para tonterías que normalmente difícilmente las cobras.

El camino se hace andando y en este caso haciendo las cosas por ti mismo, equivocándote y aprendiendo de los errores.

Marcos

10/6/2014
Excelente post!
Recientemente he terminado un curso de experto en optimización en buscadores y una de las partes más importantes en el SEO de una web es el tiempo de carga (por razones obvias que no entraré en detalle aquí)
Nos hablaron concretamente en un apartado acerca de las páginas hechas con WordPress además de otros CMS, sin embargo no mencionaron en ningún momento nada parecido a lo que acabo de leer aquí.
Actualmente estoy adentrándome en el mundo de la programación web y quiero aprovechar para felicitaros y decir que ésta es una de las mejores páginas que he encontrado para tal propósito (y soy muy concienzudo, lo aseguro)

Comparto esta entrada entre mis círculos que seguro la encontrarán muy interesante.

Manuel

20/6/2014
Alguien ha conseguido?
Hay alguna persona conozco pocas que hayan conseguido hacer una plantilla desde cero? sin coste? y además sin conocimientos aprendiendo obviamente, no quiero que me lo den todo comido no pido eso, pero es verdad que hay alguien que haya conseguido crear una plantilla desde cero con pocos conomientos, yo por ejemplo solo se HTML y un poco de CSS que he ido aprendiendo rapidamente estos días, no se javascript ni php como debería comenzar a crear mi plantilla propia
muchas gracias estoy perdido.

Lucia

20/6/2014
Wordpress solamente?
Hola! Mi problema es que utilizando las herramientas descriptas en este artículo, resulta que mis páginas demoran mucho en cargar, estuve averiguando el tema de compresión de imágenes, pero no se realmente cual sería un buen método. En mi caso es al revés que la mayoría. Yo soy diseñadora (gráfica e industrial de productos), aprendí a programar (maquetación HTML Y CSS, y programación PHP/MYSQL), y prácticamente no uso enlatados (poca experiencia con wordpress y joomla). Mi consulta es: utilizando wordpress, consigo la compresión que necesito? Esto desde la pura ignorancia! O es recomendable seguir con mi camino a medida, y seguir investigando métodos de compresión para mis sitios web?

Saludos!