Flash Loading Slow Issue - css

I have a Wordpress website located here: http://www.rightfittech.com/mydermakare/.
I'm trying to figure out why the page loads slow - I'm almost sure it has to do with Flash and size of images, plus rotating banner. I don't know how to edit or fix the problem though. So the question is: What is causing my website to load slow, and what EXACT steps can I take to fix the problem.
I've already tried adjusting some of the browser ActiveX filters and other temp fixes, but that is not the proper solution. If this is a flash or image loading issue, can you tell me the EXACT step in how to edit these issues?
Any help would be appreciated.
Thanks, Rob

Something that could actually be causing you plenty of issues is that fact that you are embedding 2 different versions of jQuery
1.6.1 in jQuery.js
1.4.2 in, funnily enough, jquery-1.2.6.min.js
Other than that, the Website is loading absolutely fine for me here in the UK, including the massive Flash film.
I've had a quick inspection with Google Chrome Developer Tools (check the Network tab) and there doesn't seem to be any major offenders.
Which is a great tool for checking speed issues with individual resources.
Yahoo's YSlow is pretty neat as well, especially when integrated as an extra tab within Firebug for Firefox.

Related

My WordPress website is loading slowly, especially on Apple devices

I've got a WordPress website I'm currently working on. It was loading extremely fast just a couple days ago, then got extremely slow all of a sudden.
I've tried disabling plugins, removing large elements from the homepage (videos and such), and upgrading the server to see if that would help. This problem is especially noticeable on iPhones and in the Safari web browser.
I'm not really entirely sure what I should be asking, but the site can be found at https://dev.kwonkwon.com/ - if anyone can provide any sort of advice or is able to point me in the right direction, I'd greatly appreciate it.
You can optimize your site:
check your website here https://gtmetrix.com and follow the suggestions, it is useful.
I have checked your website, you really need to optimize your images.
I am quite surprised because I just look at your website. A website like this should be loaded in under 3 seconds.
Check out your website test results here
First, You need to optimize your images. Scale the images to a size that you are using and use tinypng.com for compression if you do not know how to use Photoshop.
Second, Use a cache plugin. You can test all of them and see which one suits the best. W3 Total Cache is ok.
Third, Revslider is the worst. Try not using it. You can also add a simple background.

Google PageSpeed Insights - Render-blocking CSS inconsistency

I have been working on raising the Google PageSpeed Insight score for the website of the company I work at. I have raised the speed of the home page from 37/100 to 87/100. This is good enough for me at the moment. But other pages are still at 73/100 because there is render-blocking CSS.
Now here is the weird part. I used Google's own suggestion of lazy-loading the CSS (here: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery), and this works for a few pages. The problem is that it doesn't work on all pages. PageSpeed Insights still says that some of my pages have render-blocking CSS files (the same files that work on the home page). I am working in Rails and all of the pages use a shared layout. The CSS files are loaded exactly the same on all pages. Also, I can clearly see the flash of unstyled content when I am testing it. The CSS is definitely being loaded after the above-the-fold content.
PageSpeed's inconsistency is making it impossible to decide what my next move should be.
Has anyone encountered this before? What are the approaches you took to solving this? Is it possible Google's PageSpeed Insights tool is buggy?
I have been working on the same issues for some time and doing implementation in Drupal 7. My solution ended being splitting the css into 3 parts:
inline.css
is embedded directly into the HTML in a style-tag. This is the code that is needed for building everything above-the-fold for both the mobile and desktop.
main.css (or style.css)
This is what is needed for building the mobile version of the site and most of the desktop site.
desktop.css
This is the extras that is only needed for belove-the-fold and for bigger screens.
This approach do take some more time to build and develop but it makes the site get faster into the users browser - and as a extra added feature get a better Page Speed score.
Some code to start with
I have forked mattbanks/Drupal-7-Starter-Theme here https://github.com/jonasdk/Drupal-7-Starter-Theme this could show you a way to start.
If you are not building Drupal sites then you will look into following files.
scss/
for seeing how the css is split into different files for each function.
templates/system/html.tpl.php
Where I embed the inline.css and loads the desktop.css when needed.

What causes (javascript library, cms, etc) the "white screen of death" in web browsers?

I was looking around Stack Overflow for an answer to this problem and found this old question...
Web Service Call in JavaScript Causing White Screen of Death (WSOD) in Browser
With my antiquated Safari web browser I find that I'm experiencing this on a number of websites lately. Here is the list so far:
http://www.treehugger.com/
https://www.udemy.com/
and I believe there was a third that I don't recall.
Basically these sites are completely useless to me. In the case of Udemy I've even tried this on my Nook using the Dolphin web browser and the problem persists. I find it hard to believe that a site like Udemy would be unaware of this continuing problem so I'm wondering what issues there are with my browsers that might lead to this.
Anyway, is there a particular javascript package that these sites may have in common? Any similarities between these two site that anyone can see?
Thanks,
Bob

Incorrect satellite image tile placement

Recently I started seeing the following nonsense with the satellite images in my Google Earth plugin:
The incorrect tiles fade in and out as I zoom, and at some zoom levels everything looks fine.
This happens across browsers (chrome, IE9, Firefox), but only on my machine. I've tried re-installing the plugin, but that didn't seem to help.
I'm using plugin version 6.2.2.6613
Does anyone know what might be causing this problem?
I have seen this problem before and again recently. The first time I was told it could be conflicts with the hardware accelerators but then the problem just went away.
Until recently I have had two instances of the plugin running in the same desktop application with no problems. Then a couple of days ago I started seeing the problem again although it is not happening today. I don't know if it would help but I would suggest rebooting your computer.
I've also wondered if Google was updating the plugin or the maps...
Sorry I can't be of any help but I suspect it will go away soon.
It looks like a DirectX issue to me. One possibility to fix is to force the plugin to use OpenGL instead.
You can control whether the plugin usese DirectX or OpenGL by altering the registry key:
HKLM\SOFTWARE\Google\GoogleEarthPlugin\Render\RenderingApi
The allowed values are:
0 (DirectX)
1 (OpenGL)
Try setting the value to use OpenGL to see if it resolves the issue.
Also, if it is a DirectX issue you could try disabling direct3D (as well as and texture acceleration) via the dxdiag as others have suggested.
Finally, you could also try disabling write combing on your card if it is enabled. This is usually done via the display properties for the card you are using.
I found that problem only occurs when I have multiple instances of the plug-in running. Especially if I have it running in two different browsers at the same time.

getting started with css in Dreamweaver cs6. Noob issue

I've just recently downloaded dreamweaver cs6. I've been following tutorials online, and I've run into a bit of a snag. I'm almost embarrassed asking this question, because I know I must be missing something obvious, but here it goes:
I'm following a tutorial right now on making a drop-down menu out of pure CSS. After implementing the first few lines of CSS code I was losing all of my sub menus in the drop-down. After pulling my hair out trying to figure out why for the better part of 2 hours, I finally preview in Firefox. (can't believe I didn't try earlier.)
It all seems to work fine in my browser, but I was wondering: Is there a way I can look at it in Dreamweaver? Its really inconvenient popping in and out of my browser everytime I want to check something. Like I said, I'm basically (not really basically, I just am) a complete noob at all things web-design. Thank you for your time.
Dreamweaver is just an IDE and it is not a browser. It doesn't execute :hover events and JavaScripts. You need to preview what you have done using F12 and check it out. :)
Short answer: no. At least, there's no reasonable expectation that you should. The problem with web-design is that the only real way to do things properly is to code by hand and preview it in a browser in another window - this does come as a culture-shock to "designers" who are used to WYSIWYG programs like Photoshop and InDesign, but the web is a completely different media where the underlying markup matters the most and is open to re-interpretation by browsers.
Dreamweaver has historically had good WYSIWYG rendering (thanks to their partnership with Opera years ago) but ultimately it's still not the best way.
I note that Microsoft's "Expression Blend for HTML/JS Applications" (there's a mouthful) does actually have first-class design-time WYSIWYG support because it works directly with an instance of IE, so you can test things like :hover and client scripts at design time - unfortunately it isn't suited to actual "web" sites - just "desktop" HTML, which is a shame.

Resources