Miser issue

Permalink
Hello all.

I have been having problems with very slow loading time on the websites I have designed.
I tried installing Miser on one of the sites, but I have a custom scrollbar in the main text area that seems to have vanished (part of the design, not an addon). Is this Misers fault?

URL: cellista.no

Maybe I need to change hosting? The host I am using is IXWebhosting. The next billing cycle is just around the corner, so changing now would be practical (if I need to do so).
Here is the info I have on the technical side:http://cellista.no/phpinfo.php

The other slow sites are:http://anakwaana.com/akatest andhttp://perk.no

djoniba
 
Steevb replied on at Permalink Reply
Steevb
NOT an miser issue!

We've been before.

You need sort you code and enable 'gzip'

Do you have this in your .htaccess file?

<FilesMatch "\.(ico|xhtml|txt|js|css|html|htm|php|xml)$">
SetOutputFilter DEFLATE
</FilesMatch>


Use Firefox, you should see your issues.

'http://anakwaana.com/akatest/' style in body, not head?

Cellista code is all wrong??

Fonts should be in 'head' not 'body'
TooqInc replied on at Permalink Reply
TooqInc
I tried miser out a while back and while it made things pretty quick, there was too many add-ons that stopped working with Miser in play (probably about a year ago that I last tried t, so I'm sure it's had plenty of changes).

That being said, I've continued to try and find ways to speed things up and found some solutions that are working well for me so far.

First off, you don't have compression enabled on the site. Check in cPanel and see if you have "Optimize Site" as an option. If not, you'll need to enable in WHM and rebuild Apache (or get your host to). Then, in your htaccess file add this:
# -- gzip compression --
<IfModule mod_deflate.c>
 SetOutputFilter DEFLATE
  <FilesMatch "\.(js|css|php|eot|ttf|otf|svg|html|)$">
     Header append Vary: Accept-Encoding
  </FilesMatch>
</IfModule>
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "public"
Header set Expires "Wed, 13 Feb 2013 20:00:00 GMT"
</FilesMatch>


In you config/site.php, add this line:
define('CACHE_FRONTEND_OPTIONS', serialize(array('automatic_cleaning_factor' => 0)));


I know there are some changes to caching coming, likely in January, but this should improve things for you right away. Check things out with page speed and let me know how it goes.

-Brian
Steevb replied on at Permalink Reply
Steevb
As I said earlier..

..we've been here before.

Fix your code!!
Steevb replied on at Permalink Reply
Steevb
Also use:

http://www.webpagetest.org/

That should help you with all your projects.
djoniba replied on at Permalink Reply
djoniba
Two major problems now:

1.
Took your advise. Checked and as you told me, there was links to fonts and css files in home.php.

Removed these and moved the font links to header.php

Now, the div called "container-enter" in the home.php file no longer loads. I cannot figure out where the error is.

Seems like the link to the css file is broken, but it is there in the header filr and working in the rest of the site.


2.
Thought I would remove Miser to see if I can speed thing up without it.
Deleted Miser files from "helpers" folder, and now nothing loads. Just error.


Sorry for a lot of probably obvious questions. I am not a code expert. Just trying to make nice designs and learn as I go.

PS.This is for thehttp://cellista.no site
mhawke replied on at Permalink Reply
mhawke
To kill Miser, you also need to rename the view.php in '[root]/libraries'. I don't erase the Miser files, I just rename then to viewMiser.php so I can keep track of which files are which if I want to re-implement Miser.

Back to your original question... all these things will help a bit but won't solve a slow host. For example, Miser will not fix a slow 'Time to First Byte' problem and might even make it worse. Gzipping and using Miser to combine assets like css will help reduce the time it takes for the content to reach your browser once the server starts sending it but it also means that the server must do more work to prepare your content for downloading. If the server is overloaded already, this preparation time can be taxing and actually delay the rendering.
mhawke replied on at Permalink Reply
mhawke
Also, I'm not sure what editor you use to edit you code but I use Notepad++ which shows unclosed DIV's. First, download and install Notepad++ from here:

http://notepad-plus-plus.org/download/v6.2.html...

Here's how I find missing tags using Notepad++. As far as I know, Chrome won't let you change the default editor it uses to view the source so here's what I do in Chrome.

1) Land on the troublesome page in your browser.
2) Right-click and choose 'View Source'
3) Highlight ALL your code, from to to bottom and copy to your clipboard.
4) Paste it into Notepad++
5) On the toolbar for Notepad++, choose 'Language->HTML'
6) When you click on an element like <DIV>, it will turn color if there is a matching closing </DIV> on the page and it will NOT change colors if there is NOT a matching tag.
7) When you find the extra/missing tag, it is usually easy to figure out where to fix it.

In Firefox, you can change the default source viewer by typing 'about:config' in your address bar and searching for 'view_source'. Double click on 'view_source.editor.external' to turn it to 'true' and double-click on 'view_source.editor.path and enter your path to Notepad++

Hope this helps.
djoniba replied on at Permalink Reply
djoniba
I use TextWrangler for html/php and CSSEdit for css files.
The only thing I did with home.php was to move the font and css links to header.php. Must have messed up some code. Will check it out.

Thanks a lot for all help
mhawke replied on at Permalink Reply
mhawke
Notepad++is for Windows so that won't replace TextWrangler. As far as I know, TextWrangler doesn't highlight orphaned tags. JEdit might do it.
djoniba replied on at Permalink Reply
djoniba
Great. Tanks. Maybe Coda will? I use that too
mhawke replied on at Permalink Reply
mhawke
I have no idea whether Coda will do it because I don't use an Apple. You just need some editor that highlights matched tags so you can easily find orphaned ones.

You can run a page through an online validator or you can use a Firefox plugin that validates the HTML but I find that these validators spit out a lot of warnings that complicate the search for simple things like unclosed divs. Certainly these warnings need to be considered if you're aiming at the perfect page (like 55webdesign wants) but walk before you run.
djoniba replied on at Permalink Reply
djoniba
Found a good text editor called SublimeText 2. Will check it out.
However, just looked at the home.php file that is the design for the splash page that now has "disappeared". Nothing looks wrong to me. The only thing I did was to move the css and font links to the header.php file. All other pages looks fine.
Here is the home.php code

(the script is to make the page fade out when I enter the site. Nice effect. Should be a cross-fade, but could not figure out how to do that)

<?php 
defined('C5_EXECUTE') or die(_("Access Denied."));
?> 
<!DOCTYPE html>
<html>
<head>
   <?php Loader::element('header_required');?>
<script type="text/javascript">
$(document).ready(function() {
    $("body").css("display", "none");
    $("body").fadeIn(2000);
    $("a.transition").click(function(event){
        event.preventDefault();
        linkLocation = this.href;
        $("body").fadeOut(2000, redirectPage);
mhawke replied on at Permalink Reply
mhawke
I can't see where you're including your 'header.php'. The 'header_required' line is for C5 stuff. You need to have a line such as this to pull in your header.php with your styles and fonts:

<?php $this->inc('elements/header.php'); ?>


The 'elements' part is where I have my header.php file. Adjust this for your structure so if your header.php is just in your theme folder then leave out the word 'elements/'.
Steevb replied on at Permalink Reply
Steevb
Home page needs javascript, css and other files to work, which is missing.

<?php Loader::element('header_required');?>


<?php Loader::element('footer_required'); ?>


Calls C5 required files, not your theme files.

If your calling 'header.php' for these things you need to include:
<?php    defined('C5_EXECUTE') or die(_("Access Denied.")); 
$this->inc('elements/header.php'); ?>


Same applies to the footer, this does not add your theme footer files. You need:
<?php  $this->inc('elements/footer.php'); ?>


So put your theme footer files in 'elements/footer.php'


Home page, or any page, should be either a complete coded page or split into three pieces.

You can't call:
<?php    defined('C5_EXECUTE') or die(_("Access Denied.")); 
$this->inc('elements/header.php'); ?>


And:
<!DOCTYPE html><html><head>
etc…

if you're using header.php, same again for footer.


Use MAMP for local development with Coda for coding and Firefox for debugging.

Set up a local C5 site with MAMP, then code it with Coda and preview it with Firefox.

View the source with Firefox, it should show errors in RED text.

Fix errors.

To check validation errors locally download and use:http://www.totalvalidator.com/

This is not foolproof, it will not necessarily tell you the exact point of error, but it's a start.
mhawke replied on at Permalink Reply
mhawke
@55webdesign... Good point on splitting the document into 3 pieces but if the header.php does not already include "<!DOCTYPE html><html><head>" then you certainly could include it in his existing page code.

Thanks for the totalvalidator link. Nice tool!