У меня очень большой сайт, и он довольно долго загружается. Это занимает около 120 секунд. Я пытаюсь добиться того, чтобы первая половина сайта загружалась первой. Затем пользователь может осуществлять просмотр, пока другие части загружаются.
Я пытаюсь сделать следующее:
На мскоми знании, да, Google PageSpeed делает это. Но проблема в том, что если я использую PageSpeed, мне придется изменить настройки DNS-сервера и т. д. Я бы хотел сделать это самостоятельно.
При условии, что страницы имеют расширение .php и написаны на языке PHP.
Вы можете использовать концепцию ленивой загрузки.
Вы можете загружать только содержимое, которое необходимо при загрузке, а затем, используя jquery и ajax, загрузить оставшееся содержимое.
Таким образом, пользователь сможет легко просматривать и взаимодействовать с уже загруженной частью, пока другая часть будет загружаться асинхронно.
jQuery ajax или метод post могут помочь вам в этом.
Простым примером может служить то, что
Если на вашей странице есть 5 частей содержимого, из которых 2 нужно загрузить немедленно.
Страница будет загружена с загруженными 2 частями, поэтому это займет гораздо меньше времени, чем загрузка 5 частей.
После загрузки документа вы будете использовать ajax для загрузки остальных 3 частей. Ajax отправит запрос на конкретную страницу вашего веб-сайта (может иметь имя AjaxRequestHandler.php) с некоторыми параметрами, и эта страница будет обрабатывать ваш запрос и генерировать html для него, а затем отправит его обратно на основную страницу, которая просто покажет этот возвращенный html. Все это будет происходить асинхронно, поэтому пользователь сможет взаимодействовать с первоначально загруженными 2 частями.
И даже если вы новичок в веб-технологиях, я предполагаю, что вам нужно знать хотя бы ajax и асинхронные вызовы и т. Д. для реализации ленивой загрузки.
Редактировать:
По вашему вопросу
Кроме AJAX есть другой способ?
Думаю, что вы можете попробовать использовать фреймы, если они могут помочь.
Загрузка основного содержимого при загрузке страницы без фрейма, в то время как другое содержимое загружается во фреймах после загрузки страницы.
Этот jsFiddle
jsfiddle.net/cGDuV/
может помочь вам понять ленивую загрузку с использованием iframe, упомянутую в этом сообщении на stackoverflow.
Вы можете использовать javascript для этого, если хотите избежать jquery.
Вы можете манипулировать буфером вывода так, чтобы он сбрасывался раньше, тем самым достигая того, что вы видите на скриншоте, добавленном в вашем вопросе. http://www.stevesouders.com/blog/2013/01/31/http-archive-adding-flush/
Вы можете лениво загружать все ваши изображения. Вот плагин JQuery, который делает это легко http://www.appelsiini.net/projects/lazyload
Вы можете объединить все ваши js-файлы в один файл. То же самое можно сделать с css-файлами. Это поможет ускорить загрузку.
Вы можете использовать кэширование, заголовки expires и сжатие gzip/deflate https://github.com/h5bp/html5-boilerplate/blob/master/dist/.htaccess
Я бы посоветовал загружать сторонний javascript-блок (кнопки Google+, кнопки like Facebook, социальные кнопки, Twitter) асинхронным способом, чтобы не замедлять загрузку страницы в начале. http://css-tricks.com/thinking-async/
Оптимизируйте свои изображения насколько это возможно. http://kraken.io/
Используйте CDN http://www.maxcdn.com/
Наконец, протестируйте ваш сайт и определите, где находится основной узкое место и где можно улучшить сайт для оптимизации скорости. Используйте функцию диаграммы загрузки http://www.webpagetest.org/
Одна из вещей, которую вы можете сделать, это загрузить все необходимое (верхнюю половину) страницы обычным образом, а затем использовать JavaScript/ajax для загрузки второй половины страницы. Это очень распространенная техника (и часто используется для загрузки изображений).
Вот отличное руководство от jQuery for Designers, в котором показывается, как использовать jQuery для асинхронной загрузки изображений после загрузки страницы. http://jqueryfordesigners.com/image-loading/
Сказав это, время загрузки в две минуты кажется чересчур долгим. Возможно, вам следует проверить, есть ли что-то, что может замедлить ваш сервер.
Вам нужно определить, почему сайт загружается медленно. Каков размер данных, которые вы отправляете? У Google и Firefox есть инструменты веб-разработчика, которые помогут вам определить, какие элементы загружаются самыми долгими. После определения виновника попробуйте загрузить наихудшие элементы асинхронно.
Ознакомьтесь с этой статьей об асинхронных запросах: https://segment.io/blog/how-to-make-async-requests-in-php/
На мой взгляд, вам нужно использовать бесконечную прокрутку. То есть, иметь фиксированное количество контента на "странице" (может составлять около 1500 пикселей высоты). Используйте jQuery, чтобы загрузить еще одну "страницу", когда пользователь прокручивает вниз на определенное расстояние.
Если вы действительно хотите безоговорочно загрузить весь контент, просто используйте тот же подход и при загрузке документа запустите загрузку следующей страницы. Повторяйте загрузку страницы, пока все не будет загружено. Таким образом, вы загружаете первую "страницу" и откладываете контент "ниже складки" для последующих запросов.
Что вы хотите, то и делает Facebook Bigpipe, и вот соответствующий пост на SO: Facebook Bigpipe Technique Algorithm
Есть и другие решения, включающие все виды JavaScript, но так как вы хотите PHP, а Facebook использует PHP, вам следует изучить Bigpipe. У Juho даже есть пример, написанный на PHP, так что это должно удовлетворить ваши требования к PHP (но да, он все еще требует JS, но не AJAX).
Предварительная загрузка ресурсов веб-страницы, требующих больших файлов для загрузки, часто может получить преимущество от изменения порядка запроса этих файлов с сервера. Иногда имеет смысл загружать файлы до тех пор, пока они не понадобятся, чтобы они были мгновенно доступны по запросу. Когда необходимые ресурсы для страницы могут быть загружены заранее, воспринимаемая пользователем сетевая задержка для этой страницы может быть значительно снижена или даже устранена. Когда вы запускаете Google pagespeed insights и видите результат, вы увидите, как исправить проблемы на вашем веб-сайте.
Некоторые советы для более быстрой загрузки сайта:
Еще одна вещь при загрузке веб-страницы и если вы используете PHP с Smarty, вы можете использовать этот плагин, который уменьшает количество HTTP-запросов к вашему серверу и ускоряет загрузку сайта, объединяя все запросы ресурсов js и css в один единственный HTTP-запрос.
В качестве альтернативы, вам может потребоваться эти плагины.
http://masonry.desandro.com/
http://isotope.metafizzy.co/
http://www.wookmark.com/jquery-plugin
Должно ли все это находиться на одной странице? Есть ли смысл разделить контент на несколько страниц? Может ли некоторое из него быть отложено до того момента, как его запросит пользователь? Можно ли объединить его во вкладки? Скрытые вкладки могут быть лениво загружены, например.
Тщательно подумайте о перестройке контента другими способами. Возможно, вы сможете придумать альтернативное расположение, которое упростит проблему.
Имея в виду все вышесказанное, вы можете подумать о кэшировании частей вашего кода данных/HTML с помощью Memcache или любым другим возможным способом, чтобы пропустить его генерацию каждый раз. Конечно, это зависит от того, насколько часто данные изменяются.
Браузеры рендерят документ по мере его получения? Что бы вы не разместили вверху файла, будет получено клиентом первым и, следовательно, будет отображаться в первую очередь. Например, при попытке просмотреть очень большой изображение онлайн, оно загружается сверху вниз. То же самое относится к веб-страницам. Просто разместите контент, который вы хотите загрузить первым, вверху страницы!
Ответ на вопрос один: да. Ответ на вопрос два: выше. Ответ на вопрос три: ничего не делать, просто упорядочить страницу.
Идея в основном такая же, как описано выше Паваном Ногария. Вам нужно будет асинхронно загружать представления и данные, а затем отображать их. Но это означает, что вы никогда не будете перенаправляться или отправляться обратно на другую страницу, а вместо этого будете получать каждое представление через Ajax. Это сделает ваше приложение одностраничным (SPA), подобным Gmail. И, это также означает, что вам нужно будет отслеживать, что было отрисовано, а что нет, что приведет к путанице. Так что, вместо того, чтобы делать все по-своему, уже разработаны и популярные фреймворки, которые позволяют вам делать это, но они также делают SPA. Что означает, что ваше приложение не отправляет запрос на сервер как в случае перенаправления, а все делается с помощью Ajax.
Вы можете использовать Backbone (Backbone.js), Knockout (Knockout.js) и многие другие, чтобы достичь этого. Это фреймворки на базе JavaScript, которые помогают достигнуть того, что вы только что спросили, и есть множество примеров и учебных материалов. Вы можете использовать их с любым языком, так как мы используем их с C# (MVC) для относительно большого приложения.
это будет ужасно! Вы определенно должны рассмотреть использование ajax-вызовов для загрузки фрагментов страницы ПОСЛЕ загрузки первого этапа контента! Это противоречит практически всем известным веб-стандартам, но это может отобразить веб-сайт частями...
После этого: избавьтесь от тега <html> на вашем веб-сайте, начните с тега <head>, НЕ используйте тег <body>. Теперь отправляйте свой HTML-код в том порядке, в котором вы хотите, чтобы он загружался (сначала верх), используя echo ... после каждого закрывающего тега группы (например, </table> или </div>) используйте flush(); ob_flush();, это отправит весь известный контент в браузер немедленно. Браузер теперь решает, может ли он отобразить известный контент или нет и будет ли (на основе определенных браузером и пользовательских настроек), но, за редким исключением, он сделает это. Некоторые браузеры, например, любят ждать закрывающего тега body, поэтому мы его удалили, другие даже ждут закрывающий тег html (safari afair), поэтому мы удалили и его. Если вы используете echo-flush сценарий разумно, вы должны иметь возможность разделить страницу на отображаемые части, которые большинство браузеров будут отображать без ошибки.
Еще раз... не делайте это... это плохо, уродливо и далеко не соответствует каким-либо веб-стандартам.
Но вы просили об этом.
Для вашего вопроса
Кроме AJAX есть ли другой способ обойти это?
Я думаю, вы можете попробовать использовать iframes, если они могут помочь.
Загрузка основного содержимого при загрузке страницы без использования iframe, а загрузка другого содержимого в iframes после загрузки страницы.
Вот этот jsFiddle
jsfiddle.net/cGDuV/
может помочь вам понять ленивую загрузку с использованием iframe, упомянутую в этом посте на stackoverflow.
Вы можете использовать JavaScript для этого, если хотите избежать jQuery.
Чистым PHP? Не слишком умно.
$(function() { $('#body').delay(1).fadeOut(); });
Пример на Fiddle: http://jsfiddle.net/r7MgY/