2

I've redeveloped a webpage where previously all the page layout and search results were generated in PHP on the server and then displayed on the page when they were complete. This was slow.

To improve performance and responsiveness the new version loads the header/footer only for the page and then creates the remaining layout with javascript before populating the results dynamically using AJAX requests.

The downside of this is that obviously the page doesn't load properly without javascript support. What I'm trying to do is find a way of falling back on the old PHP code for layout & results if javascript is not enabled.

I've tried adding the old code into my new page and in a non-javascript browser it is fine. However in a javascript browser it loads everything twice - using the new javascript layout & results code and the old php code.

Because the PHP code is executed before the javascript code I can't see anyway to avoid this. Am I missing something completely here?

Thanks for any guidance.

4 Answers 4

7

What you want to do is something called progressive enhancement.

This image is from the link I've posted:

enter image description here

In a nutshell, what this describes is that your website should reach basic minimal functionality without CSS or JavaScript. In other words, if you have some website, you should have something that looks like this:

<!DOCTYPE html>
<html>
  <head>
    <title>Basic HTML</title>
  </head>
  <body>
    <h1>Introduction to semantic HTML</h1>
    <p>You use H tags for headings, search engines like that.
    Paragraph tags for paragraphs</p>
    <a href="http://example.com/">Hyperlinks make sense</a>
    <div>
      <p>Divs can be used to create seperate areas for content</p>
    </div>
  </body>
</html>

And what does this look like?

In a modern web browser:

enter image description here

In a command-line browser that lots of people use:

enter image description here

CSS and JavaScript should enhance this basic functionality, not be required for it.

When I goto your website and request http://example.com/Foo I should see

<!DOCTYPE html>
<html>
  <head>
    <title>Foo page</title>
    <script>/*Whatever script that does your ajaxy stuff*/</script>
  </head>
  <body>
    <h1>Foo page</h1>
    <p>Foo content</p>
    <a href="http://example.com/bar">Click here to goto bar.</a>
    <div>
      <p>Divs can be used to create seperate areas for content</p>
    </div>
  </body>
</html>

What I shouldn't see is:

<!DOCTYPE html>
<html>
  <head>
    <title>Foo page</title>
    <script>/*Whatever script that does your ajaxy stuff*/</script>
    <script>/*Script to Load in the main content for the body*/</script>
  </head>
  <body>
    <noscript>
       <p>Sorry, for some reason I decided you need
       javascript and a modern desktop browser to see
       the basic line of text you wanted.</p>
    </noscript>
  </body>
</html>

So instead of making your pages load content based on the URL of the page in the browser, you should deliver the page from the server-side, so that when you request /foo, you get all of the foo HTML. Then when it loads, write JavaScript that will progressively enhance your page by making the specific navigation links load the body content. That way when JS is disabled, it works, and when JS is enabled, your content loads faster.

One last point from a usability point of view.

If you're going to do this ajaxy stuff, please, PLEASE ensure you make sure you catch all HTTP error codes and do the right thing like alert your users to errors loading the page, and display a loading graphic. Ajaxy websites that try and load content when I have a slow network and don't show me anything related to loading content or errors that occurred and leave me hung out to dry leaves me a very angry user that just leaves your site and never comes back.

Sign up to request clarification or add additional context in comments.

3 Comments

Thanks for this. I'm going to back to my design now and have another look through it. I think based on what my page does and how it requests data I'm going to have to look at separating off non-javascript users earlier on during submission of form data so that they see the results using my old page layout/php and javascript enabled people see my new format php&javascript version.
@TW It's a bit of a shift in thinking but you'll quickly find it's way better to develop this way.
I agree that I don't want users to come across pages that don't work or simply just display a message telling them that becuase javascript isn't enabled they can't use the page. I'd rather offer them a more basic alternative.
2

There is no alternative. Den's recommended 'noscript' tags will still make you have to generate the content on PHP for display.

But you actually -should- generate the page with PHP. No matter what. AJAX should only deal with page updates. You are not making your site faster by generating everything with JavaScript and AJAX, because every AJAX request is another unique request to server which needs to go through PHP engine and load all the configurations and sessions and whatnot.

So, to sum things up:

A) Generate majority of the website with PHP and push it to client

B) Update with AJAX and Javascript, where appropriate.

Development is just as easy as long as your API or framework is smart enough.

But if you do something as fancy as Facebook that loads majority with JavaScript, then you won't really have an alternative for users who don't use JavaScript.

Comments

0

Try to use <noscript></noscript> on the non-js code.

Comments

0

I would suspect that the page is slow not because of PHP but because of how the page was implemented and whether or not a design pattern was followed.

3 Comments

The page was slow originally as I had to wait for a number of requests to remote 3rd part systems. I wanted the page to load without having to wait for these results, and then for the results to be added in as they arrived back.
Okay I see. So the page is waiting on a resource that can take a while. How often the data changes from the third party system? Like for each page load, is the 3rd party system loading unique information or is the data the same? I would recommend that since some of your users might not have js enabled, then a sensible solution is to use caching on the server side. Things like memcache and so fort can make a large difference and you can refresh the data every so often if new data might come from the 3rd party source.
Hi thanks. Unfortunately, I can't cache the data as each request is unique and results in a piece of live information which i then display to the user.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.