LA VELOCIDAD IMPORTA : 21 trucos para tener una web en WordPress

LA VELOCIDAD IMPORTA :
21 trucos para tener una
web en WordPress
ultrarrpidaPOR QU ES IMPORTANTE
LA VELOCIDAD EN UNA WEB?
INTRO
Hay muchas investigaciones que demuestran sin discusin que la velocidad de carga de una pgina web
es muy importante. En una poca donde aparecen todos los das nuevas tecnologas, donde la
velocidad de los ordenadores y de internet aumentan considerable- mente con cada nueva innovacin
que se populariza, la capacidad de atencin del visitante es mucho ms corta de lo que sola ser hace
unos aos.
Por ese motivo, como webmaster, solo tienes unos preciosos segundos para captar y retener la atencin
de tus visitantes y no debes perderlos durante la carga. No importa si vendes produc-tos, servicios o si
solo tienes un simple blog. Si tu web es lenta, vas a perder trfico, visitas y posiblemente dinero. En
general, si tu web tarda ms de un segundo en cargarse, significa que es lenta y que necesita
optimizacin.
En SiteGround hemos pasado mucho tiempo desarrollando una plataforma que optimice la velocidad y
aplique tecnologas de mejora del rendimiento especficamente para nuestros clientes de WordPress. Aunque tener un hosting que utiliza lo ltimo en hardware y en tecnologas de mejora de la
velocidad es esencial para el ren-dimiento de tu web, eso no es lo nico. Hay muchas otras herramientas y tcnicas que puedes utilizar y aplicar para mejorar la velocidad de tu web WordPress, las cuales
nos gustara compartir contigo.
IDENTIFICAR Y PRIORIZAR LOS PROBLEMAS 3BE N CH MARK
Lo primero que debes hacer es averiguar si realmente tienes un problema. La forma ms sencilla de
hacerlo es hacer una evaluacin o benchmark. Hay algunas herramientas gratui-tas como por ejemplo:
GTMetrix (https://gtmetrix.com)
Si realizas una evaluacin de tu web con esta herramienta, se obtie-nen los resultados de las pruebas
Page Speed de Google y de la YSlow de Yahoo en un solo resultado. Los resultados se ordenan
por orden de gravedad.
Pingdom Tools (https://tools.pingdom.com)
Hay muchas otras herramientas y, por lo general, si tienes tiempo, cuantas ms pruebas realices con tu
web, mejor. Sin embargo, estas dos suelen ser suficientes para obtener una idea clara de cmo est
funcionando tu web en trminos de velocidad. Esta herramienta muestra los resultados en unas cuantas
pestaas, pero dos de ellas son las ms importantes. La seccin de peticin de Archivos, que muestra el
tiempo de carga de tu web y cunto tiempo usa cada recurso que ests utilizando y la pestaa Performance Grade, que da recomendaciones sobre cmo mejorar los resultados, similar a GTMetrix.
4Consejo: A pesar de que la mayora de las herramientas de benchmark te darn una especie de "nota",
no te obsesiones con ella. Si tu web se carga en menos de un segundo, ya habrs hecho la mayor parte
del trabajo.

PR O BLEM AS CO MUNES
Suponiendo que los resultados de los test muestren que tienes un problema con la velocidad de tu web,
el siguiente paso es identificar los cuellos de botella. A pesar de que cada web es distinta y tiene su
propio conjunto de problemas de velocidad, algunos de estos prob- lemas son muy comunes por lo que
podemos empezar con ellos:
Demasiadas entradas en la pgina principal
Demasiados plugins y widgets sociales y para compartir
Utilizar demasiadas fuentes externas
Temas inflados con demasiadas funciones
Imgenes grandes y no optimizadas
PR I ORIZAR LO S PRO B LEMAS
La investigacin y el anlisis de las causas de la lentitud puede acabar con una larga lista de cosas que
podras hacer. Pero hay que priorizar los elementos de esa lista. Solucionar algunos de estos
problemas puede llevar mucho tiempo, pero no nos ofrecern mejoras importantes en la velocidad. Hay
dos cosas que debes considerar al priorizar los elementos a corregir:
Qu efecto tendr la solucin del problema en tu web?
Puedes utilizar las respuestas a estas preguntas para crear una lista de las optimizaciones a realizar
empezando por las que tendrn un mayor impacto teniendo en cuenta el tiempo que necesitars para
implementarlas.
Ser muy complicado corregir el problema?
TAMAO DE LA PGINA Y OPTIMIZACIONESDEL CONTENIDO61 . R EDUCI R EL NM
E RO D E E N TRA DA S Q U E S E M UEST RAN EN TU PG IN A P RIN C IPA L
Reducir el nmero de entradas que se muestran en la pgina princi-pal se puede hacer de forma muy
fcil desde el panel de adminis-tracin de WordPress.Ajustes -> Lectura -> Nmero mximo de
entradas a mostrar en el sitioA continuacin, cambiar el valor de Nmero mximo de entradas amostrar
en el sitio por un nmero menor.Alternativamente, se puede utilizar un plugin como YITH
InfiniteScrolling. ste muestra dinmicamente ms entradas cuando losusuarios se desplazan hacia
abajo cerca del pie de la pgina, deforma similar a la que Facebook muestra ms mensajes cuando
seest desplazando.Si tu web suele tener entradas largas, es posible que desees dividir-las en pginas
usando la etiqueta <!--nextpage -> dentro del conteni-do de la entrada. Al hacer esto, vers una
paginacin en la parteinferior de la pgina o entrada y tus usuarios podrn navegar atravs de ellas
haciendo clic en las pginas siguientes.Esto dividir una pgina grande y lenta en varias ms rpidas.2 .
DIV IDE LAS ENT RA DA S L A RGA S E N TUPGINA PRI NCI PAL73 . R EE MPLAZAR
EL PA S E D E D IA P OS ITIVAS( O S LID ER) POR UN A IM AG E N E S TTICA
Los sliders suelen utilizar una gran cantidad de cdigo JavaScriptpara funcionar. Es ms, no todos los
plugins que habilitan la funcion-alidad de pase de diapositivas en las webs de WordPress estnescritos
con un cdigo ligero y optimizado. Por ltimo, pero nomenos importante, los sliders no son muy
amigos de los dispositivosmviles. Por lo tanto, si tu diseo lo permite, simplemente reemplazatu slider
con una imagen esttica.Sin embargo, si realmente necesitas y quieres un slider, yorecomendara usar

Soliloquy. Tiene una versin gratuita y otraprofesional, que incluye ms funciones. Este plugin crea un
sliderrpido y ligero que tiene todo lo que la mayora de la gente necesi-tara de un plugin de pase de
diapositivas. Otra buena solucin es elplugin Meta Slider, otra extensin libre y bien escrita.4 . USA
TAMAOS DE IM G E NE S A P ROP IA DO SLas imgenes son una parte esencial de una web y
stas tardan sutiempo para ser transferidas desde el servidor mientras se carga laweb. As que, si
quieres mostrar una imagen de 300x300 pxeles, nocargues una imagen de 1024x1024 pxeles y a
continuacin esta-blezcas que se muestre ms pequea con HTML o CSS. Usaimgenes con el tamao
exacto con el que quieres que aparezcan.Yo recomiendo usar un plugin gratuito llamado EWWW
ImageOptimizer. Optimiza el tamao de las imgenes sin disminuir sucalidad y elimina todos los datos
innecesarios que la cmara guardacuando se toma una fotografa (por ejemplo: la ubicacin GPS de
lafoto, la marca y el modelo de la cmara utilizada...).
5 . OPTIMI ZAR EL TA M A O D E L A S IM G E N E SS I N B A JAR SU CALI DA D
8Incluso si la imagen se reduce en solo unos pocos KB, cuando secombinan todas las imgenes en una
pgina, por lo general lamejora en rendimiento es significativa.6. R EDUCI R EL USO D E F U E N
TE S E XTE RNASCada fuente que se utiliza desde Google Free Fonts u otro servicioparecido tiene
mltiples variaciones, peso (300, 400, 500, 700),codificacin (latino, cirlico), estilos, y as
sucesivamente. Compruebatu web e incluye solamente la variacin de la fuente que realmenteusas.Es
ms, si vas a cargar un tipo de letra para un trozo pequeo detexto en algn lugar de tu web, te
recomiendo que te olvides deldiseo y simplemente uses una fuente que ya tengas en otras pgi-nas.7.
A D M INI ST RAR EL VOLU M E N D EC OM ENTARI OS EN TU WEB
Si tienes una gran cantidad de comentarios, esto puede ralentizar tuweb de dos formas distintas. En
primer lugar, esto hace que tupgina sea ms dinmica (si has habilitado la cach, se tiene queactualizar
ms a menudo) y en segundo lugar, cada comentario sesuma al tamao de la pgina y a la salida
HTML.Disqus tambin es una opcin, pero es un servicio de terceros quese basa en un plugin para
reemplazar tu sistema de comentarios pordefecto por el de ellos. Ya no se cargarn los comentarios
desde tuweb, pero tampoco se almacenarn en tu servidor. Si decides dejarde usarlos, sin embargo,
puedes sincronizar los comentarios con elsistema por defecto de WordPress y pasar a otra opcin.En
esos casos, te recomiendo reemplazar el sistema de comentariospor defecto de WordPress con un
plugin llamado Epoch. ste reem-plazar la forma en que WordPress maneja los comentarios
pordefecto por un cdigo ms optimizado que realmente puedeacele-rar tu web, especialmente si tienes
muchos comentarios.
8 . HA B ILI TA LA COM P RE S IN G Z IP PA RATUS PGI NAS
Con la compresin gZIP habilitada, la salida final de HTML de tu weby algunos de los recursos
estticos se comprimirn antes de serenviados a tu visitante. Y a continuacin, el navegador de
stedescomprime el contenido antes de renderizarlo. Es mucho msrpido comprimir y descomprimir
este contenido que enviarlo sincompresin.Habilitar la compresin gZIP es muy fcil y no requiere casi
deningn esfuerzo. Basta con aadir el siguiente cdigo al archivo.htaccess en la carpeta principal de
WordPress:AddOutputFilterByType DEFLATE text/plainAddOutputFilterByType DEFLATE
text/htmlAddOutputFilterByType DEFLATE text/xmlAddOutputFilterByType DEFLATE
text/cssAddOutputFilterByType DEFLATE application/xmlAddOutputFilterByType DEFLATE
application/xhtml+xmlAddOutputFilterByType DEFLATE
application/rss+xmlAddOutputFilterByType DEFLATE application/javascriptAddOutputFilterByType
DEFLATE application/x-javascriptDescompresiny vistaTransferencia de Ficheros

ComprimidosServidorVisitantegZip descomprime el contenido antes de renderizar, acelerando la

transferencia.
COMPRESSIN GZIP10
9 . M INIF I CAR Y COM BINA R A RC H IVOS JS Y C SS
La minificacin y la combinacin son dos tcnicas con un mismopropsito: reducir el tamao y el
nmero de archivos JavaScript yCSS que tu web tiene que cargar. La minificacin elimina todos
loscaracteres innecesarios evitando la carga de unos preciosos bitscada vez que se solicita una direccin
URL. La combinacin, por otraparte, combina mltiples archivos JavaScript y CSS en uno solo.
Estoreduce el nmero de solicitudes que hace tu web. Hay algunosplugins que realizan ese trabajo
realmente bien. WP Rocket es unaopcin premium y WP Super Minify es un plugin gratuito.1 0. HA BI
LI TAR LA CAC H El almacenamiento en cach es una gran tecnologa que guarda elresultado de las
diferentes operaciones que tu web tiene querealizar para producir su contenido final. Entonces, muestra
este"producto" acabado al siguiente visitante de tu web. Con una buenasolucin de almacenamiento en
cach habilitada y funcionando, tuweb ser tan rpida como una pgina esttica hasta que realices
uncambio en ella. Cuando esto ocurre, al primer visitante despus de lamodificacin se le cargar la
pgina de forma dinmica. A continu-acin, la cach se actualizar y la prxima vez se cargar mucho
msrpida la versin de la pgina que est guardada en ella.Ms adelante volver con el
almacenamiento en cach de nuevo,hablando de algunos de los servicios que tu proveedor de
hostingpuede ofrecerte. Cuando se habilita el almacenamiento en cach anivel de servidor, el contenido
no se guarda en el disco duro, sino enla memoria RAM del servidor. Esto hace que el rendimiento de
laweb aumente mucho ms, ya que la lectura desde la memoria esms rpida que la lectura desde un
disco duro.La forma ms fcil de almacenar en la cach tu web es utilizando unplugin. ste guarda el
contenido almacenado en la cach en el discoduro del servidor y mejora significativamente el
rendimiento de laweb, ya que su contenido no se carga dinmicamente cada vez. WPRocket es una
gran opcin premium, o si se sale de tu presupuesto,prueba WP Super
Cache.113OPTIMIZACIONESDE TEMAS YPLUGINSTemas y plugins son esenciales para la
velocidad de tu web ya que sonbsicamente piezas de cdigo que tu web ejecuta cuando alguien accede
aella. Ese cdigo a menudo necesita ser optimizado tambin.121 1. SE LECCI ONA UN TE M A D E
C ON F IA N Z A DEU N B UEN PROVEEDORAl elegir un tema busca uno, ya sea en el repositorio
de WordPresso, si lo que buscas es un tema premium, busca una empresa que seade confianza y
reconocida dentro de la comunidad de WordPress.Cada hora que pases buscando a un proveedor para el
tema, y eltema en s mismo, te ahorrar das ms tarde cuando inviertastiempo y dinero en tu web
aadiendo todo su contenido. Lee losanlisis de los temas, intenta conseguir alguna informacin real
deusuarios, comprueba si es de una empresa de confianza dentro dela comunidad de WordPress. No
confes en un tema proporcionadopor un diseador desconocido que no responde a sus clientes.Es
importante tener un tema bien programado, porque la calidad delcdigo de ste afecta a todas las partes
de tu web. Por ejemplo,algunos temas tienen funcionalidades de plugins y aaden funcionescomo
mostrar entradas relacionadas debajo de las entradas. Esafuncionalidad provoca a menudo que los
tiempos de carga sean mslentos debido a la forma como se estructuran las consultas a la basede datos
MySQL. Resumiendo, no tienes porqu ser un buen desa-rrollador para tener una buena web, pero
asegrate de que tu temas que est escrito por un buen desarrollador.1 2. E V ITA LOS T EMAS INF L
A D OSSiempre se pueden aadir ms adelante usando algn plugincuando quieras que se carguen. Por
lo tanto, elige un tema quetenga las funciones principales que necesites sin un montn decaractersticas
adicionales.Cuando ests buscando un tema para tu web, lo ms probable esque tropieces con temas
que afirman que se pueden usar para crearprcticamente cualquier tipo de web. Muchos de stos estn

reple-tos de funciones, sliders, carruseles, etc. Todas estas funcionesrequieren recursos JavaScript y
CSS para funcionar, y si no los estsutilizando,
simplemente ests desperdiciando esos recursos. Fun-cionalidades como los carruseles y los sliders no
deben formar partede tu tema.1313 . USA SI EMPRE U N TE M A C H IL D( TEM A H I JO) CUAND
O C RE E S TU WE BLas actualizaciones de WordPress se lanzan con frecuencia y muchasde ellas
incluyen optimizaciones de rendimiento. Los temas son msdifciles de actualizar, pero los buenos
suelen lanzar nuevas versionescon numerosas actualizaciones. El uso de un tema hijo, o child,
tepermite mantener el tema padre actualizado, manteniendo intactastodas tus personalizaciones.
Configurar un tema hijo es sencillo, solotienes que seguir las instrucciones en WordPress.org.
14 . OPTIMI ZAR PAR A D IS P OS ITIVOS M V ILE S
Cada ao, ms y ms trfico proviene de dispositivos mviles. Lastabletas y los smartphones se estn
haciendo incluso ms popularespara navegar por internet que los ordenadores de sobremesa. Poreso es
importante asegurarse de que tu web funciona tan rpidocomo sea posible en esta clase de dispositivos.
Por lo general,cuando la gente navega por tu pgina en su telfono mvil, lo hacenen 2G, 3G o LTE,
que generalmente son conexiones ms lentas quelas que tienen en casa. Por ese motivo es una buena
prcticamostrar solo lo que los usuarios necesitan ver en el mvil, en lugarde una versin encogida de
tus pginas. A continuacin, vamos a veralgunos pasos para la optimizacin de tu web mvil:2 Siempre
elige un tema que, o bien sea mobile-first, o que tenga unaversin mvil nativa. Al realizar las pruebas
para tu web, asegratede probar la versin mvil.3 Si el tema no tiene una versin mvil, considera
usar un plugin comoWP Touch que genera una versin mvil de tu pgina web. Sinembargo, tener una
versin mvil nativa es siempre lo mejor.1 Prueba tus pginas web con el test Mobile-Friendly de
Google.Te dar informacin de si alguna parte de tu web no est bienoptimizada para mviles.