If i add script tags with src's to jquery on google's CDN, it SIGNIFICANTLY slows the forum down. It doesn't matter if I place them directly in a theme, or if I use the $context['html_headers']. Is there a way to fix this?
Most probably it's not the code that slows it down, but the fetching from google, and if that's the case - there's nothing you can do really.
Actually, what's slow is the rendering of the html. I have checked, and it takes the actual HTML anywhere from 5 - 20 secs to load, depending on the number of users. If I remove the script tags, it's instantly faster. Also, it causes the server load to increase expotentially
What script are you adding, and where to exactly?
well, before when I just used a mod file, this is what I had:
$context['html_headers'] .=
'<style type="text/css">ul.auto-list{display:none;position:absolute;top:0px;left:0px;border:1px solid #c5c5c5;background-color:#d5d5d5;padding:0;margin:0;list-style:none;}ul.auto-list>li:hover,ul.auto-list>li[data-selected=true]{background-color:#8fa1b5;}ul.auto-list>li{border:1px solid gray;cursor:default;padding:2px;}mark{font-weight:bold;}.card_info table td{border-bottom: 1px solid #c5c5c5;}</style>'
. '<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>'
. '<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>'
. '<script type="text/javascript" src="http://cdn.redemptionconnect.com/js/forum.min.js"></script>'
. '<script type="text/javascript" src="http://cdn.redemptionconnect.com/js/card_browser.min.js"></script>'
. '<link rel="stylesheet" type="text/css" href="http://dev.redemptionconnect.com/css/redemption-connect/jquery-ui-1.8.15.custom.css" />';
is it possible that SMF somehow parses the script tags?
Is there a reason to use https instead of http for those jquery srcs? Https will be slower than http.
not really, that's just what was given to me. However, I'm afraid you are missing the point. The script tags are evaluated by the BROWSER. Those script tags won't be evaluated until the browser gets them, which is the main problem. Those script tags are making the SERVER slow in serving the HTML file, not in serving the javascript files (which the server doesn't host the javascript files anyway).
Where and how is that code used in your SMF, just as part of the headers?
Quote from: Aleksi "Lex" Kilpinen on March 18, 2012, 04:06:38 AM
Where and how is that code used in your SMF, just as part of the headers?
Yes, it's just supposed to add the script tags to the header of the page.
Personally I would add scripts to end of body, rather than header, because scripts tend to cause the browser to push the breaks on everything else.
Most browsers will only be loading 2 components in parallel per hostname, and will give scripts priority over other loading.
Moving the scripts to the bottom, might help with this - unless the script is one that absolutely needs to be loaded in the header.
Quote from: Aleksi "Lex" Kilpinen on March 18, 2012, 04:16:11 AM
Personally I would add scripts to end of body, rather than header, because scripts tend to cause the browser to push the breaks on everything else.
Most browsers will only be loading 2 components in parallel per hostname, and will give scripts priority over other loading.
Moving the scripts to the bottom, might help with this - unless the script is one that absolutely needs to be loaded in the header.
I have done this also. Still no change. I'm not sure you are catching what I'm saying though. This has NO effect the the browser. Once the browser actually receives the HTML file the forum renders, the browser renders the page on the screen fast. But the browser isn't getting the HTML file, and these script tags are causing the SERVER to have load averages in the 10's and 20's. It won't matter where I put the scripts (unless it would have an effect on the server rendering the html) in the html file. The server is still going to be slow because of it.
Does SMF parse the output in anyway?
I'm mystified by what you're reporting. The
server don't know squat about scripts and such, if they're simply strings to output to the browser. It's the
browser who has to look at the content of <img>, <script>, <link>, etc. tags and make a request for the content and then do something with it. All I can figure is that somehow you are having PHP (on the server) do the reading of (and maybe attempt to process) the scripts. However, that ought to give you some sort of error messages on the server.
The first thing is to look at the HTML output by your site (in the browser View > Page Source). Does the script material you've added appear in the expected place (such as <script> tags within the <head> section)? If so, the server has nothing to do with it except to throw the strings over the wall to the browser. If it's really the server that's taking forever to serve up the page, the problem is elsewhere. Have you checked if you're trying to
include/require a file from another server? Is your code trying to
read the contents of another server's page? Both of those could be quite slow.
Quote from: MrPhil on March 18, 2012, 02:55:23 PM
I'm mystified by what you're reporting. The server don't know squat about scripts and such, if they're simply strings to output to the browser. It's the browser who has to look at the content of <img>, <script>, <link>, etc. tags and make a request for the content and then do something with it. All I can figure is that somehow you are having PHP (on the server) do the reading of (and maybe attempt to process) the scripts. However, that ought to give you some sort of error messages on the server.
The first thing is to look at the HTML output by your site (in the browser View > Page Source). Does the script material you've added appear in the expected place (such as <script> tags within the <head> section)? If so, the server has nothing to do with it except to throw the strings over the wall to the browser. If it's really the server that's taking forever to serve up the page, the problem is elsewhere. Have you checked if you're trying to include/require a file from another server? Is your code trying to read the contents of another server's page? Both of those could be quite slow.
I'm mystified too. It has to be something to do with the script tags. They output to the correct place, but if I remove them, I get the HTML file quick. If i add them, it takes forever for the browser to get the HTML file.
You're absolutely sure that what you're seeing is the HTML page itself being loaded much more slowly with these scripts, and not the server running just as fast, but the browser reading in the files very slowly? If what you have is a <script> tag being output to the page on the browser, the server does nothing to read in or interpret that tag... it's just tossed over the wall as a bunch of text. How are you timing the server time taken versus the HTML rendering time (including fetching script files, css files, images, etc.)? I'm not absolutely sure if the script reading/loading is happening after the page is read in, or if it happens as the <script> tag is encountered. If the latter, and it's happening near the top of your page, that could be fooling you into thinking the server is going slowly, when in fact the browser is waiting for stuff to load.
Just for giggles, what if you copied those third party script files (just temporarily, as a test) to your server, and (temporarily) changed the code to serve them up from your server? If it suddenly speeds up, that would prove that the problem is a browser getting a very slow load from other (third party) servers. If there are copyright restrictions on doing this, or the files frequently change, you wouldn't want to cache these copies permanently. I'm assuming that none of these files are fantastically huge (100's of kB, say).
I am absolutely sure. when bringing up the network profiler on chrome, it can take 5 - 10 secs WAITING on the server, and only milliseconds to actually RECEIVE the file. AFTER the html file has been received, accordian to the profiler, it takes only milliseconds to retrieve all the scripts and stylesheets
Very strange. Can you show us the PHP code that you suspect is the offender (that if you comment it out, the server goes much faster)? Can you show the corresponding segment of the resulting page HTML, and where in the page it is (<head> section?)? In both cases, be sure to obscure any sensitive information (such as your account number or something).
You're sure that you're not invoking a script on another server to custom build text to be delivered to your page?
The PHP code:
echo '<style type="text/css">ul.auto-list{display:none;position:absolute;top:0px;left:0px;border:1px solid #c5c5c5;background-color:#d5d5d5;padding:0;margin:0;list-style:none;}ul.auto-list>li:hover,ul.auto-list>li[data-selected=true]{background-color:#8fa1b5;}ul.auto-list>li{border:1px solid gray;cursor:default;padding:2px;}mark{font-weight:bold;}.card_info table td{border-bottom: 1px solid #c5c5c5;}</style>'
. '<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>'
. '<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>'
. '<script type="text/javascript" src="http://cdn.redemptionconnect.com/js/forum.min.js"></script>'
. '<script type="text/javascript" src="http://cdn.redemptionconnect.com/js/card_browser.min.js"></script>'
. '<link rel="stylesheet" type="text/css" href="http://dev.redemptionconnect.com/css/redemption-connect/jquery-ui-1.8.15.custom.css" />';
The HTML rendered:
<head>
<link rel="stylesheet" type="text/css" href="http://cactusgamedesign.com/message_boards/Themes/default/css/index.css?fin20" /><link rel="stylesheet" type="text/css" href="http://dev.redemptionconnect.com/css/redemption-connect/jquery-ui-1.8.15.custom.css" /><style type="text/css">ul.auto-list{display:none;position:absolute;top:0px;left:0px;border:1px solid #c5c5c5;background-color:#d5d5d5;padding:0;margin:0;list-style:none;}ul.auto-list>li:hover,ul.auto-list>li[data-selected=true]{background-color:#8fa1b5;}ul.auto-list>li{border:1px solid gray;cursor:default;padding:2px;}mark{font-weight:bold;}.card_info table td{border-bottom: 1px solid #c5c5c5;}</style>
<link rel="stylesheet" type="text/css" href="http://cactusgamedesign.com/message_boards/Themes/default/css/webkit.css" />
<script type="text/javascript" src="http://cactusgamedesign.com/message_boards/Themes/default/scripts/script.js?fin20"></script>
<script type="text/javascript" src="http://cactusgamedesign.com/message_boards/Themes/default/scripts/theme.js?fin20"></script>
<script type="text/javascript"><!-- // --><![CDATA[
var smf_theme_url = "http://cactusgamedesign.com/message_boards/Themes/default";
var smf_default_theme_url = "http://cactusgamedesign.com/message_boards/Themes/default";
var smf_images_url = "http://cactusgamedesign.com/message_boards/Themes/default/images";
var smf_scripturl = "http://www.cactusgamedesign.com/message_boards/index.php";
var smf_iso_case_folding = false;
var smf_charset = "ISO-8859-1";
var ajax_notification_text = "Loading...";
var ajax_notification_cancel_text = "Cancel";
// ]]></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="Updated Topics" />
<meta name="keywords" content="redemption cactus collectible trading card game christian" />
<title>Updated Topics</title>
<link rel="help" href="http://www.cactusgamedesign.com/message_boards/help/" />
<link rel="search" href="http://www.cactusgamedesign.com/message_boards/search/" />
<link rel="contents" href="http://www.cactusgamedesign.com/message_boards/index.php" />
<link rel="alternate" type="application/rss+xml" title="Cactus Game Design Message Boards - RSS" href="http://www.cactusgamedesign.com/message_boards/.xml/?type=rss" /><style type="text/css">ul.auto-list{display:none;position:absolute;top:0px;left:0px;border:1px solid #c5c5c5;background-color:#d5d5d5;padding:0;margin:0;list-style:none;}ul.auto-list>li:hover,ul.auto-list>li[data-selected=true]{background-color:#8fa1b5;}ul.auto-list>li{border:1px solid gray;cursor:default;padding:2px;}mark{font-weight:bold;}.card_info table td{border-bottom: 1px solid #c5c5c5;}</style><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script><script type="text/javascript" src="http://cdn.redemptionconnect.com/js/forum.min.js"></script><script type="text/javascript" src="http://cdn.redemptionconnect.com/js/card_browser.min.js"></script><link rel="stylesheet" type="text/css" href="http://dev.redemptionconnect.com/css/redemption-connect/jquery-ui-1.8.15.custom.css" /><script type="text/javascript" language="JavaScript" src="http://www.cactusgamedesign.com/message_boards/mobiquo/tapatalkdetect.js"></script>
<link rel="stylesheet" type="text/css" id="portal_css" href="http://cactusgamedesign.com/message_boards/Themes/default/css/portal.css" />
<script type="text/javascript" src="http://cactusgamedesign.com/message_boards/Themes/default/scripts/portal.js?234"></script>
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
var sp_images_url = "http://cactusgamedesign.com/message_boards/Themes/default/images/sp";
function sp_collapseBlock(id)
{
mode = document.getElementById("sp_block_" + id).style.display == "" ? 0 : 1;
smf_setThemeOption("sp_block_" + id, mode ? 0 : 1, null, "f1312019bdba77720100123bafc35265", "e5ed8412");
document.getElementById("sp_collapse_" + id).src = smf_images_url + (mode ? "/collapse.gif" : "/expand.gif");
document.getElementById("sp_block_" + id).style.display = mode ? "" : "none";
}
function sp_collapseSide(id)
{
var sp_sides = new Array();
sp_sides[1] = "sp_left";
sp_sides[4] = "sp_right";
mode = document.getElementById(sp_sides[id]).style.display == "" ? 0 : 1;
smf_setThemeOption(sp_sides[id], mode ? 0 : 1, null, "f1312019bdba77720100123bafc35265");
document.getElementById("sp_collapse_side" + id).src = sp_images_url + (mode ? "/collapse.png" : "/expand.png");
document.getElementById(sp_sides[id]).style.display = mode ? "" : "none";
}
window.addEventListener("load", sp_image_resize, false);
// ]]></script>
<style type="text/css">
h4.catbg span.left, h4.catbg2 span.left, h3.catbg span.left, h3.catbg2 span.left, .table_list tbody.header td span.left
{
background: url(http://cactusgamedesign.com/message_boards/Themes/default/images/theme/main_block.png) no-repeat 0 -160px;
}
h4.titlebg span.left, h3.titlebg span.left
{
background: url(http://cactusgamedesign.com/message_boards/Themes/default/images/theme/main_block.png) no-repeat 0 -200px;
}
</style>
</head>
If you want to see for yourself, the forum is at http://www.cactusgamedesign.com/message_boards/index.php (http://www.cactusgamedesign.com/message_boards/index.php). I'll leave the javascript in so you can see the performance hit. Already I'm at a load average above 4.0 6.5. Without the javascript code, the load average is steadily below 1.0 and pages usually start downloading < 500ms.
*update*
Ok, so now it's starting to settle down to a load average of 3.0, with a halfway decent render rate. However, if the user activity spikes, the load average can get to above 30.0. Could this have anything to do with caching server output or anything like that?
*update*
And now it's spiked to 8.00.
Well, it loaded in about 3 seconds for me. So now you're saying that it's highly variable, depending on user activity? That sounds like some sort of server configuration or tuning problem.
I can see the output in question, and it's certainly nothing that the server has any interest in parsing or processing. BTW, it's a lot easier to read the source if they're not all run together on one line:
echo "\n" . '<style type="text/css">
ul.auto-list {display:none; position:absolute; top:0px; left:0px;
border:1px solid #c5c5c5;
background-color: #d5d5d5;
padding: 0; margin: 0; list-style:none;}
ul.auto-list > li:hover, ul.auto-list > li[data-selected=true] {
background-color:#8fa1b5;}
ul.auto-list > li {
border: 1px solid gray; cursor:default; padding:2px;}
mark {font-weight: bold;}
.card_info table td {
border-bottom: 1px solid #c5c5c5;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://cdn.redemptionconnect.com/js/forum.min.js"></script>
<script type="text/javascript" src="http://cdn.redemptionconnect.com/js/card_browser.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://dev.redemptionconnect.com/css/redemption-connect/jquery-ui-1.8.15.custom.css" />' . "\n";
(although that probably has nothing to do with the speed).
All the files in question are .js or .css, which are fetched (from the third party servers) by the browser. That's why I find it so hard to believe that removing this one block of code would consistently speed up the page load. It would be much easier to believe that the page is either loading consistently fast, and these particular .js and .css files vary tremendously in their load speed (their server load, which is influenced by your user activity), or your page serving speed is all over the place, but due to reasons other than this particular code.
In other words, I'm stumped. I think this is a matter of server tuning and configuration, rather than an offending block of code (unless you're doing some heavy third party site page or file reads or something, elsewhere in your PHP code).
Add: Does anyone know for sure whether the .js and .css files are read in as they are encountered in the source, or whether the full page is loaded and then the browser starts asking for files? Or does it do a little of both... starting a request for a file and then asynchronously reading in more of the page while waiting for the (possibly third party) server to return its request? Does it depend on the browser, or is there a hard specification somewhere (not that MS would necessarily follow a standard!)? Anyway, I'm trying to figure out what kind of handling of external file requests could cause the symptoms seen...
I don't know if this makes a difference or not, but I've added the javascript 2 different ways.
- By adding the scripts and stylesheets directly to the theme's index file
- By adding it to the $context['html_headers'] variable
Option 1 seems to be the fastest. Option 2 seems to cause more server load. Why would that be?
Like I tried to explain earlier, I believe js is normally loaded immediately, and most browsers only load 2 objects in parallel, giving scripts priority. So having a group of multiple js files loaded in the header, will put a halt on the page load until the scripts are loaded. Now, if the HTML stops loading completely until the scripts are fetched, this could cause some server load by keeping the server waiting to deliver the rest - but now I'm only guessing.
I don't think the scripts should have any direct impact on the server.