I've been playin with Google's Page Speed, and it gave me some tips to improve the loading speed of my site:
http://alexchen.zxq.net/ (original hosting)
http://alexchen.co.nr (URL redirection)
I minified some Javascript files (I didn't compress them), and optimized some images, but it still kind of slow. I'm not very sure if I'm overloading something or its because i'm using a shared free hosting (I know, I have to get a .net or .com, but I'm having problems with my credit card right now).
Any suggestions?
In total your homepage loads 2.6mb, 2.4mb of images alone even though you only have a few directly visible. You should defer loading your showcase images like http://alexchen.zxq.net/images/showcase1.png until the thumbnails are clicked. This image is 0.5mb and gets loaded on every homepage visit whether someone visits it or not. See a lightbox javascript lib such as facebox which loads up the image on demand using AJAX.
Think about moving the position of the JavaScript to the bottom. As scripts block parallel downloading you should load these last to allow other elements like images to download. I profiled your site and the jquery seems to take a while to download, blocking other files from starting.
Turn on caching for static elements aswell in order to cut down server requests on second visit.
Install YSlow to get more details.
Related
I have a quite large app build using phonegap and jQuery mobile. I have about 5 pages withing the one HTML page (as per jQuery mobiles navigation system) all sharing one main JS file, which has 3400 lines of JS code.
The app has ran slower over the development period, and I Was wondering if it would make a difference splitting the app up into seperate HTML files and having them load into the DOM?
And secondly, would it also be worth splitting the javascript up so only javascript needed on the page is currently loaded with the page?
Like shall I have the whole 3400 lines of code loaded on device ready? or inject needed JS along with the page?
Yep as Nathan said I think you already know the answer.
I'd definitely recommend splitting your application into separate HTML pages and JavaScript, and loading the JavaScript only as and when you need it. I've heard people recommend a single-page architecture approach, although the difference there is that the HTML pages and JavaScript are injected in and loaded as and when they are needed.
See part 4 here in this PhoneGap tutorial for more information on properly implementing a single-page architecture.
It's not a good idea to load everything into memory at the start... it's an inefficient use of resources - as you can see from the slow performance.
And having separate HTML and JavaScript files should also be a lot easier to manage and understand as well.
After loading the too much data ~(250 records in listview) in jquery mobile page DOM. The navigation sytem transits very slow. I have tried verious tricks but unsuccessful. finally, I got the exceptable performance of navigation by applying below tricks.
Try to remove/hide the populated data from DOM when trying to change page.
when come back to page. repopulate it.
http://www.puppykisses.org/
i made a WordPress page for a client, and for some reason it is taking over a minute to load the page. The only thing that I could think of being the problem is the amount of photos that he inserted into the slider up top on the home page. It looks like all those pictures need to load before anything else pops up. But then I click on Contact or any other page that has no real images to speak of, and the problem is still there. Just wondering if anyone can point me in the right direction to fix this. thanks!
Like #David said, its the initial request (the source for the page) that is giving you the issues. This means it is unlikely an issue with hosting, and most likely an issue with your code. I would go through any plugins you have installed and disable them one-by-one, and slowly start commenting out your own custom dynamic code bit by bit, till you see what is taking so incredibly long. Then rewrite/excise that code from the site.
Start With the Basics
Keep the number of WordPress plugins you use to a minimum
Get a Proper Hosting Provider
Remove Unnecessary Code From WordPress Header -> http://goo.gl/yfRcF
Use firebug and click Network tab to check loading speed for each files
Check Suggestion how to improve website speed -> http://goo.gl/FtiX3
Install WP Super Cache plugin -> http://wordpress.org/extend/plugins/wp-super-cache/
*If you use gallery try to use image thumbnail rather than load whole images size
Some years ago I decided I could bypass all the browser inconsistencies by producing sites entirely in Flash. Doesn't look such a good decision now so I'm re-writing my semi-CMS framework in php, javascript/jQuery and HTML. One aspect of my Flash sites which I am very pleased with is the ability to load all pages or states in the background so the user rarely requests a page that isn't already loaded. When that does happen I can display a progress bar. In AJAX I can't display progress but I also found a significant difference I hadn't anticipated. In Flash I load the .swf for page 1 completely, before starting to load page 2. That means everything including images etc. In AJAX I can't see a way to do that. I can check that the HTML file itself has completed loading, but not that all its images have loaded before loading the next HTML file. Is it possible?
If you're looking for an HTML5 solution rather than just an AJAX solution you might want to investigate the Application Cache. There is a progress event which you could hook into, though it possibly doesn't get into the level of detail you need. As far as I'm aware, resources will start downloading in the order they're listed in the manifest file.
I have been using nextgen gallery of wordpress, which uses jquery cycle.
I noticed that the images load in a lazy way (eg the gallery has 15 images, and at first only three load, then 2-3 more etc). The thing is that I create thumbnails of them so I need them to load instantly.
Does anyone knows which code should I mess with in order to make change this behaviour?
thanks!
This is because of the nextGen Gallery javascript wrapper on jQuery Cycle.
If anyone needs to modify this, s/he should mess with the ngg.slideshow.min.js.
We all know that pre-fetching images can run slow because of browser limits in the HTTP protocol, right? So, I have XHTML, jQuery, Apache httpd, and PHP at my disposal. What's an easy solution to pre-fetch a lot of images, without using sprites or multiple hosts?
See, I have these themes one selects with a SELECT box. It changes the 200x200 theme image on the right of the box. Unfortunately there are like 150 of these. So, when I load the page, the progress bar keeps running to download these all.
How can I get these images pre-fetching faster without using sprites or multiple hosts?
If it's just a theme change, which probably rarely happens (right)? Then why wouldn't you just load the image for a theme when the the select is changed and a new theme is chosen? It seems "strange" to load 150 images of which 149 may not be seen.
Correct me if I'm missing the point - and if so, can you provide a screenshot so I can get an idea of what you're really trying to show?
Hindsight is probably 20/20. I probably should have implemented it in sprites, as well as for many of the buttons I used on the site. It's just that I lack a good sprite editor tool that speeds that process up.
Anyway, the strategy I went with was to use Javascript prefetch via jQuery. But even that wasn't enough. I had to wrap that function in a setTimeout(), but that only helped a little. I then had to fire that setTimeout() during a login form submit. It made the login form submit slightly longer, but made the website appear snappy on load.