clase sobre optimización de wordpress

Optimización Web en Wordpress

Perspectivas

@jialberolahttp://www.juanignacioalberola.com

ELECCIÓN DE HOSTING

Elección de Hosting

•Nuestra página necesita un espacio de almacenaje en Internet

•Muchas empresas nos ofrecen sus servicios 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


•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…


•… 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


• ¿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.


•Y SOBRE TODO

BUEN SERVICIO TÉCNICO.SU SOPORTE ES TU

SALVAVIDAS.

INSTALANDO WORDPRESS

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


•El fichero wp-config.php

•Prefijo de las tablas de la base de datos → Cambiarlo

•Con letras y números


•Configurando la conexión a la base de datos:

•Por favor, contraseñas SEGURAS.

•Números + Letras + Símbolos SIEMPRE que se permita.


•Asistente instalación de Wordpress.

•NO poner admin como usuario.

•NO poner contraseñas sencillas.


•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.


•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:


•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');

ELIGIENDO PLANTILLA

Eligiendo Plantilla

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

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.

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

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

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

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

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

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.

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.

http://genesistutorials.com/visual-hook-guide/

http://genesistutorials.com/visual-hook-guide/

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.

http://cobaltapps.com/downloads/dynamik-website-builder/

http://cobaltapps.com/downloads/dynamik-website-builder/

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.

Eligiendo Plantilla

•Tiendas

Eligiendo Plantilla

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

INSTALANDO PLUGINS

Instalando Plugins

• Los plugins otorgan funcionalidad a Wordpress

• Son el tunning del CMS.

•Pero hay que llevar mucho cuidado con lo que se instala.

Instalando Plugins

•Cuidado con la última fecha de mantenimiento

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?

Instalando Plugins

LA PERFECCIÓN NO EXISTE PERO… PODEMOS ESTAR CERCA

La Home perfecta para un Blog

La Home perfecta para un ecommerce

La Home perfecta para servicios

ELEMENTOS DE CONVERSIÓN

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.


•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


•El regalo• Para que la gente se suscriba tenemos que dar algo a cambio• En Sidebar y en cada post (después)

WEB PERFORMANCE OPTIMIZATION. CONTENTANDO A GOOGLE

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/)

http://gtmetrix.com/

https://developers.google.com/speed/pagespeed/insights/?hl=es



http://www.webpagetest.org/

http://tools.pingdom.com/fpt/

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.

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.

https://www.w3-edge.com/products/w3-total-cache/



https://wordpress.org/plugins/wp-super-cache/

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/)

http://checkgzipcompression.com/

http://www.whatsmyip.org/http-compression-test

http://www.gziptest.com/

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.

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/)

http://refresh-sf.com/

http://refresh-sf.com/

http://www.crockford.com/javascript/jsmin.html

http://yui.github.io/yuicompressor/

http://closure-compiler.appspot.com/home

http://tidy.sourceforge.net/

WPO

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

OPTIMIZACIÓN DE IMÁGENES

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


•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.


•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/)

https://wordpress.org/plugins/ewww-image-optimizer/



OPTIMIZACIÓN DEL SEO

Optimización del SEO

•Ventaja Wordpress → SEO

• La misma estructura del CMS nos ayuda al posicionamiento 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


•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/

http://www.dominio.com/?page=3

http://www.dominio.com/nombre-de-la-pagina/


•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


•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.


•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


• 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.


MOSTRAR EJEMPLO

SAN SE ACABÓ[email protected]

http://www.juanignacioalberola.com

@jialberola

mailto:[email protected]

mailto:[email protected]

http://www.juanignacioalberola.com/

http://www.juanignacioalberola.com/