I realize that you can't 100% know that this will work in all browsers. All I care about is IE 8, Chrome, and Firefox. I need some base headers that I can put at the top of my PHP pages to allow the Forward/Back buttons to load the cache.
Update: on every page I have a logged in user box at the top of the page which gives the user access to their account.
I'm looking for a performance increase in the web site. The user having to reload the site when clicking back/forward creates unnecessary the server load.
Edit: After extensive research into caching and my level of knowledge I do not know a good solution. It also appears that most others don't know either.
What you want is jumping back in the page cache. There are various variables that determine if a page is put into the page cache.
Surfin' Safari has recently written a blog about the page cache. In short a page isn't put into it if:
The page is not completely loaded or uninteresting. (404 errors…)
The page is complicated to halt. This is the case if it has Flash elements or movies.
The page has frames.
The page is secure.
The page has an unload event. In their second blog post they write about alternatives.
Those are the rules Webkit follows, I don't know if it's documented for the other browsers. You can never be sure that a page is put into the page cache. It's best to design websites that don't relay on behavior that can change without notice.
Are you using sessions? If so, before calling session_start() call session_ cache_ limiter('') .
When you call session_start() the cache limiter is reset to the value set in session.cache_limiter (which by default is 'nocache'). If you want your pages to cache you need to explicitly set the cache limiter to something else first.
You can experiment with other values (see http://www.php.net/manual/en/function.session-cache-limiter.php) but I find session_ cache_ limiter('') gives the best result when trying to, for example, prevent forms from being reset when sending a user back after an error.
Although keep in mind this may open privacy concerns if your pages hold personal data, as personalized pages will become cached.
Related
This might be a stretch, but I'm wondering whether or not it might be possible.
I'm working on a website that uses PHP for its backend. The problem is, some of the PHP scripts I'm running are quite lengthy, and can translate into page load times that can last a few seconds.
Ideally, I would be able to display a loading icon whenever the page is being loaded, but the circumstances differ depending on the page:
In some cases, the page is being loaded for the first time,
In others, the page is being reloaded after a same-page form submit,
Sometimes the form is processed by an off-page script, which then redirects back to the page on which the form is situated (in these cases, since nothing is echoed in the external script the user isn't aware that the script is being processed elsewhere as the page content doesn't change).
I understand a loading icon could be displayed in each of these cases depending on the trigger, but cannot find a general solution that would display an icon whenever the page is simply loading (regardless of the trigger).
I've noticed that some browsers show a loading icon in the place of the favicon whenever the page is loading (or, at least, Google Chrome does). Is it be possible to know when the browser loading icon is active and display a page loading icon concurrently?
If not, any alternate solution would be much appreciated.
Buffering
Case your PHP scripts are causing a slow load you must put' em in buffer. So, when the load is finished you can free this buffer.
This isn't so hard to implement.
See the PHP output buffering control documentation for this:
PHP Output Buffering Control
Finished the loading of the buffer
You can make like this:
http://jsfiddle.net/S9uR9/
$(window).load(function () {
//hideLoading();
});
hideLoading = function() {
$('.loading').fadeOut(2000, function() {
$(".content").fadeIn(1000);
});
};
hideLoading();
In your page, try to remove the commented line in $(window).load() function and comment the last line hideLoading();.
Detecting browser’s activity
I've noticed that some browsers show a loading icon in the place of the favicon whenever the page is loading (or, at least, Google Chrome does). Is it be possible to know when the browser loading icon is active and display a page loading icon concurrently?
You can try another alternative. You can detect the network activity. This is more complex to implement, however more interesting, principally if you want a mobile approach.
See this article, can help.
What has been known for a while, is that a "fast navigation" works easily for http://example.com/#1 --> http://example.com/#2.
However, there is a new technique out there. It enables fast navigation between http://example.com/1 --> http://example.com/2.
EXAMPLE: http://rageslide.com/
As you can see in the example, the navigation between http://rageslide.com/1 and http://rageslide.com/2 etc. via swiping apparantly DOES NOT FORCE THE ENTIRE SITE TO RELOAD.
I'd like to do the same for my site, but I have no idea how to do this. All pages served by my site are dynamic (via PHP and MYSQL).
I have this idea:
Cache the generated output of a page (http://example.com/2) for 60 seconds.
When the user is on http://example.com/1 preload (http://example.com/2) via Javascript.
The user navigates from http://example.com/1 to http://example.com/2. Since the content is preloaded and cached, the content will be served to the user instantly.
Different idea:
Somehow, http://example.com/1 is being interpreted as http://example.com/content.php#1 through a .htaccess. But I have no idea if this is possible or not.
Will this work? Or what would be the best way to solve this problem?
No, the url you see there is not used to load another page. There are AJAX requests in the javascript code contained in the website, that load the new content to display and update the URL bar.
You can read more about it in this article and in the following questions asked in the past:
Modify the URL without reloading the page
Updating address bar with new URL without hash or reloading the page
i can think of two possible thing you can try out.
first is simply use iframes to load the next and previous page of each page, and when someone swipes to the next page load the next page to a new iframe or a div with ajax or any other html element for that matter.
the other is to use the rel attribute, here is an explanation about it.
hope this helps you out
you can get pretty close without scripting anything or degrading the site by letting the browser cache the expected navigation point resources
for caching images, put dummies at the end of the body
<img .... height="0" width="0">
and for pages
<link rel=”prefetch” href=”url” /> there is also a rel attribute for next and previous for slide viewer type pages
Note: the url can be a javascript resource
Note2: the transition may be slightly less clean than dynamically populating from javascript especially on larger complex pages, but will still work with noscript or javascript turned off, so maybe a good fallback
I've been trying to correctly manage sessions throughout the online ordering system I'm writing using PHP. I've got it functioning the way I intended and I allows users to hit the "back" button mid-process, without screwing up the database.
The only thing I do still want, is to prevent the "back" button being used on (or after) the final "All done" screen.
In step 3 (Confirm and proceed) and step 4 (All done), I've included the lines:
session_cache_limiter('nocache');
session_start();
This works perfectly in IE - you see the page confirming your order, but you get a warning if you try to hit "back". The same applies if you navigate on from the site - you can't see the final step.
The same site doesn't seem to work in Safari (5.1.2). I can hit "back" and see all the content that was displayed (it's getting it from a local cache, and not the server).
The site doesn't accept repeated input, so it's not a massive problem, but it's not the functionality I wanted. Does anyone know how to make this work in Safari?
I don't think the problem is the code, but the browser behaviour.
In Safari, when you press the back button, it just bring you to the same page you were before, just like you opened the new page in another tab and then closed it, even if you set the cache to ‘no-cache’. In Internet Explorer, on the contrary, when you press back, it takes you to the previous page by pointing to its url and loading it again.
Reading here and there, it seems that there's no way to avoid this behaviour, apart from a little trick, which should force the browser to reload the page when you press back: Preventing cache on back-button in Safari 5.
I have a pretty strage problem im dealing with.
Lost sessionvariables in firefox.
Im using wordpress and have a subpage that causes the loss.
More specific:
In wordpress there exists a page called My pages (Original page names are in swedish, translated for convinience)
Under this page i have a few subpages. Among these are a page called Create test. There is nothing special about this page, for now only contains the phrase "hello world". If I enter any page other that this, it works.
But this particular page just seems to clear my session variables (wich I use to store login info)
I tried deleting the page in question in the effort to remake it.
While it was deleted I tried navigating around on the page.
Create test was the last item in the subnavigation menu, and now when its gone, the same thing happens on the last menuitem (now Account settings). This leave me to believe its something with the menu.
Even more strange, after recreating Create test, so that this page is now the last item. Still it's Account settings that is the page with the resetting of sessionvars...
I have through echo determined that the session id stays the same, just the variables that get unset.
I have unset($_SESSION['id']); at only one place, and this code is NOT run.
The problem just baffles me and I have no idea why this particular pages does this.
It may be totally unrelated, but we had problem with Firefox and sessions on certain pages in the past. It happened most of the times while developing and therefore refreshing a particular page, have you tried clearing your browser cookies which is where session is stored?
As an addition:
Check that you assign sessions before you write anything to the response stream.
Also we had similar problems with sessions set in a pages that were doing a redirection (i.e. a login page that if successful would set the session and redirect to the another page.)
I'm not sure about PHP but in .NET that can be overcome by explicitly setting not to terminate the response so that all headers are written to the response stream.
Fixed now, actually have no idea what I did. but I've change some html but mostly CSS.
So there is a strong posibility it was CSS-related.
Are there any potentiall pitfalls with the following idea:
...I want to have one container page, index.php. The header and outlines will be constant but in the middle I want one big panel, which loads its content from external php files, one for each "slide". When a user click a link, the central div will update with the new content, the outer edge will remain unchanged.
Will I be able to use session variables, etc correctly with the set-up. I realise it will certainly break the browser history but other than some possible UI issues, are there any techincal barriers.
This is a common thing, as Jared stated. Session variables are always available through ajax or frames, so it shouldn't affect anything there, and if browser history is something you would like to continue to use, you could always change your location.hash when you load new content so that you can load previously rendered content with some javascript if someone uses the back or forward buttons.
The session should not be lost.
The browser history does not need to be lost also - please read about onPopState (and history.pushState) and onHashChange JS events. The AJAX-heavy sites can determine the content to be loaded that way.
One of the pitfails is, if you are using a lot of JS, that the events for the newly loaded content will need to be re-attached, but they can also be delegated from the container which is not replaced.
jQuery's .load() function may be also useful to you to get started.