15 Tips for Fixing Slow Loading Web Pages

Nobody wants to wait for slow-loading web pages to load. “People hate to wait,” Andy King states in the opening line of his book, Speed Up Your Site: Web Site Optimization (VOICES). “The Web is essentially a self-service environment. A core promise of self-service is speed. A customer turns to self-service to save time, to save money, and because it is more convenient.”

Call us spoiled or impatient, but the fact is the web-using public doesn’t want to wait at all. If your landing page loads at anything slower than the speed of instant gratification, you run a serious risk of losing your customer. As web pages grow in complexity, page load time can take longer and longer. This can translate into a loss of readers, page views, advertising impressions, click-throughs, and ultimately, a loss of revenue.

A few other good reasons to speed up:

• Your SEO depends on it – slow-loading web pages do not rank highly
• Mobile users (even those on slow connections) expect your page to load as fast or faster than their desktop

[text_ad]

Here are 15 ways to make your slow loading web pages load faster:

1. To measure how quickly a website downloads on various Internet connections, we turn to Google’s Website Speed Tool which offers tips for mobile and desktop. While it’s not a 100 percent accurate measurement of how quickly your site loads, it will provide you with a snapshot. Google Analytics can also tell you your site speed according to your users.  Based on some reading, this is how Google uses page load time in its rankings:

• If page load times are very long, over 10 seconds, you will get negatively hit in their rankings. Some SEO experts believe its higher than 10 seconds (15-20) but 10 is a good rule of thumb.
• If page loads are under 10 but not above 3.5 seconds, page load time does not influence rankings.
• If page load times are better than 3.5 seconds, the site is seen favorably and ranking could increase because the site is faster.

2. Set up Accelerated Mobile Pages (Google AMP), an open-source framework that allows publishers to easily make pages faster on mobile, while still able to serve ads. Google gives you all the tools and information you need to get started (it can be a big project though, so get your developers on board.)

3. Eliminate as many non-essential images as you can and optimize all images that remain on the page. You may be trying to load images optimized for print resolutions when they can be as low as 72ppi for screen resolution, and should be around 125KB or less in size.

4. Use system typography instead of images for navigation. Use CSS to create text effects instead of graphics. This will also help with your search engine optimization, since search engines read text, not graphics.

5. Reduce the overall size of the initial HTML page. Fewer lines of cleaner code always load faster.

6. Automatically generated HTML by WYSIWYG editors like Dreamweaver can sometimes produce very long and inefficient code. And every time you change something, they introduce an extra set of tags. As an alternative, try editing the code by hand. By doing so, a skilled programmer can usually cut down the number of HTML tags by 50 percent, compared to a page that was created by an HTML generator or WYSIWYG editor.

7. The popularity of tables has decreased due to responsive design, but if you are using them, especially nested tables, some browsers have trouble loading them efficiently. Here’s a tip: if you can’t figure out where a nested table starts and ends, the code needs to be rewritten and simplified.

8. The size of stylesheets have quadrupled in size over the past few years. Use a clean, efficient stylesheet to reduce the redundant definitions of font, size, color, effects and other attributes of objects. Reference images in the stylesheets. Use short style names. Reduce render blocking scripts in above-the-fold content.

[text_ad]

9. JQuery & JavaScript must be loaded, interpreted and executed on the user’s computer, which robs speed and memory from their system. Therefore, you should try to minimize/optimize this code as much as possible. Note: Because of the variability among browsers, QA these scripts in a variety of browsers and platforms for best results.

10. Whenever possible, use a server side language like PHP or a server side language that resolves to HTML rather than JQuery or JavaScript because a browser can process HTML 10x faster than it can JavaScript.

11. Use “valid” HTML or XHTML to enable the browser to process the code more efficiently. Many browsers have a “quirks” mode that is slower, but much more forgiving of little mistakes. Use WC3’s Markup Validation Service to diagnose any errors in your code.

12. Make sure to optimize your menus to be as efficient as possible to avoid bloated code.

13. Never put a Java applet or other code in an HTML page where there is a risk of it only working on limited browsers or platforms. Minimize interactions with the database. Try to resolve all database calls and simply display the data in HTML on the page. If you must interact with the database, select only on indexed fields.

14. If you’ve made all of the above improvements and you’re still struggling with site speed, use a CDN or Content Delivery Network like Akamai, MaxCDN, which will allow you to load images and other files offsite from different servers. You can get even more features from CloudFlare.

15. Use a script that inquires which device is in use, before choosing which content to execute. When doing responsive design you can show and hide content based on size, but hiding content still means it gets delivered—just not seen. Another method of controlling responsive design is to suppress content from rendering (this is different than hiding content). So, when hidden content is delivered to any device — mobile, tablet or desktop — you could actually be delivering whole sets of code, like menus, nameplates, etc. that are hidden, not suppressed. So, you have doubled the size of the page. To remedy this, deliver code that’s going to be seen by specifying which device is in use.

If you’re on WordPress, you can also install a caching plugin like W3 Cache.

Have you discovered any tips for increasing your website speed that you’d like to share with us? Leave a comment below.

If you’d like to learn how to increase your audience, revenue and profits with Haven WordPress CXMS, schedule a call with a member of our marketing services team.

This post was originally published in 2013 and is updated frequently.

[text_ad]