(26 Jan, 2015, 1:11 pm)DiMaNacho escribió: Discrepo en varias cosas, comentaste que hacer un sitio responsive se hace en una tarde, si, es verdad, si hacés tu propio landing page con tus propias media queries, [...]
(26 Jan, 2015, 1:11 pm)DiMaNacho escribió: No estoy buscando una solución a todos mis problemas, estoy buscando una base que no me implique borrar el html y volver a hacerlo, sino simplemente meter mano en JS y CSS, [...]
Rectifico y te tengo que dar la razon, no me llevo una tarde modificar todo el HTML (y PHP), y tienes razon en que un theme "basico" sin tanta tabla y basura de por medio seria mas beneficioso para empezar de 0 un diseño.
(26 Jan, 2015, 1:11 pm)DiMaNacho escribió: sino no existirían estas comunidades donde ayudan al que no sabe
Es una comunidad de MyBB, donde se ayuda sobre cuestiones de MyBB, no de HTML y CSS. Aunque obviamente si se puede se ayuda.
En cuanto al tema de la velocidad (que es de lo que iba a la pregunta), el tema
es lo que menos cuenta.
Cosas a tener en cuenta:
-
Hosting
No esperes tener un buen ping/carga con un hosting gratuito.
- Localización del hosting y localización de tus visitantes
De nada te sirve esperar un buen tiempo de respuesta con un hosting latinoamericano si tus visitantes son en gran parte españoles.
- Uso de CDN
Los CDN son para explicarlo facil, servidores repartidos por todo el planeta que sirven archivos estaticos (que no cambian, como pueden ser las librerias, o imagenes del diseño del tema), para que el navegador los descarge de forma asincrona o paralela a la carga de la pagina.
OJO, la gente se cree que puede subir miles de archivos CSS y JS a los CDN y que estos se descargaran en nada. Los navegadores tienen un limite de conexiones paralelas, entre 3 y 4.
- Cantidad de archivos JS, CSS, minificacion, uso y posición de los mismos
Por muy rápido que te prometan que sea el tema, si lo empiezas a llenar de tonterías (como nieve que cae en navidad, relojes, animaciones inutiles, etc) se ralentizara mucho.
Lo mismo con el CSS, gracias a dios hemos dejado atras la epoca de los degradados y bordes redondeados, para usar colores planos, lo que llaman "Diseño flat". Eso repercute en menos tiempo de renderizado para el navegador y un archivo CSS mas pequeño.
Al contrario de lo que mucha gente cree, es muchisimo, infinitamente mejor, tener un solo archivo CSS, a tener varios repartidos con poco codigo. Aunque no necesites el mismo codigo en todas las paginas, una se vez se decarga en la cache del navegador no vuelve a descargarse, mientras que de la otra forma se tienen que enviar mas peticiones HTTP, o quedarse en la cola hasta descargar otro archivo CSS. Recomiendo eliminar el codigo {$stylesheets} y colocar manualmente la URL al archivo
global.css. Lo mismo pasa con JS.
Obviamente, minifica todos los archivos JS y CSS, los saltos de linea y espacios en blanco para el navegador son inutiles, y tarda mas en cargar.
Y por ultimo, deberas colocar todos los archivos/scripts al final del DOM (al final del codigo HTML de cada pagina, vamos, en el footer), pues hasta que estos no se cargan no se puede seguir descargando el contenido de la pagina.
- Cantidad, tamaño y formato de las imagenes
No uses miles de iconos y logos/imagenes. Si quieres usar iconos, usa Font-Awesome. Si quieres usar imagenes estaticas, subelas a CDN's. No uses imagenes para fondos de botones. Quita los emoticonos.
Si no quieres quitarlos, igual que con los CSS y JS, deberas ponerlos como una sola imagen y gracias a la propiedad background-position mostrarlos. En vez de decenas de archivos, uno solo.
No uses grandes imagenes en PNG (a no ser que requieras transparencias), GIF's animados (un error que comete mucha gente), el mejor formato para esto es el JPG pues elimina colores que el humano no puede ver y reduce casi a la mitad el peso de una imagen.
- Cantidad y uso de scripts
No solo puede ir lenta la carga de la pagina, si no el servidor. No utilices miles de plugins.
- DOM
No esperes que tu pagina se carge rapido con 10.000 lineas de codigo HTML. Eso en MyBB es una utopia porque hay tablas hasta en la sopa, pero se puede conseguir si sabes de diseño/maquetacion HTML.
Y el
responsive o "compatible con moviles" se hace con los @media queries de CSS3, no hay tutoriales porque hay tantas formas como webs elevado a su proposito multiplicado por su diseño de escritorio.
No confundir flat con responsive,
FLAT ES UN TIPO DE DISEÑO, RESPONSIVE NO. Se suelen confundir porque van de la mano, un diseño flat equivale a una web ligera, ideal para mostrar en moviles.
Saludos.