1
wizanda
New Discovery on how to speed up Xoops Themes loading times!
  • 2006/12/4 19:58

  • wizanda

  • Home away from home

  • Posts: 1585

  • Since: 2004/3/21


Ok, lately after first discovering that if any JavaScript, is placed in it’s own .js file this speed’s up loading theme time and XOOPS overall.

Then after seeing how someone had added a file as html, yet within a js file…. as

document.write (‘html-goes-here-no-spaces’);

This also speeds up the loading times; acting as a cache.

It Got me thinking

So I thought would try this with our own site and theme, yet how…

So basically the principle for this goes in this order, as had to write it down to understand what it was…


The Style is already in your theme at the top, so the text is the same throughout anything placed nearest.

Using the Smarty call in the theme this goes around the Java file to place it for each (that we use to have a html file for)
Yet to use a .js file instead reduces the loading speed of html and can be included by Smarty to call it quicker.

The now .js file can be any of the divs, tables, forms, anything that requires your own system can be cached in a java file individually…as it makes the spaces, for the needed items, that Smarty is going to fill in, yet far quicker! To arrange any sort of layout it seems...

Use the same Smarty After to close for each, around the file being the XOOPS content that is now a .js file instead of being a .html, making it load a lot faster to be then filled in by Smarty.


Basically so one contains another…
Then when a Job of placing the required html for multiple occasions….
It is done with a Java file and a lot quicker for XOOPS content, rather then the native html doing it’s own job on multiple occasions, when you can get one pre-cached js to do it
Even though all you need to do is add the html form for instance to the end form and it works in a .js file, same code
This means the site does less and the browser does more, which they can cope with (tested on my old ibook)…..

It seems instead the java says here you go, here is the space you asked for by Smarty…
Then Smarty which has this ready then fills that in….

It seems overall faster on my site, almost now Ajax, once it’s first loaded…

Please feed back on if it works or if I am seeing things? hope not…as if so merry Crimbo Xoops!

2
wizanda
Re: New Discovery on how to speed up Xoops Themes loading times!
  • 2006/12/4 22:51

  • wizanda

  • Home away from home

  • Posts: 1585

  • Since: 2004/3/21


So is it just me or is that loads faster?

3
JMorris
Re: New Discovery on how to speed up Xoops Themes loading times!
  • 2006/12/5 3:15

  • JMorris

  • XOOPS is my life!

  • Posts: 2722

  • Since: 2004/4/11


Given your explaination, I could see where this would speed things up, however, there is the possibility of a major tradeoff here.

Search engines do not index javascript well. Also, javascript is terrible for usability.

When you compare static HTML with a XOOPS site with the same amount of content, there is a huge difference in speed. Why, because of all of the database calls in XOOPS. XOOPS has already provided a method for overcoming the bulk of this... caching and wrapping.

If you use caching and selective static content wrapping effectively, you can really gain a lot of speed in XOOPS.

A few quick tips to get you started:
* Use as little code as possible to achive the desired effect. This is where DIVs vs. TABLEs really shine!!!
* Cache every block except for those that may cause a security concern (i.e.:main menu, user menu, login, etc...).
* Cache every module that doesn't absolutely have to be updated in real time and manually clear your cache when you update (forums are not a good module to cache, but news is).
* Use static code wherever possible. Blocks are great, but they are not always needed; don't be afraid of doing a little manual code editing now and then.
* Don't link to remote images. Copy the images to your server and link to them locally.
* Wherever possible, place javascript at the end of your theme.html file.

The above is just a starting point. I'm planning on writting a comprehensive guide on speeding up XOOPS sites while retaining SEO and usability in the very near future.

Best Regards,

James
Insanity can be defined as "doing the same thing over and over and expecting different results."

Stupidity is not a crime. Therefore, you are free to go.

4
wizanda
Re: New Discovery on how to speed up Xoops Themes loading times!
  • 2006/12/5 8:29

  • wizanda

  • Home away from home

  • Posts: 1585

  • Since: 2004/3/21


Yes understand your point and on this occasion it’s good and thought about it .....as in the JavaScript isn't actually doing anything, other then providing a space with basic html in it for the Smarty to fill it after...

The points it misses if any are the coding surrounding it, yet the final out put is in the html file, just put there a lot faster as JavaScript is placing the same static content in the theme without spending any time to look for this...

Yes Smarty has a cache of templates ECT and if we check them they are info alone to go in the space provided for by html...

Well this isn't to remove the html or any coding or even change it, just let the html be dropped into place via a JavaScript file (with html in it) saving time...and what seems if I am right and how the page loading now looks that it acts as a go between of our already in place systems...

Smarty would normally say get this space we need for XOOPS content...and that is where our loading times were....yet now it says get that same content..., yet now is told here is Js file not a html file, drop that in place...it does that 10 times quicker then it would with html table or div of a theme...and so can then fill that information with the speed in fact Smarty does have, if allowed with this concept to then skip between its cached files to go in the space now provided for...

Please check my web-ranking, yet do believe this will increase it, as then summary sounding blocks out line for instance is in JavaScript, yet the content is on the page as expected...

Please feed back on your opinion...

As will start making new XOOPS theme system...with some new themes have been wanting to do...

As with that process you can layer huge amounts of html, tables and ideas in a java file instead. place that in site theme to be included...let smarty fill that and you can have animated cartoon landscapes that run real time and don't take half an hour to load as html rendering is slow...well when placed by Smarty when it is ready in both right_block.js file acting as right_block.html...

5
wizanda
Re: New Discovery on how to speed up Xoops Themes loading times!
  • 2006/12/21 17:37

  • wizanda

  • Home away from home

  • Posts: 1585

  • Since: 2004/3/21


Think I have found a better way to increase this even more.....

At first I set one content.js file for all content boxes....

Yet that also required that being processed, before hand that the one content would be placed around each block.....

So now we have set 5 content.js named content + r,l,cr,cl

So now each block has instead of a html file, that takes longer to load, then a js file containing the same layout instructions....
Yet not needing to be worked out by html...which it does seem to if you notice how a XOOPS site if it has a lot of content, will have delayed time on how long it take to render all blocks, in other words blocks dropping into place, after the page finishes....

This way appears to drop them all into place in one go as the js...plonks html....then Smarty fills it as it has the required space it needs earlier this way

The html on the other hand seems to question what it is to begin....?

6
wizanda
Re: New Discovery on how to speed up Xoops Themes loading times!
  • 2007/1/8 10:20

  • wizanda

  • Home away from home

  • Posts: 1585

  • Since: 2004/3/21


Made this even faster now, you can also run the for-each from the .js file instead on many case of php smarty calls...

You use Smarty to include the file instead for the whole blocks system, and any thing else you are using like user names....by placing these in a .js file same html code, yet using the .js as one, a cache system of the data needed to be displayed.....and two a way to bridge the Smarty,Php, Rendering to Html times....

For instance here is a block.js
<{foreach item=block from=$xoops_ccblocks}>
<
div align="center" class="outline">
<
div class="blockTitle"><{$block.title}>
div>
<
div class="blockContent">
<{
$block.content}>
div>
div>
<{/foreach}>

This is what includes it in the theme
<{include file='wizanda/content.js'}>


So basically same as normal just in a .js file instead

Yet it seems if you include the for-each and the {if} in my case for multimenu.js ...this seems to process the information needed far faster?

7
wizanda
Re: New Discovery on how to speed up Xoops Themes loading times!
  • 2007/2/19 11:53

  • wizanda

  • Home away from home

  • Posts: 1585

  • Since: 2004/3/21


Ok, going to contradict that, don't include the for-each!!
Reason being is, it then has to secondary look for them, once it includes the file.
It is better to have for-each, include this in theme.html… as then it optimizes the uses of this Js cache functionality after to place that file in each.

This optimization works best on Mac (old tangerine I-book (antique) used for tests, so very impressive results, in comparison of Xoops.org and Wizanda.com using safari)

For once Internet Explorer IE works much faster then FireFox…. reason is it seems, is that the Java-Script caching function of Internet Explorer seems to work more intuitively with Windows and to keep more of the html stored as JS in the system, rather then loading it each time. (have a look, sort of explains Wiz-and-a )

What we want to do is minimise the theme.html to be as small as it can be, yet also to include as much as possible.
(spiders web =
one center point = theme.html,
strands outwards = files.js,
Center circles and filling of web = Smarty, PHP, Mysql)

So any time we are going to run anything that requires to many quires in html, from the same file, we can move parts to .JS files instead of html either block support or items within a theme such as login and search…..

Making the html, right block, left block, center etc all in .js files instead will reduce recursive loading times, so making a more surf-able site (after first loading).

Now also in our own themes since when you basically include, it goes to /themes/ and not to the end directory (you must add the theme directory also).
What I have done, is over the site certain bits are used the same for each theme, yet just contain a different CSS, so these are now all in the themes directory (for after-caching).
You see after the first time you load our site, it may be slower, yet then it wiz-and-a’s as you surf, as once all the .js files are loaded into your computer, they remain and reduce concurrent loading time after.

Users.js
Admin.js
Guest.js
Else.js

Each of them is only included in a <{if}> statement so, then if a guest, include this .js file….rather then make it load in the theme.html; so reducing its basic weight of file and reduces reading time overall.

Multimenu.js

Search.js

This list could go on to be key features much like our block of smarty are, yet Caching in Java-script for the parts needed to surround Smarty…


The logic behind all of this is that if Smarty includes the .js file which only contains normal html…the .js file will:

1) Stores this in the user computer after loading, rather then reloading from the site (depending what browser used on cache time)
2) Make it that the completion time of each page is faster, if Smarty can access the data as fast, as the page can be displayed (requires MySql optimization also).
3) Will automate complicated html in micro-seconds, rather then seconds, as the time required to inform a browser of the html is longer.
4) Make cross site themes faster, using the same js.file reduce loading time.
5) As a possibility and still unsure on this, the Smarty Ajax system calls Java function and am unsure if we can make every call Ajaxed also…(will see ……..

Hope this all make sense you are just placing html in a .js file and it will load twice as fast….
Now with XOOPS we have to be careful of that we don’t cross the two i.e. Smarty and Java-script as they are said not to suit….yet in this case we are not using Java-script, we are merely placing the existing html in a Java-Script cache, on the outside of where Smarty is working, to give Smarty the required data it includes there, to also be what it then looks for in one go.

8
MadFish
Re: New Discovery on how to speed up Xoops Themes loading times!
  • 2007/2/19 12:15

  • MadFish

  • Friend of XOOPS

  • Posts: 1056

  • Since: 2003/9/27


Quote:
* Cache every block except for those that may cause a security concern (i.e.:main menu, user menu, login, etc...).


Caching blocks is often overlooked (caching module is not the same thing!). We were able to cut our database calls from 90 down to about 20 just by caching blocks and dumping a few that were too resource hungry.

9
wizanda
Re: New Discovery on how to speed up Xoops Themes loading times!
  • 2007/2/26 12:20

  • wizanda

  • Home away from home

  • Posts: 1585

  • Since: 2004/3/21


Just come up with even better idea for all XOOPS sites….

You can place this in the js files as said ealier.
<div align="center" class="blockTitle">
<{
$block.title}>
div>
<
div align="center" class="blockContent">
<{
$block.content}>
div>

Then place these inside the themes directory, yet not in individual themes folders, use 5 .js files, one for each block, saving processing after….as we do with html blocks, just .js…..
<{include file="block.js"}>

You can surround that in anything else needed within the foreach.

This makes it that XOOPS collects the foreach, of each contents far faster as it can then render multiple .js files at the same time; faster then html can on to the web page, at the same time, rather then the lag.….(basically what Ajax is)….
Here is how the folder layout goes:

/Themes folder/
Blocks.js (x 5), items.js, search.js, multimenu.js, users.js, admin.js, else.js,guest.js

/Individual themes/
Themes.html, CSS, Images folder

So all blocks float in there own .js file, above where the themes are and then collect these from the theme.html….
These are also auto-routed to where the include is set, for all themes; so when a person swaps theme, they don’t swap content, as the js file is cached for longer; yet it is not fully Java, so don’t worry .

Since Ajax Smarty plug in can use JavaScript, this is the next step, unsure on…..
As if we can make any content Ajax, through smarty calling it, that would be clever?

10
wizanda
Re: New Discovery on how to speed up Xoops Themes loading times!
  • 2007/2/28 8:52

  • wizanda

  • Home away from home

  • Posts: 1585

  • Since: 2004/3/21


With a new improvement just noticed yesterday and today (Snows News ):

1) Make sure that for-each runs from the theme.html and then includes a .js file for each.

This hadn’t been done with our multimenu and so making it multimenu must finish loading before the page does. Now that Multimenu for-each is in theme.html, it calls include this multimenu content .js for each, making a faster process.

2) Use “includeq” (Thxz Xoopers) instead of “include” makes for less drag in the overall processing; by eliminating extra file backup, not need in this process of including js files, as smarty it self doesn’t read .js well. As it is the speed in which Smarty can fill-in its own data, that this works on and giving Smarty the needed data from a .js file works faster then html one does.

Login

Who's Online

331 user(s) are online (190 user(s) are browsing Support Forums)


Members: 0


Guests: 331


more...

Donat-O-Meter

Stats
Goal: $100.00
Due Date: Nov 30
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00
Make donations with PayPal!

Latest GitHub Commits