title: Why is it when I load an “embedded” facebook post on my webpage it loads very slow?
body: <p><strong>Problem:</strong></p>
  
  <p>So I have a simple webpage that has embedded youtube videos and 1 facebook posts. The youtube videos load fine thats besides the point but when I put the embedded facebook post on my page it took forever for the “facebook post” to load on the page. Let alone the fact that it did NOT even load on mobile.</p>
  
  <p><strong>How I got the embedded facebook post:</strong></p>
  
  <p>I just simply went to a post on facebook and clicked the top right arrow and they have an option of  “embed post” which then gives me a code to put on my site. And it gave me this.</p>
  
  <pre><code>&lt;div id="fb-root"&gt;&lt;/div&gt;&lt;script&gt;(function(d, s, id) {  var js, fjs = d.getElementsByTagName(s)[0];  if (d.getElementById(id)) return;  js = d.createElement(s); js.id = id;  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.3";  fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));&lt;/script&gt;&lt;div class="fb-post" data-href="https://www.facebook.com/sanandreasmovie/posts/816703421758294:0" data-width="300"&gt;&lt;div class="fb-xfbml-parse-ignore"&gt;&lt;blockquote cite="https://www.facebook.com/sanandreasmovie/posts/816703421758294:0"&gt;&lt;p&gt;Live to tweet about it. #SANANDREAS #NowPlaying&lt;/p&gt;Posted by &lt;a href="https://www.facebook.com/sanandreasmovie"&gt;San Andreas&lt;/a&gt; on&amp;nbsp;&lt;a href="https://www.facebook.com/sanandreasmovie/posts/816703421758294:0"&gt;Sunday, June 14, 2015&lt;/a&gt;&lt;/blockquote&gt;&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>(index) My Code:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Theme&lt;/title&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=1200, initial-scale=0.3"&gt;
  &lt;link rel="stylesheet" type="text/css" href="assets/bootstrap/css/bootstrap.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="assets/css/animate.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="assets/css/font-awesome-4.3.0/css/font-awesome.min.css"&gt;
  &lt;link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500,700,900' rel='stylesheet' type='text/css'&gt;
  &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;header&gt;&lt;/header&gt;
  
  &lt;!—embedded facebook post that loads terrible for some reason—&gt;
  &lt;div class="eq-content fb-content”&gt;&lt;!— this container has a large background image with the width of 2000px—&gt;
  &lt;div class="dynamic-content-3"&gt;
  &lt;div id="fb-root"&gt;&lt;/div&gt;&lt;script&gt;(function(d, s, id) {  var js, fjs = d.getElementsByTagName(s)[0];  if (d.getElementById(id)) return;  js = d.createElement(s); js.id = id;  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.3";  fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));&lt;/script&gt;&lt;div class="fb-post" data-href="https://www.facebook.com/sanandreasmovie/posts/816703421758294:0" data-width="300"&gt;&lt;div class="fb-xfbml-parse-ignore"&gt;&lt;blockquote cite="https://www.facebook.com/sanandreasmovie/posts/816703421758294:0"&gt;&lt;p&gt;Live to tweet about it. #SANANDREAS #NowPlaying&lt;/p&gt;Posted by &lt;a href="https://www.facebook.com/sanandreasmovie"&gt;San Andreas&lt;/a&gt; on&amp;nbsp;&lt;a href="https://www.facebook.com/sanandreasmovie/posts/816703421758294:0"&gt;Sunday, June 14, 2015&lt;/a&gt;&lt;/blockquote&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;footer&gt; &lt;/footer&gt;
  
  &lt;script src="assets/js/jquery-2.1.4.min.js"&gt;&lt;/script&gt;
  &lt;script src="assets/bootstrap/js/bootstrap.js"&gt;&lt;/script&gt;
  &lt;script src="assets/js/main.js"&gt;&lt;/script&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I cannot provide an example link at the moment because im having server problems. But anyways I don’t believe an example is really required. The concept is pretty straight forward you can just have a div with a large background image like I have and in the middle generate your embedded facebook post and you will see the same thing I am seeing. Also like I said it rarely loads on mobile and loads extremely slow for me on my IMAC (desktop).</p>
  
  <p>I have no clue why facebook would ever make it like this when it takes an unreasonable amount of time to load but the only possible solution I can thing ok is maybe have like some type of javascript pre-loader so I can load the page first and then display the content. Thats just a little idea I had but any other solutions/ideas will be greatly appreciated, thank you.</p>