Presentación de la clase que di el Viernes 12 de Junio en CAMON Cigarreras de Alicante sobre la optimización de #wordpress. Muchas gracias a todos los asistentes.

1. Optimización Web en
Wordpress
Perspectivas
@jialberola
http://www.juanignacioalberola.com

3. ELECCIÓN DE HOSTING

4. Elección de Hosting
•Nuestra página necesita un espacio de almacenaje en Internet
•Muchas empresas nos ofrecen sus servicios de Hosting

5. Elección de Hosting
•Hosting → optimizado para Wordpress.
• Entorno AMP → APACHE, MySQL, PHP
• Huye de servidores IIS (Internet Information Server)
Versión >= 5.3 Versión >= 5.5

6. Elección de Hosting
•Pero… ¡es que Apache también tiene que estar optimizado!
• Módulos:
• mod_expires → Nos permite configurar un sistema de caché
• mod_rewrite → Nos permite URLs amigables. Suele venir por defecto activado.
•PHP → Configuración Adecuada
• Quitar exec de disable_functions en php.ini
NO SIEMPRE ES POSIBLE…
PORQUE…

7. Elección de Hosting
•… existen diferentes tipos de Hosting
•Hosting Compartido.
• El más habitual y barato.
• Compartimos IP con otros muchos sitios Web.
•Servidores Dedicados.
• Máquina física exclusivamente para nosotros.
•VPS.
• Es un servidor dedicado, pero virtual.
•Cloud Hosting.
• Se recogen los recursos desde diferentes máquinas

8. Elección de Hosting
•¿Qué necesito?
• > 1GB de espacio de almacenaje. Espacio web compartido entre Web + BD +
Email
• >= 25 procesos simultáneos.
• Transferencia mensual >= 90gigas
• Certificado SSL (Google lo premia!)
• Visor de Logs.
• FTP y Correo Electrónico
• Protocolos POP, IMAP y SMTP y WebMail.
• mySQL con posibilidad de conexión externa.
• Copias de seguridad.

9. Elección de Hosting
•Y SOBRE TODO
BUEN SERVICIO TÉCNICO.
SU SOPORTE ES TU
SALVAVIDAS.

10. INSTALANDO WORDPRESS

11. Instalando Wordpress
•Creando la base de datos
• El usuario NO tiene que tener todos los permisos.
• Un usuario de base de datos con todos los permisos es peligroso.
• SELECT, INSERT, UPDATE, DELETE (Para datos)
• CREATE, ALTER, DROP (Para estructura)
MAL, NO, CACA, NO TOQUES

12. Instalando Wordpress
•El fichero wp-config.php
•Prefijo de las tablas de la base de datos → Cambiarlo
•Con letras y números

13. Instalando Wordpress
•Configurando la conexión a la base de datos:
•Por favor, contraseñas SEGURAS.
•Números + Letras + Símbolos SIEMPRE que se permita.

14. Instalando Wordpress
•Asistente instalación de Wordpress.
•NO poner admin como usuario.
•NO poner contraseñas sencillas.

15. Instalando Wordpress
•El resultado en la base de datos será el siguiente.
1. Usuario de BD seguro.
2. Tablas nombradas de forma segura.
3. Usuario y password seguras para el panel de
Wordpress.

16. Instalando Wordpress
•Activa los enlaces permanentes en el panel de Wordpress.
•Oculta /wp-admin/ y demás rutas
• URL por defecto → Escritorio.
• Ocultarla por seguridad si nuestro proyecto es importante.
• Para ello te recomiendo:

17. Instalando Wordpress
•Ocultemos la versión de Wordpress
• Borra → license.txt y readme.html
• Elimina el META Generator que indica la versión de Wordpress.
• Añadiendo en functions.php → remove_action('wp_head', 'wp_generator');

18. ELIGIENDO PLANTILLA

19. Eligiendo Plantilla

20. Eligiendo Plantilla
•Una plantilla debería ser SOLO PRESENTACIÓN
•PRESENTACIÓN <> FUNCIONALIDAD
•Los plugins dan la FUNCIONALIDAD y la plantilla la PRESENTACIÓN
•Muchas plantillas vienen sobrecargadas:
• Decenas de shortcodes.
• Tipos de posts (equipo, portfolio, testimonios, etc).
• Scripts y hojas de estilo innecesarios.
• Efectos innecesarios.
• LENTAS, LENTAS Y LENTAS

21. Eligiendo Plantilla
•Consejos para elegir plantilla:
• PIENSA antes de comprar QUÉ es lo que necesitas.
• No es lo mismo un blog, que un ecommerce que una web corporativa.
• No mates moscas a cañonazos.
• NUNCA, Y REPITO, NUNCA descargues temas piratas.
• Antes de usar repositorios como Themeforest usa tiendas de temas.
• Y si tienes posibilidad, usa un Framework con Child Themes.
• Si vas a comprar en un repositorio.
• Lee los comentarios, pregunta, mira si hay soporte, el número de descargas, la
puntuación, etc.

22. Eligiendo Plantilla
•Páginas web lentas (debido a la cantidad de Javascript, CSS y efectos
que incorporan las plantillas).
•Imposibilidad de actualizar las plantillas sin perder los cambios
realizados. Lo que puede producir:
• Incompatibilidad de la plantilla con versiones nuevas de Wordpress.
• Incompatibilidad de plugins nuevos con la versión de la plantilla.
• En un futuro con cambios de versión de PHP puede que la plantilla deje de
funcionar.
•Mezcla de funcionalidades y presentación en las plantillas. La
funcionalidad debería ser añadida por plugins ya que al cambiar de
plantilla se pierde la funcionalidad.
PROBLEMÁTICA

23. Eligiendo Plantilla
•Panel de configuración diferente en cada página web que
implementamos que depende de la plantilla, y además normalmente
en inglés.
PROBLEMÁTICA

24. Eligiendo Plantilla
•Las plantillas no tienen código estandarizado.
•Cada plantilla tiene:
• Su propia estructura de ficheros.
• Su propia estructura de ficheros CSS.
• Sus propios Javascript.
• Exceso de ficheros incluyendo funcionalidades que no nos sirven
(woocommerce, efectos, etc)
•CONSECUENCIA: En cada proyecto web con cada plantilla diferente
toca PELEAR con un nuevo código y ajustarla a nuestro diseño
modificando el código que ha escrito un tercero imposibilitando
modificar la plantilla ni cambiar de versión de theme.
PROBLEMÁTICA

25. Eligiendo Plantilla
•Las hojas de estilo de las plantillas no están estandarizadas.
•Cada desarrollador coloca los estilos a su manera.
•Por ejemplo:
• Para modificar el color de la cabecera un desarrollador lo puede llamar .color-
cabecera-azul, otro lo puede llamar .cca, etc
• Con un framework siempre será .site-header para todas las webs que
implementemos
PROBLEMÁTICA

26. Eligiendo Plantilla
•Estamos limitando el diseño al ofrecido por la plantilla obviando
elementos de conversión.
• Posibilidad de distribuir nosotros el contenido en la web como creamos que
convierte mejor.
• Obligando al diseñador muchas veces a encajar como puede elementos en la
plantilla.
PROBLEMÁTICA

27. Eligiendo Plantilla
•Usa un framework como Genesis de Studiopress.
•Genesis tiene un núcleo que se actualiza independientemente de la
plantilla por lo que los cambios realizados no se ven eliminados con
cada actualización.
•Las plantillas son Child Themes (capa de presentación independientes
del núcleo).
•Estructura de ficheros limpia y estandarizada, solo modificamos el
Child Theme.

28. Eligiendo Plantilla
•Unificación de todo lo relacionado con el Framework bajo un menú
en Wordpress donde podemos incorporar los plugins que
desarrollemos nosotros.
•Posibilidad de crear una web en un lienzo en blanco, colocando
elementos donde queremos a través de Areas de Widgets.
•Incorporación de HOOKS (ganchos) para modificar y filtrar contenido.
•Código estandarizado (en todas las plantillas los elementos se
llamarán igual).
•Velocidad de procesamiento de los scripts PHP.

29. Eligiendo Plantilla
•Existencia de plugins exclusivos para este Framework.
•A destacar Cobaltapps.
• Nos permite “programar” a base de seleccionables como si de un puzzle se
tratase.
• Creación de webs con un asistente de código PHP (ahorra tiempo en
búsqueda de documentación).
• Exportar el theme creado de la base de datos a ficheros para mejorar aun
más la velocidad.
• Coste. 89$ por cada web o 239$ para webs ilimitadas.

30. Eligiendo Plantilla
• Ventajas Generales de Genesis.
• Genesis es un Framework desarrollado por Studiopress y tiene un coste de
58$
• Aprovechando la experiencia sobre el desarrollo en Wordpress incorpora
las siguientes características:
• Optimizado para SEO (código limpio, HTML5, velocidad de ejecución, microformatos,
responsive gracias al framework de Javascript Bootstrap).
• Actualizable con un solo clic sin variar el tema visual.
• Potencialmente seguro (uno de los desarrolladores es experto en seguridad en
Wordpress.com).
• Posibilidad de crear sitios web sin programar excesivamente.
• Compatibilidad con todos los plugins para Wordpress y algunos plugins exclusivos
para el Framework como Cobaltapps.

31. Eligiendo Plantilla
•Tiendas

32. Eligiendo Plantilla
•Para mí el equilibrio esta en BRRL
• Bonita.
• Responsive.
• Rápida.
• Ligera.

33. INSTALANDO PLUGINS

34. Instalando Plugins
•Los plugins otorgan funcionalidad a Wordpress
•Son el tunning del CMS.
•Pero hay que llevar mucho cuidado con lo que se instala.

35. Instalando Plugins
•Cuidado con la última fecha de mantenimiento

36. Instalando Plugins
•¿De quién es el plugin?
•¿Cuántas instalaciones activas tiene?
•¿Qué dice la gente?
•¿Cuál es su puntuación?
•¿Es compatible con tu versión de Wordpress?
•¿Cuáles han sido los últimos cambios?
•¿Cuándo fue la última actualización?

37. Instalando Plugins

38. LA PERFECCIÓN NO EXISTE PERO…
PODEMOS ESTAR CERCA

39. La Home perfecta para un Blog

40. La Home perfecta para un ecommerce

41. La Home perfecta para servicios

42. ELEMENTOS DE CONVERSIÓN

43. Elementos de Conversión
•WEB → OBJETIVO definido.
• Desde un blog personal (darme a conocer, vender mi producto,
posicionarme).
• A una web de un hotel (conseguir reservas, vender bodas, tratamientos en el
SPA).
• A un ecommerce (aumentar las ventas de la empresa).
•Objetivos ← Elementos de conversión.

44. Elementos de Conversión
•Urgencia (estrés en la venta)
• Quedan 2 plazas
• Hay una persona mirando este producto
• Muestra permanente de botones de Información o contacto
•Confianza
• Opiniones, reviews en sitios conocidos.
• Sellos de confianza (logos de clientes, empresas colaboradoras)
•Fotografías
• De concepto
• Que transmitan profesionalidad

45. Elementos de Conversión
•El regalo
• Para que la gente se suscriba tenemos que dar algo a cambio
• En Sidebar y en cada post (después)

46. WEB PERFORMANCE OPTIMIZATION.
CONTENTANDO A GOOGLE

47. WPO
•Cuando nos referimos a la WPO nos estamos refiriendo a la velocidad
de carga de la página web.
•Algunas Herramientas que nos ayudan a conocerla y nos dan
instrucciones.
• GTMetrix (http://gtmetrix.com/)
• Google PageSpeed Insights. (https://developers.google.
com/speed/pagespeed/insights/?hl=es)
• Webpage Test. (http://www.webpagetest.org/)
• Pingdom Tools. (http://tools.pingdom.com/fpt/)

48. WPO
•Un tiempo de carga debería ser menor a 2 segundos.
•¿Cómo lo consigo?
• Reduce el tamaño de las imágenes e indica sus dimensiones.
• Activa la compresión GZIP en el servidor.
• Activa la cache de navegador.
• Activa la cache de servidor.
• Mueve los javascript al footer. (NO SIEMPRE ES POSIBLE)
• Minimiza cantidad de ficheros JS y CSS.
• Comprime los ficheros JS y CSS..
• Minimiza el HTML.

49. WPO
•¿Cómo hago todo esto?
• Plugin W3 Total Cache. (https://www.w3-edge.com/products/w3-total-
cache/)
• Plugin WP Total Cache. (https://wordpress.org/plugins/wp-super-cache/)
• Configuración del servidor.

50. WPO
•Activar compresión GZIP.
• Podemos comprobar si una web está comprimida.
• Check GZIP Compression (http://checkgzipcompression.com/)
• What’s my IP (http://www.whatsmyip.org/http-compression-test)
• GZIP Test (http://www.gziptest.com/)

51. WPO
•CACHÉ
• Almacén intermedio entre el servidor y el navegador.
• Caché de servidor (Se generan páginas estáticas que se sirven evitando cada
vez el procesamiento)
• Caché de navegador (El navegador almacena los elementos de una web de
forma que no se hace una solicitud)
• W3 Total Caché nos ofrece todo esto.

52. WPO
•Otra optimización es la de comprimir el código HTML, JS y CSS
•Para ello podemos usar las siguientes herramientas.
• http://refresh-sf.com/ (Comprime JS, CSS y HTML).
• En el ejemplo nos hemos ahorrado: 86.1% de compresión
• Otros compresores:
• JSMin (http://www.crockford.com/javascript/jsmin.html)
• YUI Compressor (http://yui.github.io/yuicompressor/)
• Closure Compiler (http://closure-compiler.appspot.com/home)
• HTML Tidy (http://tidy.sourceforge.net/)

53. WPO
•¿Pero todo lo tengo que hacer manualmente?
• Obviamente no (aunque yo lo prefiero)
• W3 Total Cache también nos aplica compresiones

54. OPTIMIZACIÓN DE IMÁGENES

55. Optimización de Imágenes
•El formato debe ser gif, jpg o png
• JPG para imágenes en general (fotografías, fondos)
• PNG para imágenes planas y con transparencias (fondos, logos)
• GIF para imágenes animadas
•Cuidado con el nombre físico del fichero
• santa-barbara.jpg <> tusimo-castillo-santa-barbara-alicante.jpg
• Incluir palabras claves por las que queramos posicionar en Google
•Texto alternativo. Atributo ALT
• MUY IMPORTANTE para describir la fotografía
• Describir concisamente la imagen e incorporar la keyword

56. Optimización de Imágenes
•Atributo Title.
• Cuando pasamos el puntero aparece un cuadrado con el título.
• Al igual que con ALT describir la imagen
•Atributo Longdesc
• Podemos incorporar una descripción más detallada que con el atributo ALT
•El Contexto
• Rodea la imagen con texto relacionado con ella usando las keywords por las
que se quiere posicionar.
• Usa leyenda para la imagen con una descripción clara.

57. Optimización de Imágenes
•Dimensiones y peso
• Cuanto menos espacio ocupen, mejor para nosotros (y para Google)
• Herramienta: RIOT (Radikal Image Optimization Tool).
• Usar los tamaños adecuados (no usar 1280 x 900 para un thumbnail)
• Especificar alto y ancho para la imagen
• Plugin: EWWW Image Optimizer (https://wordpress.org/plugins/ewww-
image-optimizer/)

58. Optimización de Imágenes

59. Optimización de Imágenes

60. OPTIMIZACIÓN DEL SEO

61. Optimización del SEO
•Ventaja Wordpress → SEO
•La misma estructura del CMS nos ayuda al posicionamiento SEO.

62. Optimización del SEO
•Título de la Home
•Seleccionar palabra clave general por la que posicionar.
•Por ejemplo: El Blog de Wordpress Alicante.
•Cuando se busque Wordpress en Alicante se le dará más autoridad.
•Podemos cambiar el título y descripción en Ajustes → General

63. Optimización del SEO
•Enlaces permanentes.
•Cuidado que con IIS es más complicado.
•No evita URLs como http://www.dominio.com/?page=3
•Y nos la da como http://www.dominio.com/nombre-de-la-pagina/

64. Optimización del SEO
•H1 y URL
• El H1 es el título que introducimos en el nombre de la entrada
• Automáticamente se nos genera una URL (slug del H1)
• El H1 debe tener un significado semántico
• No tiene por qué coincidir con la URL

65. Optimización del SEO
•Categorías
• Traspaso de Autoridad
• Home → Categorias → Posts
• A esto se lo conoce como LINKJUICE
•Etiquetas
• Mejor NO usarlas
• En Google solo indexa un trozo de cada post (listado general) y puede tener
problemas con el algoritmo Panda de Google.

66. Optimización del SEO
•Plugin Wordpress SEO by YOAST
•Título
• Es lo que va a tener en cuenta Google para posicionar.
• Escribir una frase descriptiva incluyendo las keywords.
•Descripción
• No mejora en el posicionamiento directamente
• Su redacción es importante para atraer clics
• Cuantos más clics mejora nuestra autoridad y mejoramos en el ranking

67. Optimización del SEO

68. Optimización del SEO
•SITEMAP con Wordpress SEO by YOAST
•El sitemap es un fichero xml para indicarle a Google el contenido de
tu web.
•Se da de alta en Google Webmaster Tools.

69. Optimización del SEO
MOSTRAR EJEMPLO

70. SAN SE ACABÓ
hola@juanignacioalberola.com
http://www.juanignacioalberola.com
@jialberola