html page load problem.

Please check http://just2test.in/movie 
In google chrome :
from the menu on left corner please open POEMS page.
Some times, the page shows blank page, then if we reload the page it opens correctly.

I am using theme >  http://osumthemes.com/photography/demo2/index.html same thing if we open About > About V2 page.
Please guide me to solve this problem.
LVL 1
Rajesh JoshiAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Use the browser's console and you can detect potential issues such as an image not loading.  In this case zoomico.png an issue with Modernizer.  I tried twice in two different tabs and the page did load though.


Failed to load resource: the server responded with a status of 404 (Not Found)
http://just2test.in/movie/fonts/fontawesome-webfont.woff2?v=4.3.0 

Failed to load resource: the server responded with a status of 404 (Not Found)
http://just2test.in/movie/js/zoomico.png
0
Prasadh BaapaatWeb Designer & DeveloperCommented:
similar experience....  page not loading ... only a loading animation is shown.

when I stopped the loading and refreshed page again... it loaded.
0
Prasadh BaapaatWeb Designer & DeveloperCommented:
I also found this error in Inspect Element Console:
downloadable font: download failed (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:1): status=2147746065 source: http://just2test.in/movie/fonts/fontawesome-webfont.woff2?v=4.3.0 font-awesome.css:7:12

as per CSS is checked, the above error is caused by the fist style in "font-awesome.css"

if you have purchased this theme, their support will help you.  also search/check in their forum (if any) for post with similar problem
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Prasadh Baapaat repeated exact same error I mentioned probably by mistake.

The idea is to check the browser console.  I think you have 12 images each 600K to over 900K. That means you are trying to send 9  megs to the browser and one reason why it takes so long for the site to load at first.  Once those images are cached, the page loads faster.

Looking at pic_14.jpg which is over 900K.  You can use photoshop or pixlr.com (free) to save for web (photoshop) or in pixlr just save   and change the quality. Play with what still looks good but the lowest possible.  The first image below is using photoshop Save For Web with the preset "Min" which is 10 quality and the 2nd is using pixlr.com and setting 20 quality and also about 180k.  If you have 12 images at 180K you are at about 2 megs total and that is a big difference.  I would lower that even more though by using less images.  Perhaps only 4 or 5 and create a gallery with all images.  You can randomize each page load which 4 images load each time. Using just 4 images will bring you down to 720K.  The 3rd image is 800 tall and cropped the top and bottom evenly. This brings the file down to 130k which makes 4 images totaling about a half meg. That is  huge difference from the 9 megs we started with.

Try experimenting with loading just 4 images that are optimized like I have done, clear your cache, close the browser (get out of Chrome), start chrome back up and load your page and see if this helps.

Using Photoshop and "Min" or quality of 10 180kUinsg Pixlr and saving quality 20 to 180kPixlr 20 quality cropped to 800 tall
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
The images here do not show up at 100% so look at http://jsbin.com/gajebozugi/ and you can see the photo shop image looks a lot better than the pixlr image.  They are both at about 180K. Photoshop looks better because it uses a different algorithm to make the image smaller and part of that is removing the exif data.  You will have to play with the minimum expectable quality for yourself.
0
Prasadh BaapaatWeb Designer & DeveloperCommented:
yes I was just seconding what you said... will not continue posting since you have explained in detail :)
0
Rajesh JoshiAuthor Commented:
Thank you Dear Scott Fell,
My actual URL is http://www.terracontinensmovie.com/
The URL I given earlier was for testing purpose.
I uploaded zoomico.png and fontawesome-webfont.woff2 still the issue is there.
Can you please guide me? I tried Google Browser Console, but could not solve.
Thanks and regards.
0
Rajesh JoshiAuthor Commented:
And I have optimized the pics. But my issue is for other page > POEM page.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
It is loading from my end. I tried pinging from locations around the world and except for Australia, pings were in the 200 to 300ms range which is high.  That could be in issue if you are out of that country.  I did see where some pings failed and that could be where you are seeing issues.

Try getting rid of that preloader
<div class="loader">
		<img src="images/loader.gif" alt="" width="50">
	</div> 

Open in new window

and in main.js the 2 lines that hit the .loader class
function pageHeight() {
    
    "use strict";
    // Loading Page Effect
    var windowHeight = $(window).height();
    jQuery('.loader').fadeOut(400);
    jQuery('.loader').css('height', windowHeight);
    jQuery('.navigation.sidepanel_nav').css('height', windowHeight);
    jQuery('.countdown').css('min-height', windowHeight);

}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Rajesh JoshiAuthor Commented:
I diagnosed the issue.
If I remove the fonts css line  <link rel="stylesheet" href="css/font-awesome.css">  it works perfect.
Can you guide what should I do ?
0
Rajesh JoshiAuthor Commented:
I am sorry, not every time it works.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Look at the fontawsome css view-source:http://www.terracontinensmovie.com/css/font-awesome.css

From the code, the fonts need to be in a font folder at the same level as the css folder.  surfed to your fonts http://www.terracontinensmovie.com/fonts/fontawesome-webfont.woff and I could get to the file.
/*!
 *  Font Awesome 4.3.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */
/* FONT PATH
 * -------------------------- */
@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.3.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

Open in new window


What about trying to downlaod fontawsome again, then upload it and make sure you are using the latest and greatest version https://fortawesome.github.io/Font-Awesome/
0
Rajesh JoshiAuthor Commented:
Dear Scott Fell,

I tried the fonts thing suggested by you, but no result on poems page.
0
Rajesh JoshiAuthor Commented:
When I place at-least one social icon in the footer it works fine.
<div class="social-network">
<ul>
 <li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
  </ul>
</div>

Open in new window

0
Rajesh JoshiAuthor Commented:
Oh..really, I am confused. No steady result :(
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I can't recreate the issue.  

A couple of things to try.  First, clear your browser cache and history if you have not done so already and try again.  

Next try pinging your site 100 times in a row and see if you get any packet loss or high response times.
0
Rajesh JoshiAuthor Commented:
Thanks.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.