Differences

This shows you the differences between two versions of the page.

--- admin_menu:design:settings:start [2013/10/03 17:12]
jonyo
+++ admin_menu:design:settings:start [2014/12/16 17:27] (current)
geojames
@@ Line 8: / Line 8: @@
 The settings on this page control different aspects of how the design (templates, images, CSS, JS, etc.) work.  Care should be taken when changing these, if something is done incorrectly it can result in a non-working website.  Be sure to read the explanations for each of the settings below and you understand those explanations before changing the settings.
-===== Media Location Settings =====
+====== How these features can help ======
-<tip c w>**Caution:** Changing the settings in this section incorrectly can result in a non-working website, make sure you fully understand what each setting does before changing these.
+These features can speed page load for your site by reducing the footprint of css/js code downloaded to operate you site.  Many page analyzers recommend applying such features as mentioned here.  The features here are designed to do the following:
+**Combine js/css files** - This simply moves the contents of multiple files into a single file, to reduce the raw number of HTTP requests a visitor has to make for each page load.
+**Minimize those js/css files** - This further improves things by making that one combined file as small as possible (without actually applying "compression"). This process mostly removes unessential whitespace and replaces variable names with shorter counterparts.
+**Compression of those files** - This is a mathematical, binary-level process used to make text files smaller for transmission. It's akin to "zipping" the files before sending them to the browser, which then "unzips" them on the fly.  That would be used to compress the js/css files further.
+Some or all of these may not work on certain servers. Where they work, they'll generally make things faster, so if you can use all of them, great; however, if any of the options don't work for your particular server configuration, the best answer is generally to not use the ones that don't work.
+====== Media Location Settings ======
+<tip c w>**Caution:** Changing the settings **in this section**((This warning applies mainly to the alternate media location setting.  This warning does NOT apply to the optimization settings that are described further down on this page.)) incorrectly can result in a non-working website, make sure you fully understand what each setting does before changing these.
 Most sites should leave these settings as they are.</tip>
-==== Alternate External Media Base URL ====
+===== Alternate External Media Base URL =====
 Most sites should **leave this blank**!  This is an advanced option which allows usage of a Content Delivery Network, for companies that have a CDN.  It can also be used to specify an alternative domain name that is used exclusively for media such as images, see below for more info.
@@ Line 37: / Line 50: @@
 This is a very new ability and one that is not often used, so there may be snags, if you run into trouble using this feature please let us know!
-==== Template Set Folder ====
+===== Template Set Folder =====
 This is the folder used for template sets, normally this is set to **geo_templates/**
@@ Line 51: / Line 64: @@
 <tip c w>**Warning:** It is important that this is set properly in your config.php, or the website may not display properly.  Make sure to back up your config.php file before editing it, so that you can restore the original file if anything goes wrong.</tip>
-==== JS Library Folder ====
+===== JS Library Folder =====
 This is the relative location of your js library directory, normally this should be set to **js/**
@@ Line 61: / Line 74: @@
 <tip c w>**Warning:** It is important that this is set properly in your config.php, or the website may not display properly.  Make sure to back up your config.php file before editing it, so that you can restore the original file if anything goes wrong.</tip>
-===== Optimization Settings =====
+====== Optimization Settings ======
 These settings enable specific features that will help speed the page load.  Note that some of the features require certain things on the server, so not all sites will be able to use all optimization features.  In most cases if the server is not capable, turning it on will simply not have an effect.  But sometimes turning on a feature will cause 500 errors, in which case you will need to turn that setting off to work for your site.
@@ Line 67: / Line 80: @@
 <tip c n>**Note:** If turning on all of the settings causes the page to not format correctly, turn them all off, then turn them back on one at a time.  After turning on each setting, check the site to make sure it still works.  When it stops working, you will know which setting is not working on your server and can proceed accordingly.</tip>
-==== Combine, Minify, and Compress CSS and JS ====
+===== Combine, Minify, and Compress CSS and JS =====
 This is the **main optimization** that will help greatly speed up overall page load times. It allows all CSS and JS to be combined so that it only loads a single "combined" CSS file, and a single "combined" JS file for the entire page, instead of loading a bunch of different files for each.  With each additional "external file" that has to be downloaded, that can slow the page load down.
@@ Line 81: / Line 94: @@
 If turning this on breaks the site, the most common cause is file permissions.  Use FTP to CHMOD the "geo_templates/" folder to 755 and the "geo_templates/min.php" to 644.  This is necessary for most sites that use [[http://httpd.apache.org/docs/2.2/suexec.html|suexec]], such servers do NOT need to use CHMOD 777 to make a folder "writable", and doing so can actually cause server errors like this one.
+Another less common cause:  Force using www or not using www, but the site URL is set to the wrong URL.  For instance, if your site "forces" using www by doing a re-direct from example.com to www.example.com.  Make sure if you have such a re-direct in place, that you have the correct URL set in the Site URL setting in **Site Setup > General Settings**.  If this is set wrong, when it tries to combine the CSS and JS it might try to get the contents, only to be re-directed, and on some servers instead of just getting the re-directed content, it gets the "error page" content.  This is not as common but just make sure, if you have a re-direct set up from WWW to non-WWW or visa-versa, that your settings match the "correct" URL.
-==== Clear Combined CSS & JS ====
+Similarly, an incorrect value for the Site Setup > General Settings > Site URL setting can cause problems (presents as the combined css/js files missing all content).
+===== Clear Combined CSS & JS =====
 This button will appear if the main combine setting is enabled.
 Use this button whenever you make any CSS or JS changes on your design.  Any time the CSS or JS changes, the combined copy will need to be re-generated.  This is the reason we recommend to keep the combine setting turned off until your design is finished.
-==== Also Combine CSS and JS libraries ====
+===== Also Combine CSS and JS libraries =====
 Only shows if [[#Combine, Minify, and Compress CSS and JS]] is enabled.
@@ Line 93: / Line 108: @@
 We recommend to turn this on if you are already turning on the main combine setting, but the option is available if you have a reason to load libraries on their own (not combined).
-==== Use {footer_html} to delay loading of certain javascript ====
+=== Troubleshooting ===
+If this causes problems, make sure you do NOT have the advanced setting **Use Google Libraries API** enabled.  The 2 settings in effect, cancel each other out because there is no need to use google libraries API if the library is going to be combined with the other JS on the page anyways.  And attempting to do so can cause problems((usually problems with timing out)) on some sites.  As of version 7.3.2 it is not possible to enable these settings at the same time because of this.
+===== Trim repeated whitespace from final HTML output =====
+This option uses the Smarty template engine's "trimwhitespace" output filter to replace multiple blank characters in a row with a single space in the final HTML source sent to a visitor's browser. This very slightly **increases** the amount of time it takes the server to create each page, but the pages themselves may be significantly smaller, which could be advantageous if your site is frequented by mobile users or those on low-bandwidth connections.
+In our testing with the default template set, the HTML source took approximately 50ms longer to generate, but was approximately 25% (roughly 10 KB) smaller. Your results may vary greatly based on your server's hardware and performance factors, as well as the complexity of your templates.
+===== Use Google Libraries API =====
+**History of Setting:**  This setting **Added in 6.0.0**, and moved to **Design > Settings**((previously the setting was found in **Design > Template Sets**)) in version **7.3.0**.  Then in **7.3.2** the setting was moved to the optimization section, to make it clear it can not be enabled when minify libraries is enabled.
+This setting **only shows** if the setting [[#Also Combine CSS and JS libraries]] is **not** enabled.  That is because, if minifying / combining CSS and JS libraries, there is no benifit to also using Google API, and on some sites if it did allow both, it will actually cause timeouts and other problems.
+Between this setting and [[#Also Combine CSS and JS libraries]], it is recommended to use [[#Also Combine CSS and JS libraries]] over this one, to reduce the number extra external files the visitor must retrieve.
+If you are using a version **before 7.3.2**, make sure to **TURN THIS OFF** if you have enabled the setting to also combine libraries.  If this is turned on with that other setting, it can cause the minified JS file to take a very long time to generate on some servers.
+Using this feature allows certain JS libraries to be loaded from the Google Libraries API instead of loading them from your local site.  This provides 2 main advantages:
+  * Google Libraries API uses compression by default, if the browser is capable of handling it, so that the file downloaded is much smaller than if no compression was used.  This makes the page load that much faster.
+  * Since it loads off of a common location (from Google's site), if the user has ever visited any site that uses the same library, they will already have the files in the browser cache, in which case it will not need to download anything!
+Note that this only uses Google Libraries API for the //client side//((what you see when you click **My Site** from the admin panel)), the admin will always load the JS libraries "locally".  This is done in case loading it using google libraries is not working, so that the admin panel will still function to allow you to turn this feature off if needed.
+[[http://code.google.com/apis/libraries/devguide.html|More Technical Info Here]]
+===== Use {footer_html} to delay loading of certain javascript =====
 If this is enabled, JS will be loaded in **{footer_html}** rather than in **{head_html}**.  If you use this, make sure that any of your custom JS is surrounded by {add_footer_html} and {/add_footer_html} to be moved to the end of the page, otherwise it may not work.
@@ Line 109: / Line 151: @@
 If none of the above works, your custom JS may simply not work when it is delayed, and it may rely on other built-in scripts that are delayed...  The result of this circular situation is that you cannot use the custom JS with this setting turned on.  You can either remove the custom JS, or turn off the feature so that your custom JS will work.  Ask yourself would you rather the page "seem to load" a little faster (especially on mobile devices), or would you rather your custom script worked?  That is what it might boil down to as some JS may simply not be capable of being delayed.
-==== Use .htaccess for geo_templates/ ====
+===== Use .htaccess for geo_templates/ =====
 This **Requires Apache**, if you are using IIS or other server this will most likely not work for you.  Turning this on will allow you to enable the optimizations that will automatically generate an .htaccess file inside your geo_templates/ folder for you.
-==== .htaccess - Stop Prying Eyes ====
+===== .htaccess - Stop Prying Eyes =====
 Available when [[#Use .htaccess for geo_templates/]] is enabled.
@@ Line 119: / Line 161: @@
 Turning this on will prevent anyone from looking at the directory index, meaning they will not be able to see what other files are inside of a specific folder.  This will also prevent direct access to template files (ending in .tpl) directly from the web, for instance they won't be able to see the "un rendered" version of your home_page.tpl file even if they know the direct URL to the file.
-==== .htaccess - Compress Files ====
+===== .htaccess - Compress Files =====
 Available when [[#Use .htaccess for geo_templates/]] is enabled.
@@ Line 135: / Line 177: @@
 If you get 500 errors, or if images / CSS / JS seem to not load, you may need to turn on mod_filter.  If that does not work or is not possible on your server, you may need to disable the compress files option.
-==== .htaccess - Cache Files Longer ====
+===== .htaccess - Cache Files Longer =====
 Available when [[#Use .htaccess for geo_templates/]] is enabled.
@@ Line 143: / Line 185: @@
 If enabled, will add lines to the .htaccess file that will tell browsers to cache static CSS / JS files for about a month.  This will help speed up page load times for repeat visitors to your site.
-==== .htaccess - Use mod_rewrite for Combined CSS/JS ====
+===== .htaccess - Use mod_rewrite for Combined CSS/JS =====
 Available when BOTH [[#Use .htaccess for geo_templates/]] AND [[#Combine, Minify, and Compress CSS and JS]] are enabled.
@@ Line 159: / Line 201: @@
 It will use that file to generate the combined & minified CSS or JS file.  What that will do is generate the combined / minified CSS or JS, then it will write the file to the .min folder.  In other words, it will generate the contents and write the contents to the folder .min/css/12.css.  Once it is generated, the next time someone views the page, since the file exists, it will load the static file, never even "touching" the script at all!  So after the first time the combined CSS or JS file is loaded, after that it will be exactly the same as loading a static file, no overhead of loading a script.
-===== Advanced Settings =====
+====== Advanced Settings ======
 This is the advanced settings section.
@@ Line 165: / Line 207: @@
 ==== Do NOT Automatically Include default.css in Combined CSS Contents ====
-Note: "Do NOT Automatically Include default.css in Combined CSS Contents" is the actual setting's name.
+Note: "Do NOT Automatically Include default.css in Combined CSS Contents" is the actual setting's name((Just to make it clear, this is not a tip or something, there is an actual setting with that name that you can enable if you have a reason to keep it from loading the default.css file automatically.)).
 <tip c w>**Warning:**  Turning this on will **break your site** unless you are following this tutorial((TODO: Create said tutorial and link to it here)).  And as it mentions in the tutorial, using this option will make future software updates much more work.</tip>
@@ Line 206: / Line 248: @@
 If this setting is turned on, you will have a lot more work on your hands for software updates.  Every time you update, you will need to look at the changelog, where it lists every template change made in the new version.  All changes listed for the default.css file, you will need to apply the changes to your own CSS.  Failure to do this will result in new features looking broken, since you will be missing changes and new CSS required for the new features to function properly.
-==== Use Google Libraries API ====
+==== Use Google Libraries API (moved) ====
-This setting **Added in 6.0.0**, and moved to **Design > Settings**((previously the setting was found in **Design > Template Sets**)) in version **7.3.0**.
+This setting is **moved to the Optimization Settings section**, see [[#Use Google Libraries API]].
-Using this feature allows certain JS libraries to be loaded from the Google Libraries API instead of loading them from your local site.  This provides 2 main advantages:
-  * Google Libraries API uses compression by default, if the browser is capable of handling it, so that the file downloaded is much smaller than if no compression was used.  This makes the page load that much faster.
-  * Since it loads off of a common location (from Google's site), if the user has ever visited any site that uses the same library, they will already have the files in the browser cache, in which case it will not need to download anything!
-Note that this only uses Google Libraries API for the //client side//((what you see when you click **My Site** from the admin panel)), the admin will always load the JS libraries "locally".  This is done in case loading it using google libraries is not working, so that the admin panel will still function to allow you to turn this feature off if needed.
-[[http://code.google.com/apis/libraries/devguide.html|More Technical Info Here]]
 ==== CHMOD 777 Files ====

Geodesic Solutions Community Wiki

User Tools

Site Tools

Differences

Page Tools