To shed light on all those issues that slow down your website, we invited Stavros Papadakis to lay out his process for speeding up slow websites.

What Makes Your Website Slow?

You should definitely check my previous post with 16 ways to speed up your WordPress website.

Although this post provided a quick checklist with the best tweaks to optimize the loading time of your WordPress website, there are still many issues that can slow down your website.

If you have enabled compression on your htaccess file, combined CSS files, moved Javascript files to the footer but you are still not happy with the loading time of your site, then check these 18 common issues that slow down your website.

1. Super-heavy websites

There is no doubt that a 3MB page making 180 HTTP requests is going to be slower than a 1MB site with 60 HTTP requests.

Do you want to optimize the loading time of your site?

One of the best ways to do that is by minimizing the size of each page of your site.

Although you can optimize your images, combine CSS files, minify Javascript files and apply many front-end optimization tweaks, having a 3MB site is going to make your site slow and the users of your site unhappy.

21MBs are a huge load for your server and your browser.

While you are designing or redesigning your site, you should do your best to load only what you need and nothing more.

In others words, you should always ask yourself:

Do I really need 8 big images at my slideshow at homepage?

Do I have to display 20 portfolio items at homepage?

Should I show 12 testimonials of happy users at homepage or 3 testimonials will do the trick as well?

Loading all these data makes your site look nice but your site will be slower as well due to all these data.

Do you want to have a slow loading site? If not, then minimize the data loaded per page of your website.

2. Non-optimized images

Do you know that 80% of the time that it takes to load a website is controlled by the front-end structure?

This is an amazing fact of web performance optimization.

80% of the end-user response time is spent on the front-end. Focus on that.

You can try to optimize your database or PHP code but if you ignore this fact of paramount importance, then your website will be slow.

A 460KB PNG file can become 90KB by optimizing it.

If you have 10 non-optimized images at your site, then you may add 2-3 MBs of extra page load.

If you do not optimize your images, then the loading time of your site can be severely affected.

The good news is that most of the JPG and PNG images can become 40% or even up to 80% smaller without losing image quality by optimizing them using Photoshop, ImageOptim or a third-party tool such as Kraken.

3. Excessive usage of ads

Google Adsense and other similar services can be an extra source of income for you but they can also slow down your site.

A website that loads ads in header, to the right sidebar, in the body of the post and at the bottom of the page using 2 or 3 different ad services, is going to be much slower than a website with only 1 ad in the right sidebar or in the body of the post.

Not only are the ads annoying for most of the users but they will slow down your site as well.

Please check the following screenshot from a client’s website.

Do you really need all these annoying ads?

Believe it or not, there are 4 different ads in it, one ad at the top of the screenshot, the video which is an ad, an ad to the right sidebar and another ad at the bottom of the page! Needless to say, those ads are annoying for most of the users and slow down the loading time of your site as well.

To sum it up, ads should always be used with caution. As long as an ad does not generate money, it should be removed.

4. Wrong dimensions for your images

You should not scale images in HTML, you should resize a large image and use the resized image instead.

For instance, let’s assume that you have an image that it is 1200px x 600px and you want to use a “smaller” version of it e.g. 400px x 200px.

In that case, do not use the original image and scale it down by changing width and height dimensions in HTML.

You must create a new thumbnail image by resizing the original image from 1200px x 600px to 400px x 200px and use the new image which is smaller and will load faster.

I have come across many sites that used to load a 256 x 256 facebook image of 150KB instead of a 32 x 32 facebook icon of 2KB!

5. Pointless redirects

I have one quick quiz for you.

Which one of the following images loads faster, A, B, C or D?

A. http://www.domain.com/image.jpg
B. http://domain.com/image.jpg
C. https://www.domain.com/image.jpg
D. https://domain.com/image.jpg

Did you choose A? Wrong.
Did you choose B? Wrong.
Did you choose C? Wrong.
Did you choose D? Wrong again!

The right answer is that it depends on your site!

If your site is https://www.domain.com, then by calling the non-HTTPS version of the image (http://www.domain.com/image.jpg), there will be an extra redirect from http://www.domain.com/image.jpg to https://www.domain.com/image.jpg by the browser in order to load the image.

If you are using the non-www version for your site (http://domain.com/), then you should always use the non-www version for your images as well (e.g. http://domain.com/image.jpg instead of http://www.domain.com/image.jpg).

Browsers do not like this kind of pointless redirects.

Pointless redirects will slow down your site

By using relative URLs for your files (e.g. <img src=”/image.jpg” />), you can easily get rid of this common issue that slows down the loading time of your site.

6. Wrong server location

If the traffic of your site is mainly from USA or UK, then your site should be hosted by a hosting company located in USA or UK respectively.

The closer the server is to the visitors of your site, the faster your website will be.

Needless to say, if you get traffic from all over the world, then I highly recommend you to use a Content Delivery Network or CloudFlare so that images, CSS and Javascript files are loaded from a server closer to each user’s location.

7. Dodgy shared hosting plans

No one wants to pay $$$ for hosting a site but serving a WooCommerce site with 40 active plugins or a Magento site with 5000 products via a shared hosting plan that costs $5 per month is a recipe for disaster.

You should always invest in a good hosting company to get the best loading time for your site.

If your site is unavailable or slow, then you may save a few dollars per month by using a shared hosting plan but you will lose much more by losing your clients (a user that visits a slow loading site will not revisit this site).

If you have a heavy WordPress site using Woocommerce or many active plugins, then I highly recommend WP Engine and FlyWheel (affiliate links).

You should not expect to get 200.000 unique visits per month to upgrade to a VPS, this will never happen while you are hosting your site on the same overloaded server with hundreds of sites on it.

8. Excessive usage of social media scripts

Social media (Facebook, Twitter, Pinterest etc) scripts add a DNS lookup, a set of Javascript files and a few images as well whenever they are added in a page.

Although many of those sharing options should be available at the end of your posts so that your users can easily share your posts, it does not make sense to load all those sharing options at every single page.

What’s the point of loading those social media icons in every single page e.g. at the contact page or at your category pages?

Showing 5 different social media counts for each post on homepage or category pages adds a lot of load to your site. How important is it to show counts on these pages? Do you need to show Facebook, Twitter, Pinterest, Google Plus and LinkedIn as well?

Too many social media scripts can kill the performance of your site

Would you be best of just showing 1 or 2 that perform well for you? If you don’t get many shares, is there much point showing any at all?

You should always think twice before adding any social media options in a page of your site.

9. Wrong file type for your images

If you need transparency for your images then you cannot avoid the PNG file type BUT if you do not need transparency, you should never save your images as PNG files because they are much bigger in filesize so much slower than JPG images.

Minimize or even eliminate any heavy GIF files because they can drastically slow down the loading time of your site.

You should also try to avoid saving images with text as content because it can be a time-consuming process to edit the text on images and generated images are much heavier as well.

Use JPG as your default. It’s the smallest and fastest loading file type for most of the files.

10. Not taking advantage of dedicated services

There is a big number of popular services that can reduce the load of your server.

Do you have videos on your site? You should use Youtube, Wistia or Vimeo.

Do you have many comments on your site? You should use Disqus, IntenseDebate or
Discourse.

Do you use jQuery, jQuery UI, AngularJS or Mootools? You should load them via the Google hosted libraries.

Do you use WordPress and display popular posts? You should use Jetpack which does that automatically for you.

You can also use a Content Delivery Network (CDN) to serve your images from it instead of your site.

If your site is getting significant traffic and you load many images and videos, the loading time of your site can be optimized drastically by balancing your site’s workload with the above-mentioned tricks.

11. 404 errors

If you try to load a file which does not exist or the browser cannot find then the loading time of your site will be affected by this 404 HTTP error.

You should always check for any 404 errors during the rendering of your pages in order to achieve the fastest loading time. You can do that either by checking the generated waterfall of your site using Webpagetest and GTMetrix or by using the network tab of browsers such as Chrome and Firefox.

If Webpagetest shows any red lines on the waterfall then you should immediately troubleshoot and fix those 404 errors.

404 Errors Can Ruin Loading Time

This kind of errors can really ruin the loading time of your website especially if you serve your site via a shared hosting plan.

12. Not caching your site

Every content management systems (WordPress, Joomla, Drupal, Magento) uses a database in order to save a big set of data on it.

Although this is great for managing your site, it also means that it adds extra load on your server in order to generate each page every time it is requested.

You can solve this problem by using caching.

If you use WordPress, then you can either use a caching plugin such as
W3 Total Cache or WP Super Cache or ZenCache or use a managed server hosting company such as WP Engine and FlyWheel (affiliate links) which take care of caching.

Needless to say, Joomla, Drupal and Magento offer caching options as well which can help a lot by providing cached versions of your site for consequent site visitors instead of generating each page over and over again.

Caching your pages can drastically speed up your site

Caching is a no-brainer for any database-driven website. Even a 10-minute caching period can optimize the loading time of your website drastically.

13. Hundreds of HTTP requests

Every CSS file, Javascript file or image loaded on your site is a HTTP request. The more HTTP requests your site has, the slower your site will be.

Although you can try to combine CSS and Javascript files, to inline CSS files and to use CSS sprites for small images, if you implement those tweaks and you still have 150 HTTP requests, then you should obviously try to declutter your site by removing content from it.

246 HTTP requests will slow down your site no matter how optimized it is

I know it is tempting to display a lot of content in each page of your site but please keep in mind that “less is more” so try not to load so many images or scripts.

14. Bad server configuration

If you are on a shared hosting plan, it is quite common that they do their best to serve as many sites per server as possible.

They usually do that by disabling features such as compression and KeepAlive among others.

Enabling HTTP Keep-Alive allows the same TCP connection to send and receive multiple HTTP requests, thus reducing the latency for subsequent requests.

Compression reduces the size of files sent from your server to increase the speed to which they are transferred to the browser.

If you are on a shared hosting plan and your hosting company has disabled compression and Keep-Alive, then you should switch hosting company as soon as possible.

Keep-Alive and compression should be enabled on your server

15. CSS imports

CSS imports are a nice way to import CSS files on the top of a new CSS file e.g. importing a CSS reset file but it adds additional delays during the loading of a web page as well.

You should avoid CSS imports, whenever possible.

16. Loading unnecessary files on each page

You should load CSS and Javascript files only when they are required on a page of your site.

For instance, if a specific Javascript file is needed only on a single page, in that case, you should load that Javascript file only at this URL instead of loading it on every single page of your site.

If you do not follow this simple rule, then you can end up loading 30 CSS and 40 Javascript files on a page which needs only 3 CSS and 4 Javascript files so you are making 63 extra HTTP requests and adding many hundreds of kilobytes on the page size.

17. Loading heavy files on the background

Many sites used to load big background images which are hardly visible.

Do you really need a 500KB image loaded on the background? You should try to use CSS3, whenever feasible or use a background color instead.

It is also a bad practice to load sound files on the background while your site is loading.

Most of those techniques are slowing down your site and should be avoided.

18. Not using an expert

My goal was to give you enough information to get started fixing the slow loading pages of your site.

Optimizing the loading time of your site is a win-win situation for you and everybody who visits your website. Faster sites means higher conversions, better search engine rankings and a more enjoyable user experience.

It’s best to hire an expert when you want a job done well.

Amateurs can follow best practices but do not know where to begin.

An expert will fix the actual problems that slow down your site.

Whenever an amateur does not know the real problems of your website, they will recommend a pointless temporary solution such as moving hosts, changing theme, installing a different caching plugin or even switching CMS.

Many of my clients have wasted their time and money on amateurs who had just installed a caching plugin without fixing the actual problems of their site.

You should always keep in mind that each website is unique so different speed optimization tweaks have to be applied per site.

To sum it up, optimizing the loading time of your site should always be done by an expert who will perform the speed optimization tweaks with surgical precision.

Imagine how happy your users will be to see super fast loading times!

If you want to hire me, I’m happy to help you. See my portfolio and contact me on AwesomeWeb today!

The post 18 Things Making Your Website Slow appeared first on How To Make Money Online.

In 2010, Google confirmed that site speed is one of over 200 indicators that impacts search rankings. Their data shows that when pages load slowly, people spend less time. Yet most of us put little focus into making our websites faster.

Maybe fine-tuning the inner speed triggers of your WordPress website is too daunting.

To shed light on cutting your load time in half, we invited Stavros Papadakis to lay out his process for speeding up client websites.

If your load time is more than 3 seconds or your page size is over 2MB, that can be a big problem that’s costing you money, both in lost sales and server fees.

There are many free online tools such as WebPageTest, GTmetrix, Google PageSpeed Insights and Pingdom that can help you identify issues that cause slow loading times and bad user experience for your site.

Here’s how to take charge of your website’s performance.

1. Enable compression

Compressing your CSS and Javascript files will help browsers download them faster.

Gzip compression can easily reduce file sizes from 200+KB (non-compressed) to less than 40KB (compressed). As long as your server has compression enabled, take advantage of it.

You can be sure that your users will experience a drastic speed up of your site for both desktops and mobiles by enabling compression at your server.

Add the following snippet of code at your .htaccess file in order to enable compression for static files.

AddOutputFilterByType DEFLATE application/x-httpd-php text/php text/html text/plain text/css text/xml application/x-javascript text/javascript application/javascript text/x-js

BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent

2. Optimize your images

Images are the main culprit for slowing a website. Always optimize your images (especially those above 50KB) before uploading them to your website.

The optimal way of optimizing them is to use Photoshop or any other image manipulation software. Save images for web with image quality up to 60%.

You should also use progressive images for JPG files because progressive rendering of images provides a smoother user experience.

Please check the following two images, they look the same but the left one is non-optimized and is 80KB and the one to the right is optimized and it is only 18KB, 4 times smaller.

Non-Optimized Image

Optimized Image

3. Move Javascript files to the footer

Although Javascript libraries such as jQuery, Mootools and Prototype are awesome because they extend your website’s functionality, they can also block the rendering of your pages.

Browsers don’t start loading the content until all the Javascript files in the header of the page have been downloaded.

An easy way to solve this problem is to move your Javascript files, those which are not required during the initial page rendering, from the header to the footer of the page.

If you use WordPress, you can move script calls from header.php to footer.php at your theme and use true as the fourth parameter whenever you use the wp_enqueue_script function.

Move JS scripts to the footer of the page

4. Make sure that you have KeepAlive enabled

Apache (the most commonly used server for shared hosting plans at low-cost hosting companies) has a great “feature” called KeepAlive which keeps connections open for more than one HTTP request.

Make sure KeepAlive is activated at your hosting company.

If you have access to your httpd.conf file, enable KeepAlive by making sure that you have “KeepAlive On” in it, otherwise just add the following piece of code at your .htaccess file.

<ifModule mod_headers.c>
 Header set Connection keep-alive
</ifModule>

Enable KeepAlive for your site

5. Merge CSS files – Inline small CSS files

Browsers only handle so many HTTP requests at the same time. When this limit is reached, some files wait while others are downloaded.

By merging all your CSS files into one CSS file only, the page renders much faster.

If you have CSS files which are less than 2KB, then you should inline them instead of making an extra HTTP request.

WordPress has a few great plugins such as Autoptimize and Better WordPress Minify that can be help you merge or even inline your CSS stylesheets.

Merge CSS files and Inline them

6. Enable caching

Caching drastically improves the load time of pages that do not change that often.

By enabling caching at your site, your code doesn’t keep generating the same page over and over again. This way the user experience is much better and your server can handle more traffic.

W3 Total Cache, WP Super Cache and WP Fastest Cache are just a short selection of free WordPress plugins that provide different kind of caching e.g. page caching, database caching and object caching among others.

W3 Total Cache plugin provides page, DB and object caching

7. Use a Content Delivery Network

Whether you use a CMS like WordPress, Joomla, Magento, Drupal or a custom-made PHP or HTML site, I highly recommend configuring a Content Delivery Network (CDN).

A CDN is a distributed system of servers deployed in multiple data centers across the internet.
When a client visits your site, static content like images and CSS files are served from the server that is geographically closest them so they are rendered much faster.

By the way, the load on your server is also drastically reduced thanks to a CDN.

CloudFlare is a free CDN and DNS provider among others. MaxCDN is also a great and affordable option to optimize the loading time of your site. They are both as good as they can get.

CloudFlare is a free Content Delivery Network

8. Minimize the number of HTTP requests

The more HTTP requests you have, the slower the loading time of your site will be.

Combine your CSS files, merge Javascript files, and combine images in data sprites among others to make as few HTTP requests as possible.

When I work on a client’s site, one of my major goals is to minimize the number of HTTP requests loaded per page.

Merge CSS files, use data sprites or data URIs in order to reduce the number of HTTP requests

9. Choose the correct file type for your images

Use JPG as your default. It’s the smallest and fastest loading file type.

Use PNG only for images with text (JPG rasterizes text which makes it blurry) or if you need a transparent background.

Minimize or even eliminate any heavy GIF files because they can drastically slow down the loading time of your site.

Although the following two images look the same, there is a huge difference between them. The one to the left is saved as a png file and weighs 102KB and the other one is a JPG file with a size of 18KB, that’s right, 6 times lighter!

Image saved as PNG

Image saved as JPG

10. Fix your 404 errors

Believe it or not, any missing file generates a 404 HTTP error and will definitely slow down the loading time of your site.

Always check for any 404 errors during the rendering of your pages to achieve the fastest loading time.

If your “waterfall” (the way the browser renders your site) looks like that (watch out for any red rows), then 404 errors are ruining the loading time of your site.

404 Errors Can Ruin the Loading Time of your Site

11. Take care of your page size

Although it is tempting to display a lot of content in each page, you should try to keep your page size to the minimum.

This is even more crucial for mobiles. Having to load a 2MB site via mobile in a 3G connection is a recipe for disaster. Take into account that users do not like to wait for more than 2-3 seconds for a page to render.

Does a new image add value to the site? If not, then you should not add it to your site. Simple like that.

Reduce the Page Size

12. Scale images

Never scale images on the fly in HTML. Create a thumbnail of the image that you need at the exact dimensions that it will be used in your pages.

For instance, if you have an image that it is 1200px x 675px and you want to use a “scaled” version at 480px x 270px, create a new resized version of the original image and use that instead.

This image links to a “big” version of the image using a scaled thumbnail instead of changing the dimensions of the image in HTML.

Thumbnail (Scaled Image) Links to Large-Size Image

13. Leverage Browser Caching

Google recommends a minimum cache time of one week and preferably up to one year for assets that change infrequently.

Set a caching policy for all server responses to static files (images, CSS and Javascript) so the browser can determine whether it can reuse a previously loaded file or not.

This is usually done by adding this snippet of code at the .htaccess file for shared hosting plans

<ifmodule mod_expires.c>
ExpiresActive On
ExpiresByType text/html “access plus 7200 seconds”
ExpiresByType image/gif “access plus 864000 seconds”
ExpiresByType image/jpg “access plus 864000 seconds”
ExpiresByType image/png “access plus 864000 seconds”
ExpiresByType text/css “access plus 864000 seconds”
ExpiresByType text/javascript “access plus 864000 seconds”
ExpiresByType application/javascript “access plus 864000 seconds”
</ifmodule>

14. Optimize your database

As long as you have a database-driven site (which includes WordPress and all other CMS-based sites), then be sure to optimize your database.

Monitor your code for slow queries. If you are on a VPS or dedicated server, enable query caching and optimize your database server configuration.

Although full database optimization can be a really tricky and time-consuming process, phpMyAdmin offers you a few basic optimization options  by “optimizing your tables”.

Optimize your Database via phpMyAdmin

15. Select your hosting company wisely

Choose a hosting plan that meets your site needs.

Most hosting companies apply limitations to their shared hosting plans and host hundreds of sites per server to keep the fees to the minimum.

You get what you pay for. If you have an Ecommerce site, a heavy CMS, a lot of traffic or traffic spikes, avoid shared hosting plans.

I highly recommend WPEngine managed WordPress hosting company for any eCommerce WordPress site or any WordPress site with traffic spikes.

16. Hire an expert

My goal is to give you enough information to get started optimizing your website speed.

But as you know, it’s best to hire an expert when it’s important to get it right.

One of my clients contacted me in order to optimize the loading time of his website. The website pages were taking a long time to load and visitors were complaining because the user experience was bad.

I updated WordPress to its latest version, migrated the website to a reliable hosting company and applied speed optimization tweaks to achieve the best feasible loading time.

The loading time went from 8.2 to 2.6 seconds. The first byte and start rendering time was optimized down to 0.147 and 0.384 seconds respectively and the number of HTTP requests was reduced from 96 to 78. Google PageSpeed Insights was also optimized to 88%.

Bounce rate decreased by about 10% within a few weeks. The client and more importantly the website users were happy and maintaining the site became a great experience.

To sum it up, optimizing the loading time of your site is a win-win situation for you and your potential clients.

Imagine how happy your users will be to see super fast loading times!

If you want to hire me, I’m happy to help. See my portfolio and contact me on AwesomeWeb today!

Conclusion

Everything improves when your site loads faster.

Google ranks you higher. Users are happier. Bounce rates decrease. Conversion rates increase. And you make more sales.

Stop losing traffic and money. Start optimizing the loading time of your site today.

Today I’m offering a $497 package special for IncomeDiary readers. This is half my normal rate. If your site meets my minimum qualifications, I’ll take care of everything listed in this post. Mention IncomeDiary in your message and I’ll be in touch with you shortly. Start off 2015 with the fastest website you can possibly have!

Hire me here or find other speed optimization freelancers on AwesomeWeb here.

The post 16 Ways to Speed Up Your WordPress Website Today! appeared first on How To Make Money Online.