cont\u00e1ctenos<\/a><\/h2>\nGoogle<\/strong> lo domina todo; despu\u00e9s de todo, mas del 90% de la poblaci\u00f3n mundial lo utiliza como su motor de b\u00fasqueda predeterminado. Pero, a su vez, Google<\/strong> califica contenidos y establece reglas, y sus \u00faltimos lineamientos apuntan a privilegiar velocidad y compatibilidad, algo de lo que hemos hablado brevemente en ocasiones anteriores. Es hora de explayarse y mencionar t\u00e9cnicas y recetas de aplicaci\u00f3n avanzada.<\/p>\nOptimizando la velocidad de nuestro sitio web<\/h2>\n1 \u2013 utilice im\u00e1genes livianas:<\/strong><\/h3>\nGoogle<\/strong> prefiere los archivos JPG a los GIF o PNG, fundamentalmente porque el formato se basa en la compresi\u00f3n y ello da por resultado archivos m\u00e1s livianos. La gu\u00eda la da https:\/\/developers.google.com\/speed\/pagespeed\/insights\/<\/strong> , la herramienta on line<\/em> de Google<\/strong> que analiza sitios y brinda sugerencias sobre estructura y desarrollo. Hay herramientas que pueden comprimir JPG a un ratio<\/em> a\u00fan mayor que el original de su programa de dise\u00f1o gr\u00e1fico (a costa de la calidad).<\/p>\n2 \u2013 utilice sprites CSS:<\/strong><\/h3>\naunque parezca mentira, no es lo mismo un archivo de 50 kb que 10 archivos de 5 kb. Se cargan mejor y m\u00e1s r\u00e1pido los archivos \u00fanicos y, en el caso de los elementos comunes a todas las p\u00e1ginas de un sitio \u2013 l\u00e9ase botoneras, im\u00e1genes de encabezado, banners, etc<\/em> \u2013 es posible unificarlos en una sola imagen y despu\u00e9s mostrar la zona que nos interesa. Ello se realiza con la t\u00e9cnica de sprites CSS<\/em>: b\u00e1sicamente se crea una celda \u2013 la cual funciona como \u201cventana\u201d para visualizar parte de nuestro objeto<\/em> -, se define que la imagen \u00fanica ser\u00e1 la imagen de fondo, y despu\u00e9s se expone la secci\u00f3n de la imagen mediante un rango de coordenadas (con la instrucci\u00f3n \u201cbackground-position\u201d<\/strong><\/em>). Por ejemplo si un bot\u00f3n es pulsado, damos la orden de que la imagen de fondo se desplace 32 pixels para la derecha para mostrar el mismo bot\u00f3n pero en otro estad\u00edo (o con otro color). Esta t\u00e9cnica no s\u00f3lo sirve para visualizar elementos similares con sus diferentes variantes \u2013 botones activos \/ inactivos \/ pulsados, iconos de redes sociales, etc<\/em> -, sino que es tan flexible que puede utilizarse con im\u00e1genes de tama\u00f1o muy diferente que est\u00e9n incluidas en el sprite original, como el logo \/ encabezado del sitio, barras, im\u00e1genes de fondo (background<\/em>), etc.<\/p>\n3 \u2013 comprima CSS:<\/strong><\/h3>\nGoogle<\/strong> se fija en la econom\u00eda, a\u00fan cuando sea m\u00ednima y apenas llegue a 1 KB. Es lo que ocurre con los archivos CSS (en donde uno coloca las instrucciones del estilo y formato utilizado en todas las p\u00e1ginas de un sitio). Ahorrar espacios en blanco, utilizar abreviaturas (en las instrucciones CSS, en la identificaci\u00f3n hexadecimal de colores, etc), aplicar nombres cortos de estilo, etc. ayuda pero, sino, puede apelar a los servicios de un software para que realice el trabajo de optimizaci\u00f3n. Hay servicios on line gratuitos como http:\/\/csscompressor.com\/<\/strong> que le permiten elegir el grado de compresi\u00f3n (y legibilidad resultante) del c\u00f3digo CSS optimizado.<\/p>\n4 \u2013 comprima c\u00f3digo HTML:<\/strong><\/h3>\naqu\u00ed ocurre algo parecido al c\u00f3digo CSS pero, en este caso, la optimizaci\u00f3n produce resultados realmente dr\u00e1sticos (hasta un 30 % menos en el peso de los archivos HTML). Quitar espacios, abreviar instrucciones HTML, incluso quitar comillas de las instrucciones (lo cual es compatible con la mayor\u00eda de los navegadores pero que atenta contra la legibilidad del c\u00f3digo por parte del webmaster) son algunas de las opciones que manejan los compresores. Tal como pasaba con los archivos CSS, usted puede manejarse con un lote de archivos originales \u2013 que utilizar\u00e1 para el dise\u00f1o y para entender \/ modificar con facilidad el c\u00f3digo<\/em> \u2013 y generar un lote de archivos ultracomprimidos, los cuales son utilizados \u00fanicamente para levantar en su sitio web; los browsers<\/em> se encargar\u00e1n de interpretarlo como corresponde. Existen sitios on line y software gratuito (como el Absolute HTML Compressor<\/strong>; googl\u00e9elo para encontrar de d\u00f3nde descargarlo) que sirven para este prop\u00f3sito.<\/p>\n\n
5 \u2013 si debe usar c\u00f3digo Javascript, h\u00e1galo de manera as\u00edncrona:<\/strong><\/h3>\ngeneralmente incrustar alguna rutina Javascript implica meter el c\u00f3digo entre las primeras l\u00edneas de instrucciones HTML que conforman la p\u00e1gina; pero ello trae el efecto no deseado de que la visualizaci\u00f3n del sitio se congela hasta que la rutina es ejecutada. Para sobrellevar esto, las rutinas Javascript pueden ser exportadas a un archivo externo (como los archivos CSS) y, despu\u00e9s \u2013 en el c\u00f3digo HTML de la p\u00e1gina<\/em> \u2013 utilizamos alguna instrucci\u00f3n que realice la carga as\u00edncrona del mismo: esto es, la p\u00e1gina se carga primero y, al finalizar, reci\u00e9n se procesa el Javascript. En HTML 5 es f\u00e1cil ya que se incluy\u00f3 la instrucci\u00f3n \u201casync\u201d a tal efecto pero, para versiones anteriores del lenguaje, existen mini rutinas Javascript \u2013 livianas y de r\u00e1pida ejecuci\u00f3n<\/em> – que permiten la ejecuci\u00f3n postergada de eventos mas largos y complejos.<\/p>\n6 \u2013 habilite la compresi\u00f3n Gzip en su servidor web: <\/strong><\/h3>\na veces la optimizaci\u00f3n de c\u00f3digo no lo es todo, y es necesario meter mano en la configuraci\u00f3n del servidor de hosting<\/em>. Desde ya que se trata de un tema delicado, ya que una l\u00ednea de c\u00f3digo mal escrita puede congelar la visualizaci\u00f3n de nuestro sitio. Por otra parte, si usted alquila alojamiento web, no todos los proveedores de hosting<\/em> son partidarios de dejar a sus usuarios que toquen la configuraci\u00f3n del server (o de la fracci\u00f3n del server en donde se aloja su sitio). Los servidores Apache<\/strong> (que corren en plataformas Linux<\/strong>) suelen tener como opci\u00f3n la compresi\u00f3n Gzip en tiempo real: los archivos del sitio viajan reducidos hasta la terminal del navegante, y se descomprimen en su m\u00e1quina achicando los tiempos de descarga y visualizaci\u00f3n. El tema es ver si su proveedor de hosting<\/em> le permite habilitar dicha compresi\u00f3n.<\/p>\n7 \u2013 fije la vida \u00fatil de los archivos (que componen su sitio web) en el cach\u00e9 del navegador de sus visitantes: <\/strong><\/h3>\nsi alguien nos visit\u00f3 hace poco, debe tener archivados \u2013 en la memoria de su browser <\/em>\u2013 un mont\u00f3n de elementos pertenecientes a nuestra web. A su vez, el grueso de dichos elementos no ha cambiado en todo este tiempo \u2013 salvo que haya hecho una reforma radical a su sitio justo el d\u00eda de hoy <\/em>-. Para acelerar los tiempos de carga, podemos fijar fechas de vencimiento a los elementos que forman un sitio, distinguiendo entre sus clases \u2013 y esto se hace cargando instrucciones espec\u00edficas en el archivo de configuraci\u00f3n del servidor .htaccess<\/strong><\/em> -. El tema de fondo es: cuando usted agrega un art\u00edculo o p\u00e1gina nueva a su sitio, \u00bfqu\u00e9 elementos frescos incorpora?. \u00bfUn archivo HTML y una imagen JPG?. Entonces puede fijar un tiempo de expiraci\u00f3n para la clase HTML \/ JPG en una hora y, para el resto de los elementos (archivos .CSS, .GIF, fuentes, archivos externos de Javascript .JS, etc), en una semana o un mes. A continuaci\u00f3n brindamos un ejemplo de estas instrucciones:<\/p>\n# 1 WEEK (una semana)
\n<FilesMatch “.(ttf|png|gif|css)$”>
\nHeader set Cache-Control “max-age=604800, public”
\n<\/FilesMatch><\/em><\/strong><\/p>\n# 1 HOUR (una hora)
\n<FilesMatch “.(html|jpg)$”>
\nHeader set Cache-Control “max-age=3600, public”
\n<\/FilesMatch> <\/strong><\/em><\/p>\nLa duraci\u00f3n del cache se expresa en segundos. El acceso al archivo de configuraci\u00f3n del servidor .htaccess<\/strong> se suele dar desde el panel de control provisto por su proveedor de hosting<\/em>.<\/p>\n8 \u2013 compatibilidad con diferentes tama\u00f1os de pantalla \/ legibilidad de fuentes: <\/strong><\/h3>\nen Abril 2015 Google<\/strong> sacudi\u00f3 a la comunidad SEO anunciando que la compatibilidad de los sitios con plataformas m\u00f3viles (l\u00e9ase, smartphones y tablets) pasaba a ser un factor preponderante en la valuaci\u00f3n final de las p\u00e1ginas respecto de su posicionamiento en resultados. Vale decir, Google <\/strong>privilegiar\u00eda a los sitios de alta compatibilidad. Esta noticia \u2013 a la cual los especialistas SEO llamaron Mobilegeddon<\/strong> <\/em>\u2013 no result\u00f3 tan violenta y radical como muchos esperaban, aunque produjo desplazamientos menores en algunas listas de resultados que se consideraban inamovibles. El punto es que muchas plataformas m\u00f3viles ya poseen un grado de resoluci\u00f3n que se equipara a los monitores de escritorio \u2013 como ocurre con tablets y celulares de alta gama<\/em> \u2013 y, por otro lado, el grueso de sitios web ha estado utilizando versiones modernas de lenguajes de dise\u00f1o, los cuales han mejorado much\u00edsimo su compatibilidad. De todos modos la sentencia de Google<\/strong> sirvi\u00f3 para sacar moment\u00e1neamente del camino a aquellos sitios de estructura antigua y lenguaje arcaico, oblig\u00e1ndolos a modernizarse.<\/p>\nEl primer paso en la compatibilidad es asegurarse que el tama\u00f1o m\u00ednimo de letra (utilizado en el grueso de los textos de un sitio) sea de, por lo menos, 16 pixels (es un detalle expresamente pedido por Google<\/strong>, y deben tener estudios que avalan semejante sugerencia). Una font de 16 pixels es legible tanto en una pantalla full HD (en donde los pixels se achican y se multiplican para dar mayor nitidez) como en el peque\u00f1o display<\/em> de un celular standard (aunque all\u00ed entra a jugar otro factor que es el de los navegadores m\u00f3viles, los cuales implementan un porcentaje de zoom por defecto).<\/p>\nPara mejorar la visibilidad \u2013 y la valoraci\u00f3n de Google<\/strong> respecto de la compatibilidad visual multiplataforma de nuestro sitio <\/em>\u2013 es necesario apelar a recetas que permitan cambiar el tama\u00f1o de la fuente seg\u00fan la resoluci\u00f3n del display del navegante. Hay muchas t\u00e9cnicas para hacer esto: una es armar una botonera con c\u00f3digo Javascript, en donde el visitante elige el tama\u00f1o de letra a aplicar en la visualizaci\u00f3n del sitio (cada bot\u00f3n llama a un archivo .CSS diferente que define su propio juego de fuentes y tama\u00f1o de las mismas). La otra es configurar que todas las fuentes sean escalables en funci\u00f3n de una fuente base: para ello, se define el tama\u00f1o de la fuente modelo en pixels y el resto de las fuentes se mide en rem<\/strong> \u2013 lo que significa que son un X % m\u00e1s grandes que la base <\/em>-. Si la base es de 16 pixels y la fuente de encabezados es de 1.5 rem, entonces los t\u00edtulos medir\u00e1n 24 pixels.<\/p>\nUna vez aplicado el esquema de fuentes escalables, se utilizan instrucciones CSS para cambiar el tama\u00f1o de la fuente base (lo que implica alterar el tama\u00f1o de las fuentes vinculadas) seg\u00fan la resoluci\u00f3n de pantalla. Esto se llama configurar el Viewport<\/em>, y para ello se utiliza la instrucci\u00f3n @media screen<\/strong>, en la cual se pueden definir tanto los rangos de resoluci\u00f3n como los nuevos tama\u00f1os de la fuente base.<\/p>\n@media only screen and (max-width: 767px){
\nhtml { font-size: 30px; }
\n}
\n@media only screen and (max-width: 1025px) and (min-width: 768px) {
\nhtml { font-size: 20px; }<\/em><\/strong><\/p>\nEn este ejemplo, la fuente base (para resoluciones menores a 767 pixels de ancho) tiene un tama\u00f1o de 30 pixels (porque uno asume que se trata de un celular o una pantalla peque\u00f1a) y, para resoluciones entre 1024 y 768 pixels (un celular alta gama, una tablet<\/em> o un viejo monitor de computadora), la fuente modelo pasar\u00e1 a tener 20 pixels. Por otra parte \u2013 y siguiendo con el ejemplo antes mencionado del tama\u00f1o rem <\/em>-, la fuente de encabezados tendr\u00e1 45 pixels en resoluciones menores a 767 pixels de ancho, y ser\u00e1 de 30 pixels para una pantalla que oscile entre 1024 y 768 pixels de ancho.<\/p>\nConclusiones:<\/h2>\n
Optimizar la velocidad de nuestro sitio web requiere un esfuerzo adicional y, en muchos casos, es necesario ajustar par\u00e1metros sensibles tanto en la p\u00e1gina como en el servidor que lo aloja; pero los resultados quedan a la vista en el corto plazo, no s\u00f3lo en rendimiento y tr\u00e1fico sino tambi\u00e9n en nuestro posicionamiento en resultados, el cual constituye la meta principal de nuestra estrategia web.<\/p>\n","protected":false},"excerpt":{"rendered":"
Tutoriales SEO: Sintonia fina de sitios web. Recetas y consejos de avanzada para optimizar su pagina y obtener un buen posicionamiento en buscadores<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"http:\/\/localhost\/datacraft2023\/wp-json\/wp\/v2\/pages\/10922"}],"collection":[{"href":"http:\/\/localhost\/datacraft2023\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/localhost\/datacraft2023\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/localhost\/datacraft2023\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/localhost\/datacraft2023\/wp-json\/wp\/v2\/comments?post=10922"}],"version-history":[{"count":0,"href":"http:\/\/localhost\/datacraft2023\/wp-json\/wp\/v2\/pages\/10922\/revisions"}],"wp:attachment":[{"href":"http:\/\/localhost\/datacraft2023\/wp-json\/wp\/v2\/media?parent=10922"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"SEO:](\"http:\/\/localhost\/datacraft2023\/wp-content\/uploads\/2017\/10\/foto-sintonia-seo.jpg\" "\\"SEO:")
<\/p>\n