- Web page loads slowly.
- Elements of the page don't load.
- The page seems to "hang" before loading a certain element, and then loads quickly.
READ ME FIRST
This article is provided as a courtesy. Installing, configuring, and troubleshooting third-party applications is outside the general scope of support provided by (mt) Media Temple. Please take a moment to review the Statement of Support.
CloudTech Can Help!
If you're having trouble with the steps in this article, additional assistance is available via CloudTech, our premium services division. Our expert engineers can tweak and tune your server for optimal performance. For more information on what CloudTech can do for you, please click here.
First, we want to see if this issue may be affecting you. Two of the best tools available for analyzing the load times of individual elements on a web page are as follows:
- Pingdom Full Page Test
- Firebug and the YSlow Add-on (this is a Firefox browser plugin)
How to use Pingdom and Firebug
- To use Pingdom, simply click on the link.
- Enter the exact URL for the web page you want to test, and click Test Now.
- You will see a graph of how long each element took to load, the name of the element, and its size.
Firebug and YSlow
- To use Firebug, you will need to visit the Firebug website to download the Firefox extension. Get YSlow while you're at it (you may have to install Firebug first).
- Once you've installed the plugin and restarted your browser, you will have two icons in the lower right of your browser:
- Visit your web page.
- Click on the bug icon. A tool will pop up on the lower half of your web page.
- Click on the Net tab, then on the dropdown next to it. Make sure Enabled is selected.
- Now hold down Shift and refresh your browser to see all the elements load again. You will get output like this:
This shows the load time for each element on your web page. It will also show whether it loaded successfully or not. Missing items will show up in red.
- To use YSlow, either click the YSlow tab in Firebug, or click on the speedometer icon in your Firefox status bar.
- Click Run Test.
- Read the output, paying particular attention to elements with bad grades.
Both of these tools show the number of elements and relative loading time of each item very well. However, they may or may not reflect a true loading time for your page. Both tools tend to overestimate the time for each element. Pingdom, particularly, since it requires a remote server to load the page, can add several seconds more to the page load time than most people are experiencing.
So, now you've run a couple of tests and identified some slow items. The four most common page elements that cause long load times are as follows:
- Large files, such as videos and images.
- Elements that require a lot of MySQL queries before they're generated. See MySQL optimization for further assistance.
- Plugins for your software that use the above type of content - plugins for popular software can be written poorly, because the coding experience of plugin developers varies greatly.
For videos and images, you should look into using a more compressed version of the file, or using a thumbnail on the main page (but NOT an on-the-fly resized copy of the large image - this actually requires more server time than just showing the large image).
For help with MySQL, see the links in Item 2 above. Note that if the MySQL queries have to be loaded before the main page can even display, they may show up as "hidden" load time in the main page (the first element shown in Pingdom and Firebug).
Now, let's take a further look at included files.
Many web pages contain references to elements that are not actually hosted on that server. Each external request requires a number of extra elements to be loaded through your server and your browser, which can add significantly to your page load time.
This requires a call to the host for that script whenever your page loads. Even worse, what happens if that host is slow at some point, or even unavailable? Browsers will wait for an extended period to try to include that script. The end result is that your web page is extra slow, and some page elements may not load properly. The more elements you have like this - images, PHP, Twitter feeds - the more your page slows down.
The solution for this is to download a copy of all your external content (or as much as you can), and upload it to the server here. When a new version comes out, just replace the version that you have on your own server, rather than querying a third-party server every time your page loads.
Finally, regarding plugins - if you're savvy enough to tweak your inefficient plugin, go right ahead. If not, look for updates, patches, or similar plugins that have better reviews for efficiency and speed.
What if this doesn't solve my problem?
If you've determined that you do not have an excess of elements included in your web page, you may want to check out our website slowness article for further suggestions.