How to make the 1st part of the site loads first? (Like in Google PageSpeed)
I have a very large site and it takes pretty long time to load. It takes around 120 seconds. What I\'m trying to do is loads 1st half of the site loads 1st. Then user can surf w
-
Does all this stuff have to be on the same page? Does it make sense to split the content over multiple pages? Can some of it be delayed until the person requests it? Can it be grouped into tabs? Hidden tabs could be lazy loaded for instance.
Give serious thought to restructuring the content in other ways. You might be able to come up with an alternate arrangement that simplifies the problem.
讨论(0) -
Don't browsers render the document as it comes in? Whatever you put at the top of the file will be received by the client first, and therefore will be displayed first. For example, when you try to view a very large image file online, it loads from top to bottom. The same is true for web pages. Just put the content you want to load first at the top of the page!
Answer to question one: yes Answer to question two: above Answer to question three: Nothing, just put the page in the correct order.
讨论(0) -
this is going to be ugly! You should definitely consider using ajax calls to load page fragments AFTER a first content stage is loaded! This is going to break almost all known web standards, but it might render the website in parts....
this being said: here's the ugly stuff
First: get rid of the
<html>tag of your website, start with the<head>DO NOT use a<body>tag either. Now send your html-code in the order you want it to be loaded (top first) usingecho ...after each closing tag of a group (say</table>or</div>) useflush(); ob_flush();this will send all known content to the browser immediately. The browser now decides if it can render the known content or not and if it will (based on the browser specifics and user settings) but with few exceptions it will. some browsers like to wait for the closing body-tag that's why we dropped it, others even wait for the closing html tag (safari afair) that's why we dropped that too. If you use the echo-flush scenario wisely you should be able to split the page into renderable parts which most browsers will display without an error.Again... don't do it this way.. it's bad, ugly and not even near any web standards
But you asked for it.
讨论(0) -
With pure PHP? Not smart.
$(function() { $('#body').delay(1).fadeOut(); });Fiddle example: http://jsfiddle.net/r7MgY/
讨论(0) -
You can manipulate the output buffer such that it flushes early thus achieving what your after in the screenshot you posted in your question. http://www.stevesouders.com/blog/2013/01/31/http-archive-adding-flush/
You can lazyload all your images. Here's a jquery plugin that does it easily http://www.appelsiini.net/projects/lazyload
You can combine all your js in one file. Same with your css files. This will help the speed.
You can incorporate caching, expires headers and gzip/deflate compression https://github.com/h5bp/html5-boilerplate/blob/master/dist/.htaccess
I would suggest you load your 3rd party javascript widget garbage (Google+ buttons, fabebook like buttons, social, twitter stuff) in a non blocking asynchronous way so it does not slow down the page in the beginning. http://css-tricks.com/thinking-async/
Optimize your images as much as possible. http://kraken.io/
Use a CDN http://www.maxcdn.com/
Finally test your site and see where is the big bottleneck and where you can improve the site for speed optimization. Use the waterfall chart feature http://www.webpagetest.org/
讨论(0) -
Well the idea is more or less the same as described by Pawan Nogariya above. You will need to fetch views and data asynchronously and then display these. But this means that you will never redirect or post back to any other page rather will get every view via ajaz. This will make you application SPA (Single Page Application) like Gmail. And, this will also mean you need to keep track of what has been renedered and what not, leaving you in a mess. So, instead of doing everything your way there are already developed and popular frameworks available that let you do that but they also make it SPA. Which means that your application doesnt "posts" to the server as in redirection but everything is doen using Ajax.
You can use Backbone (Backbone.js), Knockout (Knockout.js) and may others to achieve this. These are javascript based frameworks that help achieving what you have just asked and may expample and tutorials are also easily available. You can use it with any language as we are using it with C# (MVC) for a relatively large applicaiton.
讨论(0)
加载中...
- 热议问题