Existen múltiples estrategias SEO y de optimización, sin embargo muchos olvidan la importancia de prioriza el contenido visible WordPress. Por ese motivo en este artículo hemos preparado algunos consejos sobre cómo obtener un mejor tráfico web, mediante un contenido de calidad.
Indice De Contenidos
Prioriza el contenido visible WordPress
Cuando hablamos de prioriza contenido visible en WordPress, nos referimos al contenido que debemos tener como prioridad en el inicio de un blog para que sea lo primero que vean los usuarios al ingresar. Pero no solo eso, la velocidad de carga también es importante, tener un blog que muestre el contenido sin un tiempo de espera excesivamente largo puede mejorar tu posicionamiento en Google.
¿De qué forma? utilizando diversas herramientas como elimina los recursos que bloqueen el renderizado, o realizando una prueba con Google PageSpeed para determinar si debes priorizar algún contenido de tu blog.
La velocidad de carga y la priorización de contenido es sumamente importante para Google, y por ende para cada administrador de un blog. Por ese motivo vamos a explicar todo sobre la optimización y algunos consejos para detectar algún problema de este tipo en tu sitio web.
Reducir el tamaño del contenido superior de la página
Debes saber que, Google plantea dos maneras de resolver la velocidad de carga de un blog o la cantidad de contenido en la página principal:
- Reestructurando el código HTML para cargar primero el contenido prioritario del blog.
- Disminuyendo el número de datos utilizados por los recursos de tu página.
Vamos a describir cada una de ellas a continuación, para que sepas de qué se tratan estas estrategias para que lo puedas implementar en tu blog.
Priorizar el contenido principal
Una de las maneras más sencillas para que un navegador perciba una velocidad de carga mucho mejor en una web, es haciendo o priorizando la lectura de códigos HTML del contenido que tienes en tu blog, por sobre los plugins o widgets.
Recordemos que los códigos HTML es un lenguaje informático que es utilizado en la propagación de una web, y básicamente se le considera la estructura y lo que le da forma a todas las páginas del mundo. Obviamente no es el único lenguaje de marcado que se usa para el desarrollo de blogs, sin embargo es uno de los más comunes y utilizados de todos.
Ahora bien, los plugins y widgets son herramientas que pueden ser usados para mejorar una aplicación o simplemente como interacción para los usuarios. Estos se adquieren mediante servidores web, y como dijimos antes tienen distintos propósitos que depende totalmente del criterio del administrador.
Sin embargo hay algo que no controlan los administradores directamente, y es la forma en la que los navegadores leen los códigos HTML y CSS.
Los códigos HTML de una web no solo muestran el contenido de un blog, ellos representan todo lo que está visible o no en una página web, tanto plugin, widgets, contenido y todo lo que se haya instalado, añadido o agregado desde la creación del blog.
Es por ese motivo que la optimización de una página es importante, ya que sobrecargar de extensiones o programas puede causar que la navegación en nuestro blog sea lenta. Para que esto no ocurra, Google recomienda priorizar el contenido principal de tu página, es decir todo lo que tenga que ver con las publicaciones, imágenes y diseño en general sea lo primero que un navegador procese, y para ello vamos a explicar cómo hacer esto mediante dos técnicas que describiremos a continuación.
Página con barra lateral (sidebar)
Generalmente los blogs tienen organizado o priorizado los códigos HTML de la primera página de esta manera:
- <html>
- <body>
- <Sidebar>
- </Sidebar>
- <Content>
- </Content>
- </body>
- </html>
Como podemos observar, la barra lateral del blog está por encima del contenido, lo que significa que lo primero que el navegador va a mostrar al usuario. Puede que en términos visuales esté bien, pero cuando deseamos priorizar el contenido de un blog es lo último que deseas.
¿Por qué razón? pues al estar priorizado el sidebar en los códigos HTML, entonces el navegador dará prioridad a esa área específica del blog y no al contenido, que es lo que realmente interesa a todo administrador y usuario.
Las barras laterales son las zonas donde se almacena los anuncios o botones de redes sociales, o cualquier otra extensión que realmente no se considera fundamental en un blog, podría decirse que son como un añadido adicional para mejorar el aspecto visual de un blog.
Y sí esta barra lateral se carga primero que el contenido, significa que los usuarios tendrán que esperar para poder acceder a la razón principal por la que entraron a un web, el contenido.
Puede parecer poca cosa, pero supongamos que en la barra lateral tengas un anuncio de Google AdSense, un botón de Instagram, de Facebook y de Pinterest.
Cada uno de estos agregados es tiempo de espera para el usuario y para el navegador, ya que la lectura de códigos HTML es detenida y por ende el contenido tendría que esperar. Si esto ocurre, naturalmente el navegador del usuario estaría en pausa hasta que todo el contenido se cargue, y como dijimos antes, ningún usuario quiere esperar ni tampoco visita una página por sus botones o widgets.
Pero a pesar de lo complejo que suene el problema, realmente la solución es simple ya que necesitas de unos sencillos pasos para priorizar el contenido y que sea visible en WordPress:
-
Colocar la sección de contenido antes que la barra lateral
La solución más sencilla para arreglar el problema, es ir a la fuente de códigos HTML que tiene todo blog, y buscar el área de la barra lateral, copiar y pegar luego de la sección de contenido.
De esta forma el contenido del blog será lo primero que se cargue, y ya los usuarios no tendrán que esperar a que la página cargue. Es realmente sencillo, solo necesitas buscar el códigos <Sidebar> y cortar todo lo que esté dentro de él, y pegarlo luego del código </Content>.
Al hacerlo, podrás obtener los siguientes resultados:
- El contenido de tu blog se descargara más rápido.
- Los usuarios tendrán mejor navegación en tu blog, y por ende mejor tráfico web.
- Mientras los usuarios navegan, el resto de los anuncios y extensiones se irán descargando.
- Se mejora el tiempo de respuesta para los usuarios.
Sin embargo, a pesar de lo efectivo de este método, existen otras técnicas que te ayudarán a optimizar tu contenido y que serán una mejor solución al problema de carga.
Cargar el contenido superior de la página primero
Cuando hablamos de cargar el contenido primero, puede parecer que estamos hablando del método anterior, sin embargo es todo lo contrario. De acuerdo a Google, el pie de página generalmente almacena información que no es válida para un blog, como por ejemplo algunas imágenes, códigos CSS, JavaScrip, etc. Entonces, ¿por qué darle prioridad en la descarga del blog?
La mayoría de los usuarios no pasa de la parte superior de un blog, ya que la mayoría de las veces encuentra lo que quiere en el menú de inicio. De hecho, el comportamiento típico de un usuario puede resumirse de la siguiente manera:
- Un usuario no pasa del menú principal de un blog, ya que ese es el punto de referencia de todo el contenido de un sitio web.
- Un usuario que entra a un blog, puede llamarle la atención un anuncio y dar clic para salir de tu web.
- Cuando un usuario busca comprar algo, lo que hace es terminar en la página de ese artículo, hace clic en la imagen y en la descripción del producto.
De todos estos escenarios, en ninguno aparece un usuario yendo al pie de página a investigar o a comprar. Entonces, si se sabe su comportamiento natural en un blog, por qué deben esperar a que se cargue primero el pie de página antes que la información que realmente están buscando.
Puede parecer lógico, pero de hecho la mayoría de los blog tienen una configuración totalmente distinta, y la razón se debe a los códigos HTML y al navegador.
Por ese motivo, y a diferencia del caso anterior, vamos a explicar cómo priorizar el contenido visible WordPress mediante plugin, para que puedas corregir este ajuste automático que se genera en todo blog.
El pie de página se encuentra en la parte inferior de la página para una razón
Hemos hablado del pie de página, pero vamos a explicar qué es y cómo ubicarlo dentro de un blog, para que puedas comprender la razón del porqué Google no lo prioriza cuando el navegador se encuentra cargando el blog.
En primera instancia, un pie de página es una sección que se ubica en la parte inferior de un blog y que se adquiere mediante plantilla en WordPress.
Generalmente los pies de página almacenan información complementaria del blog, como por ejemplo algunas imágenes, la cuenta de alguna red social o algunos widget. Y a nivel visual seguramente un administrador pensará que se ve bonito, y técnicamente lo es, sin embargo si lo vemos a nivel de códigos la lógica cambia.
¿Por qué razón? porque cada añadido que instales en tu blog, requiere de códigos especiales como CSS o JavaScript que ralentizan el proceso de lectura de los códigos HTML.
Los complementos generalmente requieren de un tercero para presentar la información en tu blog, como es el caso de añadir alguna cuenta como Twitter, que necesita de JavaScript para que se contacte con la fuente externa para obtener la actualización de tu estado y presentarlo en tu blog. Todo este proceso ocurre con cada elemento adicional que instales en tu blog, y al hacerlo, naturalmente los navegadores darán prioridad a estos elementos que al propio contenido de tu web.
Y la razón se debe a cómo interactúan los navegadores con cualquier página en la Internet, sin embargo este comportamiento como dijimos antes, puede ser modificado para que la página se comporte como nosotros deseamos. Y toma en cuenta que no es necesario eliminar todas las aplicaciones que tienes instalada, solo debemos realizar un pequeño procedimiento en los códigos HTML, aunque no como hicimos en el caso anterior.
Recordemos que estamos hablando de pie de páginas, y no de barras laterales, ambas cosas son totalmente distintas y de hecho tienen códigos HTML igual de diferentes. Con eso aclarado, ¡Vamos a comenzar!
-
¿Cómo cargar primero el contenido superior de la página?
En un escenario perfecto, un usuario durante la navegación de una web debería ver en primer lugar el contenido destacado sin necesidad de perder tiempo en que se cargue el pie de página. Pero como dijimos antes, la mayoría de las plantillas de WordPress vienen preconfiguradas, lo que significa que sí o sí se necesita de un ajuste para poder priorizar el contenido visible en una web.
El método, a diferencia del anterior, requiere de un poco más de trabajo y de lógica. Pero una vez que entiendas todo el procedimiento y los términos, puedes decir que ya estás listo para que pongas a toda marcha tu blog.
Pero antes de iniciar, veamos cómo es el proceso de un navegador y la visualización de una web:
¿Cómo un navegador realiza la carga de una página web?
Lo primero que debes comprender de una web, es la forma en la que un navegador interactúa con él, ya que este será el punto de partida para poder optimizar la visualización del contenido de tu blog.
Un navegador, de acuerdo a sus algoritmos, procesa una web mediante ciertos criterios. Sin embargo debido a la complejidad de algunos términos, vamos a resumirlo brevemente para que entiendas el procedimiento de la interacción entre distintos servidores:
- Cuando un usuario se encuentra navegando, y visita una web; este navegador descarga los códigos HTML de dicho blog.
- Luego de descargarlo, procesa y analiza dichos códigos HTML.
- En dichos códigos, si se encuentra con algún elemento externo, como una imagen o un fichero CSS, entonces el análisis de los códigos HTML se suspende.
- El navegador procesa o carga esos elementos externos, aún con la suspensión activa de los códigos HTML.
- Si ese elemento externo es un fichero CSS o JavaScript, el navegador entonces realizará un análisis a dicha carpeta.
- Luego de terminar, retoma nuevamente el análisis de los códigos HTML del blog, hasta que termine o se encuentre con otro recurso similar a los anteriores. De ser ese caso, entonces el análisis de los códigos volvería a pausarse hasta que termine con los ficheros externos.
Como podemos observar, el proceso para que un navegador muestre un contenido no es tan sencillo como parece, de hecho existen impedimentos en el camino que todo buen administrador debe quitar, si desea que su blog se visualice de la manera correcta.
Por este motivo, algunos crearon métodos para que estos elementos externos estén inactivos durante el análisis de códigos HTML de una web. Además, vamos a mostrar cómo el contenido puede ser priorizado sin tener ninguna dependencia con estos ficheros, para que el contenido se muestre como se debe.
HTML
A lo largo del artículo hemos mencionado qué son los códigos HTML y cómo funcionan en una web, pero ahora vamos a enfocarnos en lo que hace en una página y cómo impedir que se detenga su análisis por un navegador.
Como sabemos, los códigos HTML son la estructura de un blog, contiene todos los archivos y ficheros que se han instalado o programado en una web. Naturalmente los códigos HTML se leen de manera secuencial, lo que significa que el procesamiento se realizan por líneas de códigos.
Estas líneas de códigos pueden ser editadas por un administrador, para que el contenido más importante sea lo primero que se vea o se lea en los códigos HTML, y no como está configurado actualmente en la mayoría de los blog.
Sin embargo, darle prioridad al contenido superior de un blog puede venir de la mano con un cambio en cómo está estructurado el diseño HTML de la web, ya que estarías ajustando y modificando la plantilla original que instales en WordPress, y por ende los códigos.
Pero para entender todo esto que hemos hablado, vamos a presentarles un ejemplo sobre cómo priorizar el contenido visible mediante código HTML:
-
Problema
Supongamos que tienes un diseño web con una barra lateral en bloque, también conocido como sidebar DIV, y tienes además un bloque con contenido principal, que se conoce como content DIV, y es lo que realmente quiere ver el usuario en un blog. Naturalmente ambos códigos HTML están preestablecidos de la siguiente manera:
Si intentamos cargar el contenido de la parte superior de la web con esta estructura div, sería imposible ya que existen demasiados impedimentos en el camino.
-
Solución
Para poder resolver el problema del blog, sin necesidad de cambiar el aspecto visual de la misma, sólo debemos cambiar de estructura.
Lo único que se necesita es separar la barra lateral y el contenido superior e inferior, en dos partes. ¿Por qué razón? para que la página cargue lo verdaderamente importante, es decir el contenido, sin necesidad de una interrupción.
-
Resultado
Puede que separar los elementos del contenido suene ilógico, sin embargo al hacerlo estamos priorizando los códigos y ficheros CSS que verdaderamente importan.
Lo que se busca es separar los ficheros o elementos externos que puedan retrasar nuestra web, del contenido restando. De esta forma cuando un usuario ingrese con su navegador, lo primero que verá será la parte superior sin necesidad de perder tiempo para que los archivos CSS externos se procesen.
CSS
Ahora bien, hemos hablado de códigos HTML y no hemos aclarado qué son los archivos CSS. Bueno en un principio, el formato CSS son códigos estilo cascada, y son representaciones de archivos que se guardan en una web bajo una extensión CSS.
Estos códigos son como enormes ficheros, ellos organizan y almacenan información y datos de una web. Se podría decir que son uno de los recursos más importantes de un blog, ya que ellas son las responsables de la velocidad de carga y de almacenar cualquier extensión que no tenga que ver con códigos HTML.
Lo ideal sería que estos ficheros CSS proporcionen una buena velocidad de carga, pero para ello al igual que el caso anterior, se necesita de un pequeño ajuste:
Se debe reestructurar los códigos HTML, para que los códigos CSS prioritarios se muestran en conjunto con el contenido superior de una página.
Además, debe reducirse el número de datos que son usados por la página, es decir todos los programas y extensiones que verdaderamente no cumplen con un rol primordial en el blog.
JavaScript
Otro elemento que encontramos dentro de una web es el JavaScript, un lenguaje de programación orientado a entregar elementos dinámicos dentro de un web.
Ahora bien, JavaScript al igual que el resto de los lenguajes, si se configura de manera inteligente no debería por qué ralentizar una web.
Sin embargo, lo más recomendable es pausar la carga de JavaScripts hasta que se termine el análisis de los códigos HTML. Al hacerlo podrás reducir el tiempo de espera en la carga del contenido de la web, especialmente aquellos elementos externos como los botones de redes sociales, bibliotecas o portafolios.
De igual forma para entender este último tema, lo mejor es leer sobre velocidad de carga que lo explica con mayor detalle.
Conclusión
Prioriza el contenido visible WordPress no es algo que todos pueden hacer sin práctica y conocimientos, se necesita de lógica y de algunos tutoriales para poder realizar los cambios con éxito y sin poner en riesgo la estructura de un blog. Por ese motivo, es fundamental asegurarte que tu página carga antes de realizar cualquier ajuste, ya que harías cambios innecesarios sin fundamento.
Además, debes tener a la mano un borrador con la nueva restructuración HTML de tu blog, priorizando el contenido superior de tu página. Toma en cuenta que puedes necesitar de códigos adicionales, así que lo más aconsejable es que estudies lo básico para que el proceso no te parezca tan extraño.
Con respecto a los archivos CSS, sepáralos por orden de prioridad, pon las carpetas que alojen una parte importante en la parte superior para que se cargue sin problema. En cuanto a JavaScript, lo mejor es parar su carga hasta que el contenido esté visible y haya finalizado el proceso de análisis de los códigos HTML.