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

Ответ 1

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

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

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

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

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

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

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

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

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

Изменить:

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

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

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

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

Этот jsFiddle

jsfiddle.net/cGDuV/

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

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

Ответ 2

Вы можете манипулировать выходным буфером таким образом, чтобы он мгновенно стирался, тем самым достигая того, что вы сделали после скриншота, который вы разместили в своем вопросе. 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/

Ответ 3

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

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

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

Ответ 4

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

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

Ответ 5

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

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

Ответ 6

То, что вы хотите, - это то, что Facebook делает Bigpipe и здесь находится соответствующая публикация SO: Алгоритм техники Bigpipe в Facebook

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

Ответ 7

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

Ответ 8

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

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

Ответ 9

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

Ответ 10

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

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

Ответ 11

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

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

Ответ 12

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

Это сказано: вот уродливый материал

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

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

Но вы его попросили.

Ответ 13

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

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

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

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

Этот jsFiddle

jsfiddle.net/cGDuV/

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

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

Ответ 14

С чистым PHP? Не умный.

$(function() { $('#body').delay(1).fadeOut(); });

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