Saltar al contenido

Etiqueta: optimizacion web

¿Qué es el SEO y cómo funciona?

Cuando buscamos alguna información en los buscadores de Internet, vemos un listado de resultados de páginas con el contenido que queremos acceder. Generalmente hacemos clic en el primer enlace del listado porque de todos los resultados, sabemos que tiene mas probabilidad de brindarnos la información solicitada. Entonces el SEO es el proceso que realiza el creador del sitios web o una agencia como Eskimoz, para que un sitio aparezca en los primeros resultados de un buscador al buscar ciertos términos.

La palabra SEO son las siglas de Search Engine Optimization, que al traducir sería Optimización para Motores de Búsqueda. Entonces aplicar SEO significa realizar acciones para optimizar el contenido de nuestro sitio para ser relevante ante los términos o palabras que los visitantes o compradores puedan usar para llegar a nuestro sitio web. Por ejemplo, si queremos vender trajes de novia. Debemos crear contenido relacionado a bodas, en cada página de traje de novia asegurarnos de escribir correctamente el nombre del estilo del traje, colores, características, usar el nombre mas común en los títulos, definir descripciones breves en las imágenes del producto, utilizar sinónimos a lo largo del texto, entre otros.

De esta forma, cuando un motor de búsqueda indexe el contenido de nuestra página, analice la estructura del contenido de la misma y la relacione a los diferentes términos. De esta forma aumentaremos la posibilidad de aparecer en las primeras posiciones.

El SEO son técnicas para optimizar nuestro sitio web para que los visitantes lleguen fácilmente cuando hacen búsquedas

¿Cuáles son las tendencias SEO para 2024?

El contenido en formato de texto no va a desaparecer, sin embargo en el 2024 veremos otros medios como imágenes, vídeos y páginas que muestren su información en formato de lenguaje natural como una conversación, serán cada vez mas populares. Por esta razón debemos enfocarnos en aplicar SEO en estos medios: describir el contenido de cada imagen que pongamos en nuestro sitio; realizar vídeos con transcripciones de su contenido y describir que se visualiza en el vídeo. Y cuando sea posible, explicar el contenido escrito como lenguaje natural para que parezca como si habláramos con un ser humano.

¿Por qué invertir en SEO?

Hoy en día no es suficiente con crear una página web y aparecer mágicamente en los primeros resultados de los buscadores. Es necesario aplicar SEO a tus sitios para obtener mejores posiciones y así incrementar las visitas a nuestro portal. Lo cual se traducirá en mas ventas o llegar a un mayor sector de mercado.

Mi principal recomendación para invertir en SEO es recordar que si no inviertes en SEO, tu competencia si lo hace y te está robando visitantes de tu sitio web. Evitando que puedas aumentar tus ventas. Además, a pesar que puedes seguir guías en Internet y aplicar SEO por ti mismo. Es recomendable contratar una agencia o profesionales en el área, que permitan brindarte un plan de acción específico a tus necesidades y tener resultados personalizados que se diferencien de la competencia.

Espero que con este artículo tengas una mejor idea de qué es SEO, te animes a invertir en esto para aumentar el posicionamiento de tu sitio web y llegar a mas personas.

Deja un comentario

Optimiza el HTML, CSS, JS e imágenes de tu sitio web con Gulp

Uno de los retos de los desarrolladores web al momento de crear páginas web, es encontrar el equilibrio perfecto entre ofrecer un sitio con excelente apariencia visual y usabilidad, pero cuyo tamaño sea lo menor posible para que la carga sea rápida. Pues un sitio web rápido permite: tener mas visitas con el rendimiento actual del servidor, se ahorran costos de ancho de banda, los usuarios sienten que es una buena página y navegan mas tiempo por ella, entre otras. Este procedimiento incluye varias tareas que realizan muchos desarrolladores web como: usar las versiones reducidas (comprimidas) de Javascript, comprimir y ofuscar nuestro código del lado del cliente,  optimizar las imágenes del sitio, comprimir los archivos CSS, combinar todos los archivos CSS y Javascript en un sólo archivo (para cada tecnología) para reducir el número de conexiones, etc. Algo que no es complicado pero consume tiempo y que se debe repetir cada vez que se hacen cambios en el sitio.

Gulp

Como este proceso es repetitivo y consume tiempo, lo mejor es hacer un script que automatice cada etapa, pero hoy en día existen herramientas como que nos permite facilitar todo lo mencionado anteriormente. En este artículo hablaré sobre Gulp, una herramienta para automatizar tareas que hace lo mismo que GruntJS pero es mas fácil de usar y entender.

¿Cómo empezar?

Para instalarlo, lo hacemos a través Node Package Manager de forma global para que se instale como un comando del sistema y poder ejecutarlo en cualquier parte:
npm install -g gulp

Luego en la raíz del proyecto creamos un archivo gulpfile.js donde especificaremos las tareas a realizar:

var gulp = require('gulp');
gulp.task('default', function() {
});

Añadir una tarea

Una tarea es un conjunto de procesos, por ejemplo, optimizar el código JS consiste en: reemplazar algunas liberias por sus versiones CDN, utilizar las versiones minificadas de librerías de terceros, luego concatenar los archivos, minificar y actualizar las referencias en el HTML. Cada uno de estos procesos podemos encontrarlos en el buscador de complementos de Gulp (en caso de no existir alguna puedes crearla y publicarla en Github) y se instalan con npm.

Gulp posee una importante característica: su sistema de flujos entre tareas. Cada una de ellas recibe un conjunto de data (generalmente archivos), realiza un proceso en ella y produce nueva data para ser enviada como entrada a otro flujo. Esto permite a tareas que modifiquen gran de archivos, hacer este procedimiento en RAM y solo escribir en el disco cuando ya se ha terminado de procesar todos los archivos, por lo que se ejecutará muy rápido.

Para verlo en acción, haremos una tarea para reducir el tamaño de los archivos JS como ejemplo, entonces nuestro primer paso es instalar el plugin uglify con NPM:
npm install --save-dev gulp-uglify

Luego se deben hacer dos cosas en el archivo gulpfile.js, una es importar esta el complemento en las dependencias y asignarla a una variable, luego con esta variable podemos ejecutar la función que se encargará de (en este caso) reducir el tamaño del código javascript. Para ello debemos hacer lo siguiente:


var uglify = require('gulp-uglify');


gulp.task('comprimir', function() {
gulp.src('lib/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist'))
});

Como podrás observar, hemos creado una tarea llamada comprimir , que recibe un conjunto de archivos (los archivos JS ubicados dentro de /lib), crea una tubería y ejecuta uglify que se encargará de comprimir cada uno de los archivos, finalmente entrega el resultado a la tubería que se enviará a la ruta de destino (esta se puede definir a donde uno desee). Así sucesivamente podemos ir creando procesos como los mencionados anteriormente y luego agruparlo en unas tareas mas generales, por ejemplo, tareas para generar una versión para depurar (cuya fuente no este comprimida), una versión para producción, una versión de producción para pruebas, entre otros. Esto lo puedes hacer al final haciendo algo como esto:

gulp.task('produccion', ['comprimir', 'copiar','cdn', 'less']);

Ejecutar las tareas

Finalmente puedes ejecutar el comando gulp en la raíz de tu proyecto y empezará a realizar todas las tareas de forma automática. En caso de que quieras ejecutar solo una tarea, puedes pasar por parámetro el nombre de la tarea:

gulp produccion

Con esto generas la versión de producción, o  por ejemplo, si tienes una tarea llamada less para generar los archivos CSS desde LESS, simplemente ejecuta:
gulp less

Tareas recomendadas

Para optimizar un sitio web, generalmente utilizo imagemin, jshint, clean-css, notify, imagemin-pngquant, uglify, usemin. Con estas puedo comprimir imágenes, mejorar el código javascript, concatenar archivos, reducir el tamaño, entre otros. Aunque te recomiendo leer un artículo de Addy Osmani sobre optimización de webs, pues lista una gran cantidad de tareas que puedes ir probando para usar al momento de mejorar tus sitios.

Finalmente, como te darás cuenta con Gulp puedes crear sitios web mas óptimos y ahorrando mucho tiempo. Existen una gran cantidad de tareas existentes que puedes agregar a tu proyecto y facilitar tu trabajo, por eso te recomiendo chequearlas en el buscador de plugins de Gulp y si no existe, puedes crearla y ayudar a otros programadores que necesiten algo similar.

Deja un comentario

Mi blog con PHP y CSS

Bueno regresé después de tanto tiempo sin de verdad actualizar la página, pero la universidad me tenia full y me quitaba todo el tiempo para la página. Bueno por ahora decidí­ cambiar todo el contenido de la pagina a php para que me permita hacer grandes actualizaciones de manera rápida.

Y gracias a esto me dí­ cuenta que al migrar todas las paginas de HTML a PHP y utilizando CSS he reducido aproximadamente un 40% y 80% a cada archivo html. Lo cual aparte de que me permite modificar por ejemplo el menú principal de arriba en todas las paginas al mismo tiempo, me ahorra un 40% ó 80% de espacio en Disco y de ancho de banda.

Tal vez le parezca como tardí­o que haya hecho esto a estas alturas pero siempre me habí­a dado pereza, por lo que invito a todos los webmaster que sigan usando el HTML antiguo y sin CSS a que migren sus páginas a contenido dinámico y con CSS para que observen las ventajas del mismo.

Deja un comentario