¿Tag como selector y "critical path"?

Telúrico · #1 (**permalink**) 22/12/2015, 07:17

Muy buenas!!

Un cliente me ha pasado una serie de especificaciones a la hora de realizar una maquetación, y entre ellas están dos que no tengo claras.

Primero:
Me dicen que utilice un ”critical path”, y me lo explican asi:

Cita:

El critical path es un css que contiene solo la parte “basica” para pintar el primer “pantallazo”. El segundo css, cargaría el resto. (el critical path seria incluido por los programadores en el <head> del código, en linea y el segundo se cargaría asincronamente).

He buscado información pero no encontré gran cosa la verdad...

Segundo:
Me dicen no usar ID's para dar estilo, que en su lugar use clases y tags. Las clases ya se como van, pero los tags... ni se a que se refieren.

¡Alguna ayuda?

ArturoGallegos · #2 (**permalink**) 22/12/2015, 12:17

lo primero que menciona nunca lo habia escuchado pero en una busqueda rapida de 5 segundos en google me ha llevado a esto
https://developers.google.com/web/fu...ng-path/?hl=es

Me ha resultado interesante asi que tomare el curso (es gratis), espero que te sirva.

Igual en la busqueda aparecen muchos mas resultados.
https://www.google.com.mx/search?q=html+critical+path

en cuanto a las tags se refiere a las tags html, por ejemplo si en tu html tienes

Código HTML:

Ver original<h1>mi titulo</h1>

en lugar de agregarle una clase o id puedes hacer uso de la tag en tu CSS

Código CSS:

Ver originalh1{....}

Tambien, no te olvides de los selectores que se heredan, selectores adyacentes como +, attr="" , attr^="" y de mas, para hacer el menor uso de codigo.

Telúrico · #3 (**permalink**) 22/12/2015, 14:09

Cierto!! "tag = Etiqueta"... se refiere a las etiquetas html de toda la vida ...

Y con respecto al css critical path... ya ves que mi inglés es nefasto

, el problema es que no encontré nada en español sobre esto (en inglés si), por eso no tengo claro de que va ni como se hace. He encontrado páginas como esta que supuestamente lo hacen ellas solas, pero hice una prueba y fue una chapuza xDD, también he visto plugins para Gulp y Grunt, pero no trabajo con ellos y no se como va.

No se si es algo que se hace automatico, como puede ser minificar el css, es algo que hay que tener en cuenta a la hora de ir maquetando la web o es algo que se hace a mayores...

ArturoGallegos · #4 (**permalink**) 22/12/2015, 15:04

el minificar el CSS muchas veces se hace hasta haber terminado el sitio, algunos otros como yo, desde que codifico lo realizo en esa estructura (una linea por clase) y no me hace falta comprimir... salvo que requiera usar el hard minify que es pasar todo tu archivo a una sola linea.

el deferred de imagenes y JS lo puedes dejar hasta el final, aunque cuando tienes un sitio muy grande puede ser mejor opcion realizarlo al momento de insertarlo, o bien crear alguna funcion que reestructure las imagenes para hacer el deferred.

Para imagenes yo uso LazyLoad que es una libreria JS, esta ayuda bastante en la carga de sitios, pero algo a considerar es el peso de las imagenes VS el peso del JS requerido, si la diferencia no es realmente significativa y/o la cantidad de imagenes no es demasiada yo optaria por no utilizar nada.

Aun no termino el curso, no hay mucho tiempo, uno de estos dias si aun no lo vez o encuentras algo te comento que aprendi y como va la movida, aunque realmente hasta donde voy solo el defer de los js es algo nuevo, el resto si bien no sabia el nombre a ese estilo ya es algo que hacia.