Tengo un sitio muy grande y tarda bastante tiempo en cargarse. Tarda alrededor de 120 segundos. Lo que estoy intentando hacer es cargar la primera mitad del sitio primero. Luego el usuario puede navegar mientras se cargan las otras partes.
Lo que estoy intentando hacer es lo siguiente.
Según mi conocimiento, sí, ya que Google PageSpeed lo hace. Pero el problema es que si uso PageSpeed tendría que cambiar la configuración de mi servidor DNS, etc. Me gustaría hacerlo yo mismo.
Dado que las páginas tienen la extensión .php y están escritas en lenguaje PHP.
Puede utilizar el concepto de carga perezosa.
Puede cargar solo el contenido necesario durante la carga y luego, usando jquery y ajax, puede cargar el contenido restante.
De esta manera, el usuario puede navegar e interactuar fácilmente con la parte que ya se cargó mientras la otra parte se carga de forma asincrónica.
El método ajax o post de jQuery puede ayudarlo en esto.
Un ejemplo simple podría ser:
Si hay 5 partes de contenido en su página, 2 de ellas deben cargarse de inmediato
La página se cargará con 2 partes cargadas, por lo que tomará mucho menos tiempo que cargar las 5 partes
Después de que se carga el documento, usará ajax para cargar las 3 partes restantes. Ajax enviará una solicitud a la página específica de su sitio web (posiblemente llamada AjaxRequestHandler.php) con algunos parámetros, y esta página procesará su solicitud y generará html para esto y lo enviará de vuelta a su página principal que solo mostrará este html devuelto y todo esto sucederá de forma asíncrona, por lo que el usuario podrá comunicarse con las 2 partes inicialmente cargadas
E incluso si eres nuevo en tecnologías web, supongo que debes tener conocimientos al menos de ajax y llamadas asíncronas, etc., para lograr la carga perezosa.
Editar:
Para esta pregunta
Además de AJAX, ¿hay alguna otra forma de lograr esto?
Creo que puedes probar con iframes si pueden ayudar.
Cargue el contenido principal en la carga de la página sin iframe mientras carga otros contenidos en los iframes después de cargar las páginas.
Este jsFiddle
jsfiddle.net/cGDuV/
puede ayudarlo a comprender la carga perezosa con iframes, mencionado en esta publicación de stackoverflow.
Puedes usar JavaScript para lo mismo si quieres evitar jQuery.
Puedes manipular el búfer de salida para que se vacíe temprano, logrando así lo que buscas en la captura de pantalla que publicaste en tu pregunta. http://www.stevesouders.com/blog/2013/01/31/http-archive-adding-flush/
Puedes cargar perezosamente todas tus imágenes. Aquí hay un plugin de jQuery que lo hace fácilmente http://www.appelsiini.net/projects/lazyload
Puedes combinar todo tu javascript en un solo archivo. Lo mismo con tus archivos css. Esto ayudará la velocidad.
Puedes incorporar la caché, cabeceras de expiración y compresión gzip/deflate https://github.com/h5bp/html5-boilerplate/blob/master/dist/.htaccess
Te sugiero que cargues tu basura de widgets de javascript de terceros (botones de Google+, botones de Facebook Me gusta, sociales, cosas de Twitter) de manera asincrónica no bloqueante para que no ralenticen la página al principio. http://css-tricks.com/thinking-async/
Optimiza tus imágenes tanto como sea posible. http://kraken.io/
Utiliza un CDN http://www.maxcdn.com/
Finalmente prueba tu sitio y observa dónde está el mayor cuello de botella y dónde puedes mejorar el sitio para la optimización de velocidad. Utiliza la función de gráfico de cascada http://www.webpagetest.org/
Una de las cosas que puedes hacer es cargar todo lo esencial (la mitad superior) de la página normalmente y luego utilizar javascript/ajax para cargar la segunda mitad de la página. Esta es una técnica muy común (y a menudo se utiliza para cargar imágenes).
Aquí tienes un excelente tutorial de jQuery para Diseñadores, que explica cómo utilizar jQuery para cargar imágenes de forma asíncrona después de que la página se cargue. http://jqueryfordesigners.com/image-loading/
Habiendo dicho eso, un tiempo de carga de dos minutos parece excesivo. Tal vez debas comprobar si hay algo que esté ralentizando tu servidor.
Necesitas determinar por qué el sitio se carga lentamente. ¿Cuál es el tamaño de los datos que estás enviando? Google y Firefox tienen herramientas para desarrolladores web que te ayudan a determinar qué elementos están tardando más tiempo en cargar. Una vez que hayas identificado al culpable, intenta cargar los elementos problemáticos de forma asíncrona.
Echa un vistazo a este artículo sobre solicitudes asíncronas: https://segment.io/blog/how-to-make-async-requests-in-php/
En mi opinión, necesitas una solución de desplazamiento infinito. Es decir, tener una cantidad fija de contenido por "página" (podría ser una altura aproximada de 1500px). Utiliza jQuery para cargar otra "página" cuando el usuario desplaza hacia abajo una cantidad determinada.
Si realmente quieres cargar todo el contenido incondicionalmente, simplemente utiliza el mismo enfoque y, al estar listo el documento, activa la carga de la siguiente página. Luego, repite el proceso de carga hasta que se haya cargado todo. De esta manera, cargarás la primera "página" y pospondrás el contenido "debajo del pliegue" para solicitudes posteriores.
Lo que quieres es lo que hace Facebook Bigpipe y aquí hay una publicación relevante de SO: Técnica del algoritmo Bigpipe de Facebook
Hay otras soluciones que involucran todo tipo de Javascript, pero dado que quieres PHP y Facebook utiliza PHP, debes leer sobre Bigpipe. Juho incluso tiene un ejemplo escrito en PHP, así que eso debería satisfacer tus requisitos de PHP (pero sí requiere js pero no AJAX).
Recursos de precarga: la página web requiere archivos grandes para su carga, a menudo se beneficia de cambiar el orden en que se solicitan esos archivos al servidor. A veces, tiene sentido descargar archivos antes de que sean necesarios, para que estén disponibles instantáneamente una vez solicitados. Cuando los recursos requeridos para una página se pueden cargar anticipadamente, la latencia de red percibida por el usuario para esa página puede reducirse significativamente e incluso eliminarse. Cuando ejecutas Google PageSpeed Insights y ves el resultado, verás cómo solucionar los problemas en tu sitio web.
Algunos consejos para cargar el sitio más rápido:
Otra cosa más, cuando cargas una página web y si estás utilizando php con Smarty, puedes usar este complemento que reduce el número de solicitudes http al servidor y hace que el sitio se cargue más rápido mediante la combinación de todas las solicitudes de recursos js y css en una sola solicitud http.
Alternativamente, es posible que estés buscando estos complementos.
http://masonry.desandro.com/
http://isotope.metafizzy.co/
http://www.wookmark.com/jquery-plugin
¿Todo esto tiene que estar en la misma página? ¿Tiene sentido dividir el contenido en varias páginas? ¿Alguno de ellos puede retrasarse hasta que la persona lo solicite? ¿Se pueden agrupar en pestañas? Por ejemplo, las pestañas ocultas podrían cargarse de forma tardía.
Dedica un tiempo en pensar seriamente en reestructurar el contenido de otras formas. Es posible que puedas encontrar un arreglo alternativo que simplifique el problema.
Teniendo en cuenta todo lo mencionado anteriormente, puedes considerar almacenar en caché partes de tus datos/código HTML con memcache u otra forma posible para evitar generarlos cada vez. Por supuesto, esto depende en gran medida de la frecuencia con la que cambian los datos.
¿Los navegadores no renderizan el documento a medida que llega? Lo que sea que coloques al principio del archivo será recibido primero por el cliente y, por lo tanto, se mostrará primero. Por ejemplo, cuando intentas ver un archivo de imagen grande en línea, se carga de arriba abajo. Lo mismo ocurre con las páginas web. ¡Simplemente coloca el contenido que deseas cargar primero en la parte superior de la página!
Respuesta a la pregunta uno: sí Respuesta a la pregunta dos: arriba Respuesta a la pregunta tres: Nada, solo coloca la página en el orden correcto.
Bueno, la idea es más o menos la misma que la descrita por Pawan Nogariya arriba. Deberás obtener vistas y datos de forma asíncrona para luego mostrarlos. Pero esto significa que nunca redireccionarás ni volverás a ninguna otra página, en su lugar obtendrás cada vista a través de AJAX. Esto hará que tu aplicación sea SPA (Single Page Application) como Gmail. Además, también significará que tendrás que llevar un registro de lo que se ha renderizado y lo que no, dejándote en un lío. Así que en lugar de hacer todo a tu manera, ya existen frameworks desarrollados y populares disponibles que te permiten hacer eso, pero también hacen que sea una SPA. Lo que significa que tu aplicación no hace "posts" al servidor como en las redirecciones, sino que todo se hace mediante Ajax.
Puedes usar Backbone (Backbone.js), Knockout (Knockout.js) y muchos otros para lograr esto. Estos son frameworks basados en JavaScript que ayudan a lograr lo que acabas de preguntar y también hay ejemplos y tutoriales fácilmente disponibles. Puedes usarlo con cualquier lenguaje, ya que nosotros lo estamos usando con C# (MVC) para una aplicación relativamente grande.
¡esto va a ser feo! Definitivamente deberías considerar usar llamadas ajax para cargar fragmentos de página DESPUÉS de que se haya cargado una primera etapa de contenido. Esto romperá casi todos los estándares web conocidos, pero podría renderizar el sitio web por partes....
dicho esto: aquí está lo feo
Primero: deshazte de la etiqueta <html> de tu sitio web, comienza con <head>. NO uses una etiqueta <body> tampoco. Ahora envía tu código html en el orden en que quieres que se cargue (primero arriba) usando echo ... después de cada etiqueta de cierre de un grupo (por ejemplo </table> o </div>) usa flush(); ob_flush(); esto enviará todo el contenido conocido al navegador de inmediato. El navegador decidirá si puede renderizar el contenido conocido o no y si lo hará (basado en las especificaciones del navegador y la configuración del usuario), pero en su mayoría lo hará. Algunos navegadores les gusta esperar la etiqueta de cierre del body, por eso la eliminamos, otros incluso esperan la etiqueta de cierre del html (safari afair), por eso también la eliminamos. Si utilizas el escenario de echo-flush sabiamente, deberías poder dividir la página en partes que se puedan representar y la mayoría de los navegadores las mostrarán sin errores.
Nuevamente... no lo hagas de esta manera... es malo, feo y ni siquiera se acerca a los estándares web.
Pero tú lo pediste.
Para su pregunta
¿Excepto AJAX hay alguna forma de evitar esto?
Creo que puedes intentar usar iframes si pueden ayudar.
Cargar el contenido principal en la carga de la página sin iframe mientras se cargan otros contenidos en los iframes después de que se haya cargado la página.
Este jsFiddle
jsfiddle.net/cGDuV/
te puede ayudar a comprender la carga perezosa con iframes, mencionado en esta publicación de stackoverflow.
Puedes usar JavaScript para lo mismo si quieres evitar jQuery.
¿Con PHP puro? No es inteligente.
$(function() { $('#body').delay(1).fadeOut(); });
Ejemplo de Fiddle: http://jsfiddle.net/r7MgY/