I have a site that is basically one large page, it is a flipbook (powered by jQuery Booklet Plugin) that has 50 pages and has artwork on each pages. The size of this page is between 6 - 7mb in size. This is a bit large and slow connections can take a while to load the page. I am looking into breaking the book into multiple categories (thus multiple smaller pages) but in the mean time I have these two quesitons:
What is the best way to handle loading of pages that have a lot of content?
How do large sites handle these issues?
Note: I cannot use sprites for the images on the page.
Try compressing your image files with an image optimizer, like Kraken: http://kraken.io/
You could try lazy loading the images (http://www.appelsiini.net/projects/lazyload) - the images will not be requested until they are visible on the page.
Another option is to use the change event in the booklet script to load the content for that page using AJAX. This way not all the content would need to be downloaded initially, however you would see some delay when changing pages on the client side.
$(".selector").booklet({
change: function(event, data) { ... }
});
Most large sites with "endless" scrolling (like Facebook for example) use AJAX to only load more content when it is needed.
Related
In my website (news aggregator) i am displaying articles boxes with title and image miniature linking to an external article.
<a href="website/article.html" target="_blank">
<div id="art000002">
<h1>Article Title</h1>
<img src="website/images/image.jpg" width="100px" height="70px">
</div>
</a>
For each article i am displaying a miniature to the og:image of the related external article.
When doing a performance test on my website load, it reveals that some pic are 2 or 3 mb size and since my site display a list of let's say 50 articles it went huge.
My question is : since my users don't need the full image , is there a way to display the og:image as miniature without importing the full thing size ?
Thanks
I'm posting as an answer as requested by OP.
Basically, because the images are external, you can't really control file properties like dimensions, quality, or file size using client-side (frontend) languages such as HTML/CSS/JS.
Option 1: Generate Thumbnails on Your Server
So if you want to reduce something like the file size of one of these external images, your best bet is likely to have some sort of back-end script set up to pull the images in advance. A back-end script (using something like PHP) could pull the images and re-save them on your server, reducing the dimensions, quality, or file format in the process to help reduce the file size.
Then on your aggregated article page, you would use the thumbnail images you generated, rather than the direct images from the external sources.
However, it should be noted this means you need to run this back-end script before users try to load any images/thumbnails, because having it run when they request a page/article/image still means the entire file has to be downloaded before being converted.
Option 2: Lazy load the images
This won't truly reduce the page load, but lazy loading the images can speed up the critical parts of a page loading, only loading those large image files after everything else has loaded.
<img src="article_full_size_image.png" loading="lazy" alt="Article Thumbnail Title" />
That gives you a basic lazy loading image, which can help make the page appear to load faster, though the actual external article images will still take the same amount of time to load. The browser will just wait and load them last.
When a web page loads, does the content with display:none affect the load time?
I have a huge list in html with about 600 links assigned so the html page alone comes to around 450kb(excluding images~150kb), while the stipulated size of a page according to our server is 300 kb.
But the lists are divided into 4 main lists which toggle between display none to visible.
i.e.when list 1 is visible others are hidden.and so on.
So I was wondering how the load time of the html page would be affected by this.
Thanks.
Yes,It does affect the load time.
I too tried this on my own website,It took some time to load.even if the div was hidden
I suggest you to load it dynamically,using jquery or ajax ,put all those menu item or what ever images in a separate html file,and call it whenever required.
Save's load time but More Coding
Yes, because it is loading the full html. You can see the html code in the browsers code inspector. And you see the images in the hidden-tags was loading.
You can prevent this by using javascript. Only load the images when clicking the active tab.
Yes, it does. The browser loads html and parses also the hidden elements. They are also part in the internal "element-tree" of the browser. Otherwise you wouldn't be able to reference them e.g. via JavaScript to modify them.
Yes of couse it affects the load time visibility in the DOM. The ammount to download is still the same.
To improve this you could use:
Pagination (will_paginate in Rails, https://github.com/onassar/PHP-Pagination php)
Infinite scrolling(will load the content dynamically during scrolling)
AJAX loading of the lists
I understand the answer to this is most likely No... but I wanted to ask.
Is it possible to have one img start downloading first?
Basically I have a place holder GIF (that shows in the place of images as they download and I want to get that GIF downloaded as quickly as possible.
Am I able to somehow fast track the downloading of one img (the GIF)?
thx
Try putting an <img> tag with the gif as src before all other <img> tags and hide it with visibility:hidden
You could include that image as a data URI (if it's not too large), so that there's no separate network request made to fetch that image. It will, of course, increase the size of the actual HTML content served.
You could also preload the image using JavaScript by making a new image object and setting the src attribute.
You can have placeholder gifs, eg (in css)
img{background-image:url(default_image.png)}
However, there is no good way to force one image to load before another. Browsers can load in whatever order they want.
You can make it more likely that the placeholder is downloaded first:
If the placeholder is the same on all pages, it can get cached, so that on the next page, it is already loaded
Make sure that the placeholder image is early in the page (makes the browser start loading earlier, a browser will probably load images in the order they appear in the html). If image shouldn't be displayed there, just do something like width="0" or visibility: hidden;
Put the placeholder somewhere that the server serves quickly (avoid dynamically controlled folders - serve it in a static directory, eg. in the public/ folder for Apache)
Make the placeholder image small
Encourage caching by setting the cache headers so that the image expires in the far future (eg. 1 year), and so that the browser doesn't need to check back with the server. Also make sure private caching is off for the image (allow public server caching).
Data URIs are not that great. From Wikipedia:
Data URIs are not separately cached from their containing documents
(e.g. CSS or HTML files) so data are downloaded every time the
containing documents are redownloaded.
Referencing the same resource (such as an embedded small image) more
than once from the same document results in multiple copies of the
embedded resource. In comparison, an external resource can be
referenced arbitrarily many times, yet downloaded and decoded only
once.
If you use the placeholder image in 10 places on your page, you are going to have a much larger page.
You could try to dynamically load everything you don't want loaded before that gif (and is somewhat significant in size). Then, you could load that gif, and after it's done - load the rest of the content.
This could be done using Javascript. I'm not sure if there's already a library that helps you do this easily, but it shouldn't be too hard to do.
I'd start off using something along the lines of "on document.ready, load that important gif, then when that finishes, load the rest":
$(document).ready( function() {
var myImportantImg = $('<img />');
$(myImportantImg).on('load', function() {
// attach myImportantImg somewhere
// load rest
});
$(myImportantImg).attr('src', 'http://url.to/myImg.gif');
});
From what I read using Data URI Scheme in conjunction with css would be a good option:
img.placeholder {
background: white url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC') no-repeat scroll left top;
}
Include the above code in a <style>-tag in the documents <head>-section to make sure it's loaded with the page, and tag the appropriate images with the placeholder-class:
<img src="..." class="placeholder">
I have a personal website, which I have made (to the best of my ability) without a template. I am not very experience in HTML so am not entirely sure if this is bad practice or not, but here is my issue.
My website consists of a frameset, which has 3 frames. Two do not change (banner and nav panel), and the other is content. The way I display my content in the main frame is through an iframe. Here's where the trouble comes. I have suggested my website to the crawler, and it crawls all the pages for content, of course. When I click on one of my links suggested by google (say, a project), the browser loads that individual .html file, without any of the rest of my frames. In other words, it does not link to the page through my index.html which sets up the formatting and page frames, but simply loads the html as a stand-alone page.
Is there a way I can avoid this, so that if a link for my website is clicked from an external link (not from my domain), the page first loads my index.html, and then the page of interest, so that it appears as if it were accessed normally from my index? I am not sure whether I should find a new way of displaying my content in the main frame so that it avoids iframes, or just need a simple script to redirect the user.
Not sure if it's useful but I've attached a photo of my page just to better explain what the frame layout is that I am working with.
Many thanks!!!
iFrames are definitely not the route to take when you are displaying consistent content... Which from what appears to be the Navigation, Header, and of course, the Content. Of course there will be an issue when a "Search Engine Spider" crawls your page... From my understanding, seeing as you are calling "content" from another page, the spider will crawl that page but will not crawl the index.html page we are currently viewing. When a "Spider" crawls a page it looks for STATIC HTML Tags/Content/Keywords/etc, and seeing as you are calling all of your content from other pages the "Spider" will treat that content as being on another page as well.
You want me recommendation? Avoid using an iFrame at all times. The point of an iFrame is to display content from another location (external), and or display static content on a page without having to scroll the current page you are viewing the iFrame on.
It is bad practice to use an iFrame, I would suggest using DIVs. Within these DIVs you may place content, images, links... Virtually anything you want, with all of the benefits of having people view your website, along with Search Engine Spiders.
I hope this helps!
Thanks,
Aaron
iFrames are a bad choice. AJAX is VERY simple these days. Just replace the big iFrame with a Div, and AJAX a page, putting the contents into that Div.
Replace your anchors with tags, and replace href with name, like so:
<div name='main.html' class='link' />
You need a div with the id 'loadHere':
Then include jQuery (it's pretty easy, google it) and at the end of your HTML put this:
$('.link').click(function(){
$.post(this.name,function(dat){
$('#loadHere').html(dat); }); });
Is there a solution to have the background audio/music play across multiple page on a website, WITHOUT restarting on every page load.
The website currently uses a frameset, but I'm looking for an alternative.
Without making the whole site AJAX I think frames are the only way.
Here's a tutorial for making an ajax site if you need it.
http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/
It will give you separate addresses for each page.. sorta.
The only other alternative is to use site-wide AJAX. Each link would dynamically change the page content without navigating away.
Implementing this is time-consuming. Each dynamically loaded page must be stripped of headers and each link must contain a Javascript event that calls an AJAX request.