We Keep Coding

how to manage,speed up and preload all the images on the page?

Okay, this has been my headache for long enough. I am learning to build a dynamic news/blog website which derives image sources from MySQL database. There are different section on the website which pick images from same table on database by different tags. Most of the images I use are from external sources like google, yahoo, etc. So my questions are:
Where do you keep your images? I mean should I use images from external sources or should I save image in my website directory? Or a cloud service like one drive?
How do you preload all the images on website? Because on my site they load really slow?
How to show just empty dives until the images are loaded, like Facebook does.
If the images are on other websites (of which images I am stealing) are optimised? If so then do I still need to save and optimise it again?

A cloud service would be expensive because of the quantity of images you will have and external spurces is a big no. I will always choose to put them in my website directory
Once they put the content offline or block access, your site will be broken. – Manuel Otto
I don't know about jquery, but: preload images with jquery
Javascript, DOM. The example at the bottom is completely adjustable to how you want to show the images.
I would say: don't
This is just an example.
document.body.addEventListener("load", myFunction);
function myFunction() {
document.getElementById("allMyImages").style= "background-image: src("myImage.jpg");";
}
It triggers myFunction when the webpage has been fully loaded.

Keep your own images on your own server. Don't rely on external sources to always be up/functional. But also, be careful of using copyrighted images/graphics.
You can use javascript to hide and show your page when the document has fully loaded. If you have too many images, lazyload can be an option so that you don't put too much strain on the users connection.
Specify a width and height for the container to keep the proportions while the image loads
I'm guessing the output is optimized so the 'stolen' one should be too

Google page speed issue with "Prioritize visible content"

In Google Page speed I receive a comment to "Prioritize visible content" this appears to be a recent change to the page speed algorithm. In order to try and understand the problem, I created a simple page with only one image and nothing else in the HTML (under my domain), and I still see the same message to "prioritize visible content."
The only way I found to eliminate the error was to convert the image to Base64 and place the image inside the HTML. I think this is not a good solution to the problem, as it will make the HTML heavy and slow the page down.
Are there any other suggestions to solve this problem? Thanks

Usualy this issue shows when you have a lot of external javascript or css files needed by your page to render properly. The ideal solution that eliminates the issue is when you have images and css neded for "above the fold" part of your page placed inline in your HTML document. This allows browser to render visible part of the page immediatelly without making additional requests.
There are different ways how you can achieve this. One way is to load all your css and js asynchronously and inline part of css and js neded for "above the fold" area.
The reason why this issue appears in your test case could be that image takes comparable time to load to the HTML page itself.
You can read more about possible fixes in google documentation on this issue https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent?hl=en

How can I load all my site menu and other textual content first and then load images in wordpress?

I am using WordPress to create a website. When I load the page and check the network tab, my images are taking too long to load, which decreases my website speed.
So is it possible that I load other content, like my menu,page headings etc. And the load the images ?
Basically i want to improve my website performance.

What you want to do is called "Lazy loading" of images.
Lazy loading means that the images will be loaded "on-demand" rather then load with the initial load of your page, this will make your initial page load speed much faster if you have many images, or a few big images.
You could write your stand-alone javascript implementation.
But since you are using Wordpress, I would recommend you to look for a Wordpress plug-in that does just that and will be compatible with Wordpress right out-of-the-box.
Here is one option that i've found using a quick google search:
https://wordpress.org/plugins/lazy-load
You need to download the plug-in, install it on your Wordpress and activate it (and might also need to follow some instructions).
Plugin installation instruction:
https://wordpress.org/plugins/lazy-load/installation/
Plugin FAQ(with some code):
https://wordpress.org/plugins/lazy-load/faq/
Regarding lazy loading of content and menus, that is also possible and the concept is similar (loading resources after the initial page load is complete), If no Wordpress plug-in exists for this (I am sure there are a handful), you can do it with simple javascript using ajax.
Hope it helps a bit

Non-blocking stylesheet for improving page load time

I'm trying to optimize the page load time of a website. Now I've implemented almost all suggestion Google PageSpeed Insights gave me. However it keeps suggesting using a non-blocking stylesheet so that the above-the-fold content can be rendered before loading the stylesheet (using inline CSS):
Eliminate render-blocking JavaScript and CSS in above-the-fold content.
Your page has X blocking CSS resources. This causes a delay in rendering your page.
Approximately Y% of the above-the-fold content on your page could be
rendered without waiting for the following resources to load. Try to
defer or asynchronously load blocking resources, or inline the
critical portions of those resources directly in the HTML.
It refers to the following information on how it should be done. Basically:
<html>
<head>
<style>
.blue{color:blue;}
</style>
</head>
<body>
<div class="blue">
Hello, world!
</div>
</body>
</html>
<link rel="stylesheet" href="small.css">
Although I have never seen a link to a stylesheet tag outside off the HTML tag, I changed my website using this strategy.
However, the online version of Google PageSpeed insights still complains about the stylesheet. Even more strange, the similar browser plugin (PageSpeed Insights for Chrome) says the exact opposite thing:
When you remove inline style blocks and elements from the main text of the document and put it in the header, the display performance will be improved.
Now my questions are:
Which one is correct? (In perspective of SEO and ofcourse in the perspective of UX)
Is there another way which keeps them both pleased? (HTML5 and JavaScript solutions are accepted if they are cross-browser and do improve page load time)

I would suggest you to prioritizing on getting the highest possible score of the online PageSpeed Insights if possible get it 100/100 like shown below. It will engage your page in the Google search ranking since the page speed score is one of the SEO factor as explained here.
No other solution to this unless finding out which part of your CSS is used for the above-the-fold initial view of your page. Once you know this you should inline this CSS in your HTML header and lazy load the rest of your CSS.
You could find then whatever solution to minimize the effect as long as the score as well as the validation of every important aspect e.g. html5 and css are maintained.
]

Google wants you to load the "Above the fold" content as fast as you can, for that you can create a separate stylesheet giving it the basic structure coding like width and all that. You can also try to remove any heavy image in that area and if you cannot then try to reduce the size of those images.
Then you can create a second stylesheet to load after the first one loads and you can get that error removed about the css.

Loading JavaScript / CSS files

I load a page with JavaScript and CSS files included in it from multiple iframes embedded in my flex application, are these JavaScript and CSS files loaded multiple times in the browser for each iframe? If yes how can I avoid it or what are the best practices?
Thanks

So here's a test on JSBin: http://jsbin.com/olome5/edit
I loaded in the home page of Google 3 times, using different iframes.
As you can see from the image below, the JS resources were loaded 3 times, even though they were the exact same files -- not loaded from cache. This means that resources brought in through your iframes, at least if they're brought in simultaneously, are all loaded.
How you could avoid this scenario, I'm not sure. Instead of using iframes, you could use AJAX to load the content right into the DOM of your container page, that way, the JS / CSS would only need to be loaded into the container page and it would apply to all elements loaded within.
Of course, this is tricky for JS, because all of the content brought in would then have to have the events re-attached after they were brought in, etc. This can be made easier with something like jQuery, but still isn't a small amount of effort.