Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Optimización de sitios web hechos con WordPress

1,453 views

Published on

Optimización de sitios web desarrollados en WordPress para sacar el máximo provecho a nuestro sitio web en aspectos tan importantes como es el Plataforma, SEO, WPO, Multi-idioma, Contenido, etc..

Published in: Technology

Optimización de sitios web hechos con WordPress

  1. 1. Dani Reguera Bakhache u dreguera@mondragon.edu u @dreguera Mondragon Unibertsitatea Chequea tu WordPress y optimízalo al máximo
  2. 2. Plataforma
  3. 3. Blog vs Web •  En una web: – El contenido es “está7co”. – Ha de ser formal, profesional, branding. – Es comunicación unidireccional. No generamos debate – Conocimientos de mantenimiento – Infraestructura (Hos7ng y dominio) – Indexar un página tardamos unos días
  4. 4. Blog vs Web •  En un blog: –  El contenido es dinámico –  El contenido se actualiza periódicamente –  No ha de ser obligatoriamente formal –  Es mul7direccional: •  Comentarios •  Viralización –  Cualquier persona puede mantener un blog. –  Indexar contenidos de un blog es cues7ón de horas
  5. 5. ¿Qué es WordPress? •  WordPress es un CMS (gestor de contenidos) que permite publicar contenidos escritos, fotos, mul7media y muchos más en internet. Es en defini7va una plataforma para crear webs (ya sean blogs, foros, páginas corpora7vas, 7endas online…) 5
  6. 6. WordPress.org •  WordPress es gratuito y libre, se distribuye mediante licencia GPL además de estar realizado y soportado por una comunidad de desarrolladores independientes. •  No hay ánimo de lucro ni ninguna empresa detrás de WordPress que explote económicamente el producto. •  WordPress se distribuye a través de la web WordPress.org, donde puedes descargar la plataforma en formato .zip libremente.
  7. 7. WordPress.com •  WordPress.com es un servicio de la empresa AutomaZc que permite la creación de blogs o si7os usando WordPress. •  No necesitas hos7ng ni dominio, puesto que está alojado en sus servidores bajo el dominio nombrededominio.wordpress.com
  8. 8. Ventajas de usar WordPress.com •  Instalación sencilla •  Documentación: •  Incorpora algunos extras en la base de WordPress. (Estadís7cas por ejemplo) •  No necesitas hos7ng externo •  Es gra7s de inicio •  Copias de seguridad automá7cas •  Actualizaciones automá7cas
  9. 9. Desventajas de usar WordPress.com •  No 7enes dominio propio. •  No es posible instalar plugins •  No puedes modificar el diseño de la plan7lla WordPress que uses. (Si quieres añadir CSS a tu WordPress tendrás que adquirir el paquete correspondiente) •  No es posible introducir publicidad
  10. 10. Ventajas de usar WordPress.org •  100% libre y gratuito. •  Uso de cualquier plan7lla: puedes instalar cualquier tema para WordPress del repositorio oficial o distribuida por otras vías. •  Uso de cualquier plugin. Puedes instalar los plugins que necesites, ya sean gratuitos o de pago. •  Puedes editar el código de cualquier archivo, incluso del core de WordPress (aunque no es recomendable). •  Uso de analy7cs. Si vas a realizar un análisis de estadís7cas de tu web, Google Analy7cs es compa7ble con WordPress. •  Insertar publicidad. Sea cual sea la forma con la que quieras mone7zar tu web, con WordPress.org no 7enes ningún límite. •  Escalabilidad. Gracias a la posibilidad de instalar plugins y cualquier tema, tu proyecto puede crecer sin miedo a encontrar límites. Hoy puede ser un simple blog pero mañana se puede conver7r en un foro o una comunidad online. No hay límites en cuanto a obje7vos de tu proyecto se refiere. •  Comunidad. WordPress 7ene una gran comunidad detrás, desde los foros, equipo de traducciones y comunidades locales que aportan y ayudan a resolver dudas, además de organizar WPdays, Meetups y WordCamps
  11. 11. Desventajas de usar WordPress.org •  Es necesario contratar un hos7ng para alojar la web. El hos7ng 7ene que contar con una base de datos mysql y con php. •  La documentación está más enfocada a desarrolladores que usuarios. •  Actualizaciones manuales de plugins y temas. •  Cuidado con los hackeos.
  12. 12. ¿WordPress.org o WordPress.com? •  Sería recomendable elegir WordPress.com si vas a crear un blog personal y no quieres encontrar mayor complicación. •  Sería recomendable elegir WordPress.org si vas a montar algo profesional, o que 7ene vistas a ello en un futuro próximo.
  13. 13. Ejemplo en WordPress.com
  14. 14. /wp-admin en WordPress.com
  15. 15. Ejemplo con WordPress.org
  16. 16. /wp-admin con WordPress.org
  17. 17. Arquitectura
  18. 18. Hos7ng •  Lo primero el Hos7ng, ¿Qué 7po necesitamos? – Hos7ng compar7do – Dedicado •  Hay que ser realistas con el número de visitas que tenemos, tráfico y lo más importante… ¿Cuantas visitas esperamos tener?
  19. 19. Hos7ng
  20. 20. Hos7ng •  Existen muchos 7pos de hos7ng o alojamiento web: compar7do, dedicado, VPS, cloud…cada uno con sus beneficios e inconvenientes, y adaptables según las necesidades del proyecto. •  En cuanto a precios, la horquilla es aún más amplia, pues influye el 7po de hos7ng, ubicación del servidor, espacio disponible, servicio técnico, etc…
  21. 21. Hos7ng •  Para tener una idea, lo básico para arrancar un proyecto con WordPress puede ser: – un hos7ng compar7do – que permita tener base de datos MySQL (WordPress requiere una) – y que tengamos espacio suficiente para instalar WordPress. (WordPress de inicio no ocupa mas de 10Mb)
  22. 22. Hos7ng (muchos y muy variados)
  23. 23. Instalación
  24. 24. Requerimientos de WordPress •  Servidor web: Apache, nginx, IIS, lighhpd, … •  PHP 5.2.4+: recomendado PHP 5.3.x o posterior (las versiones anteriores ya no están soportadas o 7enen errores sin corregir) – La mayoria de los hos7ng “de verdad” lo actualizan autma7camente
  25. 25. Requerimientos de WordPress •  MySQL 5.0+: recomendado MySQL 5.1.x o posterior. •  WordPress necesita una base de datos para él solo.
  26. 26. La combinación perfecta, que no la única •  LAMP – Linux – Apache con módulo mod_rewrite – MySQL – PHP
  27. 27. Servidor Web
  28. 28. Servidor web •  Recomendado: Apache 2.2+, pero no sólo de Apache vive WordPress… hhp://mukom.mondragon.edu/socialmedia/ como-instalar-wordpress-usando-nginx-como- servidor-web/
  29. 29. Op7mizando el servidor web •  Esto son labores de sysadmin: – hhps://www.digitalocean.com/community/ tutorials/how-to-op7mize-apache-web-server- performance – Redirecciones: del .htaccess al hhpd.conf
  30. 30. Base de datos
  31. 31. Base de datos •  Pensemos qué base de datos necesitamos… “No sólo de MySQL vive WordPress” •  Si nos decantamos por MySQL optimicemos al máximo. •  ¿MariaDB? –  Para cargas mas complejas su optimizador trabaja mejor –  El acceso mediante views aligera el proceso de carga –  https://mariadb.com/blog/how-install-and-run-wordpress- mariadb –  http://es.wikipedia.org/wiki/MariaDB
  32. 32. Op7mizando la base de datos hhps://wordpress.org/plugins/wp-op7mize/
  33. 33. Op7mizando la base de datos
  34. 34. Instalación de WordPress •  En la instalación de WordPress hay que evitar instalar por defecto •  Hay que tener especialemente en cuenta: – U7lizar la ul7ma versión de WordPress en: •  Plataforma •  Plugins (Testeando compa7bilidad) •  Temas (Usando child_themes para las modificaciones) – Permisos de ficheros y carpetas
  35. 35. Op7mizando la versión de WordPress •  Si es la primera vez que instalamos:
  36. 36. Op7mizando la versión de WordPress •  Desde el /wp-admin
  37. 37. Op7mizando la versión de WordPress
  38. 38. Permisos de ficheros y carpetas •  En WordPress trabajamos con ficheros y carpetas •  Los permisos que tenemos que asignar son: – Carpetas (wp-content, wp-admin, wp-includes) con permisos 755 (rwx r-x r-x) – Ficheros con permisos 644 (rw- r– r–) – Mas información del codex sobre permisos: hhp://codex.wordpress.org/ Hardening_WordPress
  39. 39. Op7mizando los permisos hhps://wordpress.org/plugins/wp-security-scan/
  40. 40. Op7mizando los permisos
  41. 41. Contenido
  42. 42. Contenido •  El contenido es lo que da vida a nuestra web •  Genera contenido de calidad que: – Sea fácil de leer – Sea claro – Sea conciso – Esté estructurado – Sea bueno para posicionar en buscadores.
  43. 43. Analizando el contenido
  44. 44. Op7mizando el contenido
  45. 45. Imágenes •  Optmiizar las imágenes no solo sirve para que la página sea mas rápida y ligera, sino que nos puede servir para mejorar el posicionamiento en los buscadores •  U7lizar imágenes de alta resolución, influye nega7vamente en el rendimiento •  Debemos op7mizar todas las imágenes de la web.
  46. 46. Op7mizando las imágenes hhps://wordpress.org/plugins/wp-smushit/
  47. 47. Op7mizando imágenes
  48. 48. Op7mizando las imágenes
  49. 49. Op7mizando las imágenes hhps://wordpress.org/plugins/ewww-image-op7mizer/
  50. 50. Op7mizando las imágenes
  51. 51. Op7mizando las imágenes hhps://wordpress.org/plugins/imsanity/
  52. 52. Op7mizando las imágenes hhps://wordpress.org/plugins/media-file-renamer/
  53. 53. Op7mizando las imágenes
  54. 54. Categorías vs e7quetas •  Cuanto más organicemos nuestro contenido más fácil será saber qué es cada cosa •  Las categorías nos estructuran el contenido general de nuestro si7o. (Por ej: Deportes / Polí7ca / Sociedad) •  Las e7quetas nos permiten asociar a contenidos sobre recurrentes que no son estructura de nuestro si7o. (Por ej: Arrasate / Aretxabaleta / Eskoriatza)
  55. 55. Categorías vs e7quetas •  Podríamos decir que: – Una entrada sólo puede pertenecer a una categoría – Una categoría puede tener muchas e7quetas – Una e7queta puede estar en varias categorías
  56. 56. Op7mizando las categorías •  Define una buena estructura de categorías. Es de vital importancia para la arquitectura de información de tu página •  Busca palabras clave asociadas a esa categoría para crear el nombre. Te puede venir muy bien para el posicionamiento •  Genera descripciones para esas categorías y muestralas. hhp://codex.wordpress.org/Func7on_Reference/ category_descrip7on •  Quita el /category de la URL. Hay plugins que ya lo hacen.
  57. 57. Op7mizando las categorías
  58. 58. Op7mizando las categorías hhps://es.wordpress.org/plugins/remove-category-url/
  59. 59. Custom Post Types •  Los Custom Post Types son 7pos de entrada que podemos agregar a WordPress •  De esta manera nos podemos crear contenido para separarlo por ejemplo de los 7pos por defecto de WordPress: – Pagina – Post – Revision •  hhp://codex.wordpress.org/Post_Types
  60. 60. Custom Post Type hhps://es.wordpress.org/plugins/custom-post-type-ui/
  61. 61. Custom Post Type
  62. 62. Posicionamiento
  63. 63. ¿Se está posicionando bien mi si7o?
  64. 64. Op7mizando el SEO de mi si7o web hhps://wordpress.org/plugins/all-in-one-seo-pack/
  65. 65. Op7mizando el SEO de mi si7o web hhps://es.wordpress.org/plugins/wordpress-seo/
  66. 66. Op7mizando el SEO de mi si7o web
  67. 67. Op7mizando las redirecciones hhps://es.wordpress.org/plugins/eps-301-redirects/
  68. 68. Op7mizando las redirecciones
  69. 69. Op7mizando los enlaces rotos hhps://wordpress.org/plugins/broken-link-checker/
  70. 70. Op7mizando los enlaces rotos
  71. 71. Diseño
  72. 72. WordPress usa templates •  Los templates son una forma de configurar el aspecto de un si7o WordPress: la portada, los artculos, las páginas, las categorías, etc. •  Un tema es una colección de ficheros que trabajan juntos para producir una interfaz de usuario. •  Estos ficheros de denominan ficheros de plan7lla, y pueden incluir plan7llas personalizadas, ficheros de imagen (*.jpg, *.gif), hojas de es7lo (*.css), Páginas personalizadas así como los ficheros de código necesarios (*.php). •  Los temas vienen en forma de ficheros .zip
  73. 73. WordPress usa templates •  Al ser tan variados, no son parte de la versión estándar de WordPress (que sólo trae de serie los temas oficiales). •  Es por ello que la prác7ca totalidad de los mismo son desarrollados por terceras personas y su madurez y calidad varían mucho de unos a otros. •  Existen muchos repositorios
  74. 74. Op7mizando el diseño •  Ten en cuenta: – Colores corpora7vos – Temá7ca – Fuentes – Interacción con el usuario – Op7mizado para diferentes disposi7vos
  75. 75. Op7mizando el diseño •  Podemos construirnos un tema a medida hhps://codex.wordpress.org/es:Desarrollo_de_Temas
  76. 76. Op7mizando el diseño •  Podemos descargarlo desde repositorio oficial
  77. 77. Op7mizando el diseño •  Podemos obtenerlo desde un repositorio de terceros hhp://themeforest.net/category/wordpress
  78. 78. Op7mizando el diseño
  79. 79. Op7mizando el diseño
  80. 80. Plugins
  81. 81. ¿Qué es un plugin? •  Los plugins son herramientas que extenden la funcionalidad de WordPress. •  Los plugins ofrecen funciones y caracterís7cas personalizadas que permiten al usuario diseñar su si7o web según sus necesidades específicas. •  Existen plugins gratuitos y plugins de pago.
  82. 82. Plugins en WordPress •  Hay que intentar no sobrecargar nuestro si7o con infinidad de plugins. No existe un numero máximo. •  Hay que intentar que los plugins no malinterfieran con: – Funcionalidades del core de WordPress – Funcionalidades añadidas por otro plugin
  83. 83. Plugins en WordPress Recomiéndame un plugin que…
  84. 84. Op7mizando los plugins hhps://wordpress.org/plugins/p3-profiler/
  85. 85. Op7mizando los plugins
  86. 86. Op7mizando los plugins
  87. 87. Rendimiento
  88. 88. ¿Que es el WPO? •  Labores que hacemos para que nuestro sitio web sea mas rápido •  Esas labores pueden ser en diferentes ámbitos: Plataforma, base de datos, maquetaciones, servidores, peticiones… •  Podemos Debemos hacer WPO en: –  Frontend –  Backend •  En definitiva, WPO o Web Performance Optimization es el proceso de optimización de sitios web tanto a nivel usuario como a nivel servidor para reducir el tiempo de carga del mismo.
  89. 89. ¿Por qué es tan imporante el WPO? •  Cuanto más rápida vaya una web, el usuario estará más tiempo en la página •  Cuanto más rápida vaya una web, habrá menos porcentaje de rebote •  Cuanto más rápida vaya una web, habrá más conversiones •  Cuanto más rápida vaya una web, mejoraremos la experiencia de usuario •  Cuanto más rápida vaya una web, tendremos menos coste de infraestructura.
  90. 90. 91 GtMetrix
  91. 91. GtMetrix •  Herramienta web gratuita que nos analiza en función de Google y Yahoo y nos evalua en función de la velocidad. •  Nos aporta un listado de aspectos a mejorar tanto en la web como en el servidor para mejorar estas valoraciones. •  http://gtmetrix.com 94
  92. 92. Pingdom Tools
  93. 93. Pingdom Tools
  94. 94. Pingdom Tools •  Herramienta gratuita y muy potente que nos permite saber los tiempos de carga, el tamaño de las páginas •  Nos permite testear desde múltiples localizaciones •  Compartir los resultados •  Guardar históricos para saber las mejoras que hemos ido haciendo •  http://tools.pingdom.com/fpt/
  95. 95. Web Page Test
  96. 96. Web Page Test
  97. 97. Op7mizando el rendimiento de mi si7o web hhps://wordpress.org/plugins/advanced-lazy-load/
  98. 98. Op7mizando el rendimiento de mi si7o web
  99. 99. Multilingüismo
  100. 100. ¿Que es el mul7lingüismo? •  Permi7r al usuario que pueda navegar de una manera clara, fácil y usable en los diferentes idiomas en los que esté traducido mi contenido de mi si7o web.
  101. 101. ¿Qué es el buen mul7lingüismo? •  Una web óp7ma desde el punto de vista del mul7lingüismo ha de: – Tener el contenido bien traducido – Tener los campos personalizados traducidos – Tener las URLs en el idioma en el que está el contenido – Tener las metae7quetas traducidas a ese idioma
  102. 102. Contenido bien traducido
  103. 103. Campos personalizados traducidos
  104. 104. URLs en el idioma del contenido
  105. 105. Metae7quetas traducidas
  106. 106. ¿Cómo trata WordPress el mul7lingüismo? •  Por defecto WordPress sólo deja u7lizar un único idioma por si7o. •  Solución: – Hacer uso de una instalación mul7si7o de WordPress, creando múl7ples si7os uno por idioma. – U7lizar un plugin que nos permita ges7onar el contenido en varios idiomas de mi si7o WordPress 109
  107. 107. Tipos de plugins mul7-idioma en WordPress •  Los que nos generan una nueva entrada por idioma y las entrelazo entre ellas. Por ejemplo: –  WPML –  Polylang •  Los que nos almacenan en la misma entrada las traducciones. Por ejemplo: –  qTranslate X •  Los que nos hacen traducciones “al vuelo” mediante traductores externos. Por ejemplo: –  Google AJAX transla7on. 110
  108. 108. Nueva entrada por cada idioma •  Ventajas: – Todo se traduce por defecto, campos personalizados, etc.. – Los contenidos de la base de datos para las entradas no necesitan modificaciones •  Desventajas: – Arquitectura mas compleja. (U7lizan muchas funcionalidades de WordPress, “hooks”) – Tablas adicionales a veces 111
  109. 109. Todos los idiomas en la misma entrada •  Ventajas: –  La edición es más sencilla –  Al haber menos tablas y u7lizar menos funciones es menos compleja la arquitectura •  Desventajas: –  Todos los si7os donde el plugin no engancha con WordPress no se traduce y hay que hacerlo a mano. (Menus en mqTranslate) –  La desinstalación del plugin es más problemá7ca ya que hay que borrar de la BBDD las e7quetas y los textos alterna7vos 112
  110. 110. Op7mizando el mul7lingüismo hhps://wordpress.org/plugins/polylang/
  111. 111. Vamos a añadir los idiomas de nuestro si7o 114
  112. 112. Añadimos los idiomas de nuestro si7o, en este caso Euskera y Castellano 115
  113. 113. Vamos a traducir los campos personalizados 116 Una de las ventajas de Polylang es que nos traduce los campos personalizados
  114. 114. Ajustes generales de las traducciones 117
  115. 115. Veamos las páginas 118
  116. 116. Traduciendo una página 119
  117. 117. Traducida una página, traducimos todas 120
  118. 118. Lo siguiente, traducir también el menú, puesto que tenemos menú personalizado 121
  119. 119. Nos creamos el menú en Euskera 122
  120. 120. Asignamos en el tema el menú en ese idioma 123
  121. 121. Selector de idioma 124
  122. 122. Selector de idioma 125
  123. 123. Ahora tenemos que traducir el campo personalizado… 126
  124. 124. Resultado… 127
  125. 125. URLs traducidas 128
  126. 126. Metadatos traducidos 129
  127. 127. Metadatos traducidos 130
  128. 128. Metadatos traducidos 131
  129. 129. Créditos y recursos u7lizados •  Iñaki Arenaza. hhp://www.slideshare.net/iarenaza •  Darío Balbontn. hhp://dariobf.com •  Antonio Villegas. hhp://wprincipiante.es •  Silo Crea7vo. hhp://www.silocrea7vo.com •  Si7os web mul7lingües en WordPress: hhp://es.slideshare.net/dreguera/si7os-web-mul7nges-con-wordpress •  Rendimiento y velocidad en WordPress: hhp://es.slideshare.net/dreguera/rendimiento-y-velocidad-en-wordpress •  Internacionalización y mul7lingüismo en WordPress: hhp://es.slideshare.net/dreguera/internacionalizacin-y-mul7lingismo-en- wordpress •  Blog Mukom SocialMedia: hhp://mukom.mondragon.edu/socialmedia/category/wordpress-2/ •  Recursos gráficos: hhp://unsplash.com
  130. 130. Eskerrik asko! Dani Reguera Mondragon Unibertsitatea dreguera@mondragon.edu hGps://twiGer.com/dreguera hGps://linkedin.com/in/danireguera

×