Link to home
Start Free TrialLog in
Avatar of Rajesh Joshi
Rajesh JoshiFlag for India

asked on

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.
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

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
similar experience....  page not loading ... only a loading animation is shown.

when I stopped the loading and refreshed page again... it loaded.
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
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.

User generated imageUser generated imageUser generated image
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.
yes I was just seconding what you said... will not continue posting since you have explained in detail :)
Avatar of Rajesh Joshi

ASKER

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.
And I have optimized the pics. But my issue is for other page > POEM page.
ASKER CERTIFIED SOLUTION
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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 ?
I am sorry, not every time it works.
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/
Dear Scott Fell,

I tried the fonts thing suggested by you, but no result on poems page.
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

Oh..really, I am confused. No steady result :(
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.
Thanks.