Как сначала сделать первую часть сайта? (Как в Google PageSpeed)

Вы можете использовать концепцию ленивой загрузки.

Вы можете загружать только контент, который необходим во время загрузки, а затем с помощью jquery и ajax вы можете загрузить оставшееся содержимое.

Таким образом, пользователь может легко перемещаться и взаимодействовать с уже загруженной частью, в то время как другая часть будет загружаться асинхронно.

Метод jQuery ajax или post может помочь вам в этом.

Простым примером может быть,

Если на вашей странице имеется 5 частей содержимого, необходимо немедленно загрузить 2

1. Страница будет загружена с 2-мя частями, поэтому потребуется меньше времени, чем загрузка 5 частей

2. После загрузки документа вы будете использовать ajax для загрузки оставшихся 3-х частей. Ajax отправит запрос на определенную страницу вашего сайта (может быть, возможно, назван AjaxRequestHandler.php) с некоторыми параметрами, и эта страница обработает ваш запрос и сгенерирует html для этого и отправит его обратно на главную страницу, которая просто покажет это html, и все это происходит асинхронно, поэтому пользователь сможет общаться с первоначально загруженными 2 частями

И даже если вы новичок в веб-технологиях, я полагаю, что вам нужно знать как минимум аякс, асинхронные вызовы и т. Д. Для достижения ленивой загрузки.

Редактировать :

Для вашего вопроса

За исключением AJAX Есть ли способ для этого?

Я думаю, вы можете попробовать iframes, если они могут помочь.

Загрузка основного содержимого при загрузке страницы без iframe при загрузке другого содержимого в iframes после загрузки страниц.

Это jsFiddle

jsfiddle.net/cGDuV/

может помочь вам разобраться в ленивой загрузке с iframe, упомянутой в этой статье stackoverflow.

Вы можете использовать javascript для того же, если хотите избежать jquery.

Вы можете манипулировать выходным буфером таким образом, чтобы он мгновенно стирался, тем самым достигая того, что вы сделали после скриншота, который вы разместили в своем вопросе. http://www.stevesouders.com/blog/2013/01/31/http-archive-adding-flush/

Вы можете lazyload все ваши изображения. Вот плагин jquery, который делает это легко http://www.appelsiini.net/projects/lazyload

Вы можете комбинировать все js в одном файле. То же самое с вашими файлами css. Это поможет скорости.

Вы можете включить кеширование, истечь заголовки и сжатие gzip / deflate https://github.com/h5bp/html5-boilerplate/blob/master/dist/.htaccess

Я бы посоветовал вам загружать ваш сторонний виджет виджета javascript (кнопки Google+, fabebook, такие как кнопки, социальные, твиттерные вещи) в неблокирующем асинхронном режиме, чтобы он не замедлял страницу в начале. http://css-tricks.com/thinking-async/

Оптимизируйте свои изображения как можно больше. http://kraken.io/

Используйте CDN http://www.maxcdn.com/

Наконец, проверьте свой сайт и посмотрите, где находится большое узкое место, и где вы можете улучшить сайт для оптимизации скорости. Используйте функцию диаграммы водопада http://www.webpagetest.org/

Одна из вещей, которую вы можете сделать, – это загрузить всю необходимую (верхнюю половину) страницы, а затем использовать javascript / ajax для загрузки второй половины страницы. Это очень распространенная техника (и часто используется для загрузки изображений).

Вот отличный учебник от jQuery для дизайнеров, идя через как использовать jQuery для загрузки изображений асинхронно после загрузки страницы. http://jqueryfordesigners.com/image-loading/

Сказав это, двухминутное время загрузки кажется очень чрезмерным. Возможно, вам стоит проверить, есть ли что-то, что может замедлить работу вашего сервера.

Вам нужно определить, почему сайт медленно загружается. Каков размер данных, которые вы отправляете? В Google и Firefox есть инструменты веб-разработчика, которые помогут вам определить, какие элементы занимают самую большую нагрузку. Как только вы определили виновника, попробуйте асинхронно загружать худших нарушителей.

Ознакомьтесь с этой статьей о запросах aync: https://segment.io/blog/how-to-make-async-requests-in-php/

по-моему, вам нужно бесконечное прокручивание. То есть, фиксированное количество контента на «страницу» (может быть оценено высотой 1500 пикселей). Используйте jQuery для загрузки другой «страницы», когда пользователь прокручивает вниз установленную величину.

Если вы действительно хотите безоговорочно загружать весь контент, просто используйте тот же подход, а в режиме готовности к документу загрузите следующую страницу. Цикл загрузчика страниц до загрузки всего объекта. Таким образом, вы загружаете первую «страницу» и откладываете содержимое «ниже складки» на последующие запросы.

То, что вы хотите, – это то, что делает Facebook Bigpipe, и вот релевантная SO-почта: алгоритм технологии Bigpipe в Facebook

Существуют и другие решения, содержащие всевозможные Javascript, но так как вы хотите, чтобы PHP и Facebook использовали PHP, вы должны прочитать на Bigpipe. У Juho даже есть пример, написанный на PHP, поэтому он должен соответствовать вашим требованиям PHP (но да, он по-прежнему требует js, но не AJAX).

Предварительная загрузка ресурсов, которые веб-страница требует больших файлов для загрузки, часто может быть использована для изменения порядка, в котором эти файлы запрашиваются с сервера. Иногда имеет смысл загружать файлы, прежде чем они будут необходимы, чтобы они были мгновенно доступны после запроса. Когда ресурсы, требуемые для страницы, могут быть загружены заранее, пользовательская латентность сети для этой страницы может быть значительно уменьшена или даже устранена. Когда вы запустите подсказки страниц в формате Google и посмотрите результат, вы увидите, как устранить проблемы на вашем веб-сайте.

Некоторые советы по загрузке сайта быстрее:

• Сделайте меньше HTTP-запросов
• Добавить заголовок будущего будущего
• Gzip компоненты вашей страницы
• Минимизировать JavaScript, CSS и HTML

Еще одна вещь при загрузке веб-страницы, и если вы используете php с smarty, вы можете использовать этот плагин, который уменьшает количество HTTP-запросов на вашем сервере и ускоряет загрузку сайта, объединяя все запросы js и css-ресурса в один HTTP-запрос ,

В качестве альтернативы вы можете искать эти плагины.

http://masonry.desandro.com/

http://isotope.metafizzy.co/

http://www.wookmark.com/jquery-plugin

Все это должно быть на одной странице? Имеет ли смысл разделить контент на несколько страниц? Может ли какая-то из них задерживаться до тех пор, пока человек не попросит об этом? Его можно сгруппировать в вкладки? Например, скрытые вкладки можно было лениво загружать.

Подумайте о реструктуризации контента другими способами. Возможно, вы сможете найти альтернативную схему, которая упростит проблему.

Имея в виду все, что было упомянуто выше, вы можете подумать о кешировании частей вашего кода data / html с помощью memcache или любым другим способом, чтобы вы каждый раз пропускали свое поколение. Конечно, это во многом зависит от того, как часто изменяются данные.

Не просматривают ли браузер документы, как они поступают? Независимо от того, что вы помещаете в верхнюю часть файла, клиент сначала получит его и, следовательно, будет отображаться первым. Например, когда вы пытаетесь просмотреть очень большой файл изображения в Интернете, он загружается сверху вниз. То же самое можно сказать и о веб-страницах. Просто разместите контент, который хотите загрузить, сначала в верхней части страницы!

Ответьте на вопрос один: да Ответ на вопрос два: выше Ответьте на вопрос три: ничего, просто поставьте страницу в правильном порядке.

Ну, идея более или менее такая же, как описано Паваном Ногарией выше. Вам нужно будет асинхронно получать представления и данные, а затем отображать их. Но это означает, что вы никогда не будете перенаправлять или отправлять сообщения на любую другую страницу, а получите каждое представление через ajaz. Это сделает ваше приложение SPA (одностраничное приложение), как Gmail. И это также означает, что вам нужно следить за тем, что было рецензировано, а что нет, оставив вас в беспорядке. Таким образом, вместо того, чтобы делать все по-своему, есть уже разработанные и популярные фреймворки, которые позволяют вам это делать, но они также делают его SPA. Это означает, что ваше приложение не «отправляет» на сервер, как в перенаправлении, но все работает с помощью Ajax.

Вы можете использовать Backbone ( Backbone.js ), Knockout ( Knockout.js ) и другие, чтобы достичь этого. Это основанные на javascript фреймворки, которые помогают достичь того, что вы только что задали, и могут расшириться, а также учебные пособия также легко доступны. Вы можете использовать его на любом языке, поскольку мы используем его с C # (MVC) для относительно большого приложения.

это будет уродливо! Вы должны обязательно рассмотреть возможность использования аякс-вызовов для загрузки фрагментов страницы ПОСЛЕ загрузки первого контента! Это сломает почти все известные веб-стандарты, но это может сделать сайт по частям ….

это сказано: вот уродливые вещи

Во-первых: избавиться от <html> вашего сайта, начать с <head> НЕ использовать <body> . Теперь отправьте свой html-код в том порядке, в котором вы хотите его загрузить (вверху сверху), используя echo ... после каждого закрывающего тега группы (скажем </table> или </div> ) используйте flush(); ob_flush(); 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(); });

Пример скрипта: http://jsfiddle.net/r7MgY/