Experimento con canonical, en el próximo post mostraré resultados, mirar el final de este para intentar entender algo |
Muchos ya nos hemos estado "picando" anteriormente con esta tool para mejorar esa puntación, yo particularmente siempre solucionaba estos puntos ya que es bastante sencillo hacerlo
De estos warnings no voy a hablar, ya que cómo he dicho son bastante sencillos de solventar, en este post quería compartir el cómo he solucionado los dos puntos que para mi han sido, y son, los más difíciles.
No voy a entrar al detalle de estos mensajes, primero porque no tengo el conocimiento suficiente para explicar cómo se renderiza el DOM en el navegador, algo he investigado... al final la cosa va de matrices, por quí podéis empezar para quién queira invesztigar. El método que he usado es bastante simple, funciona y parece ser, si hacemos caso a PageSpeed Insights, que para SEO es totalmente válido.
ACTUALIZACIÓN (18 de octuibre del 2017
En Safari no se veía correctamente así que he actualizado el códgo para solventarlo
|
Si tienes así el código, usando las clásicas llamdas a hojas de estilos y ficheros javascript, lo más probable es que Pagespeed te alerte de elementos que pueden bloquear la carga de contenido de la parte superior.
href="https://www.mecagoenlos.com/Posicionamiento/assets/corporate/css/style.css" rel="stylesheet">
- La llamadas a los ficheros de estilos prioritarios
Los cargamos mediante la función antes creada, en mo caso estos son los que me provocan el bloquei según PageSpeed.
<script> loadCSS("/Posicionamiento/assets/corporate/css/style-responsive.css"); loadCSS("/Posicionamiento/assets/corporate/css/style.css"); loadCSS("/Posicionamiento/assets/plugins/font-awesome/css/font-awesome.min.css");
No sé por qué, pero si cargo todos de esta forma me salta el bloqueo de contenido en PageSpeed, a veces sí y otras no.
- Llamadas a hojas de estilo no prioritarias
El puntoo clave aquí es el onload="this.rel='stylesheet'", un truco muy avispado, que consigue que el navegador no tome esto como una hoja de estilos hasta que el contenido se cargue comlpetamente, de esta manera no bloquea la carga del contenido.
async href="https://www.mecagoenlos.com/Posicionamiento/assets/plugins/bootstrap/css/bootstrap.min.css" rel="preload" as="style" onload="this.rel='stylesheets'"> async href="https://www.mecagoenlos.com/Posicionamiento/assets/corporate/css/custom.min.css" rel="preload" as="style" onload="this.rel='stylesheets'"> async href="https://www.mecagoenlos.com/Posicionamiento/assets/pages/css/components.css" rel="preload" as="style" onload="this.rel='stylesheets'">
Aquí es dónde he tenido el mayor problema con el navegador Safari, y NO he dado de solventarlo mediante CSS y JavaScript, ¿entonces cómo lo he hecho? pues a lo puky...
Cómo no he sido capaz de hacer que se vea bien en Safari, y a la vez que PageSpeed no me alerte de que se está bloqueando el contenido, al final he decidio añadir el código conflictivo, en color azu,l que se añado solo a las hojas de estilos, cuándo el User Agent no sea Safari.
async rel="preload" as="style" onload="this.rel='stylesheets'
Esta comprobación dell User Agent del usuario la chago coni php, ya que tenñia la función ya hecha, pero seguro que se puede haer correctamente usando sollo JavaScript,y una correcta y ordenada carga de las hojas de estilo. De momento yo lo he hecho al estilo punky,
Cuando detectamos que es Safari hacemos una llamada normal a las hojas de estilo. Supongo que se podría hacer usando el mismo método (comprobando user agent) pero desde JavaScript, y así no mezclarr código en el lado del servidorr, cuándo tenga tiempo lo volveré a probar y a ver si lop consigo.
- Llamadas a ficheros js
Hemos visto al principio cómo lo cargábamos, en ese caso lo he puesto encima del porque me daba falos de jQuery , y para que no se rompiera todo la introduzco sasí.
<script type="text/javascript"> function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "https://www.mecagoenlos.com/Posicionamiento/assets/plugins/bootstrap/js/bootstrap.min.js"; document.body.appendChild(element); var element = document.createElement("script"); element.src = "https://www.mecagoenlos.com/Posicionamiento/assets/corporate/scripts/back-to-top.js"; document.body.appendChild(element); var element = document.createElement("script"); element.src = "https://www.mecagoenlos.com/Posicionamiento/assets/plugins/jquery-migrate.min.js"; document.body.appendChild(element); var element = document.createElement("script"); element.src = "https://www.mecagoenlos.com/Posicionamiento/assets/plugins/fancybox/source/jquery.fancybox.pack.js"; document.body.appendChild(element); var element = document.createElement("script"); element.src = "https://www.mecagoenlos.com/Posicionamiento/assets/corporate/scripts/layout.js"; document.body.appendChild(element); var element = document.createElement("script"); element.src = "https://www.mecagoenlos.com/includes/scripts.min.js"; document.body.appendChild(element); } if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload); else window.onload = downloadJSAtOnload;
Cómo podéis verr hago un excesivo uso de ficheros externos entre .js y hjas de estilos, Seguramoente me sobran la mitad y cómo sigo haciendo cambiios para ver las distintas maneras de hacerlo ahora me toca poner orden y corregir algún fallo que mde da a veces
EXPERIMENTOEste es el texto deferencial del post original, y desde dónde estamos enlazando (ihaksopez) a una url no indexada con palabra inexistenteOSEGUIRÉ ACTUALIZANDO!
¿Algún otro métiodo sencillo?