Why is my website running slow?

This FAQ will help you to set up your mailbox with Apple Mail

The below video and step by step instructions will help you learn how to add a mailbox to your Apple Mail email client.

No one likes a slow website and neither do we, so to ensure that your site runs the best it can, you can check out our list below on possible ways on improving its performance and in turn improve its efficiency.

This is not an exhaustive list of actions you can employ to make your site run faster but should cover some of the basics. You may be able to find some more suggestions by using your favourite search engine.

Please note:Before you begin, please make a backup of your website. This will allow you to revert back, should you need to.

Diagnosis

Modern web browsers allow you to monitor how quickly your web pages load which can help you in identifying items on a page that is loading slow. Some files can be obvious like HTML pages and images and others less so. If someone built your site for you, ask them what the file does if it is loading slow.


Google Chrome

  • Step 1 of 3

    You can open your Developer tools by hitting the F12 button on your keyboard, or by clicking on the Menu button in the top right of the window, and then selection More Tools and then Developer tools from the menu.

    Chrome Developer Tools menu

  • Step 2 of 3

    This will open the Developer tools panel within your browser; either at the bottom of the window or at the side, depending on how your browser is configured. Once this is open, click on the Network tab at the top of the panel.

    Developer Tools network tab

  • Step 3 of 3

    Then load or reload the page you want to analyse and watch the timeline on the right of the panel to see which area of your page is taking longest to load. The longer the block in the timeline, the longer it is taking for that section to load.

    Network timeline

Firefox

  • Step 1 of 3

    You can open your Developer tools by hitting the F12 button on your keyboard, or by clicking on the Menu button in the top right of the window, and then theDeveloper buttonfrom the menu.

  • Step 2 of 3

    This will open a submenu, where you can either select the Toggle Tools option, or go straight to the Network panel.

  • Step 3 of 3

    Then load or reload the page you want to analyse and watch the timeline on the right of the panel to see which area of your page is taking longest to load. The longer the block in the timeline, the longer it is taking for that section to load.

Internet Explorer

  • Step 1 of 2

    You can open your Developer tools by hitting the F12 button on your keyboard, or by clicking on the Menu button in the top right of the window, and then theDeveloper Toolsoption from the menu.

  • Step 2 of 2

    Ensure you have the Network option selected using the tabs on the left hand side of the panel, then load, or reload, the page you want to analyse and watch the timeline on the right of the panel to see which area of your page is taking longest to load. The longer the block in the time line, the longer it is taking for that section to load.

You can also use various external tools to assess the performance of your website. These tools will scan your website and identify areas of improvement. There are loads of examples of these kinds of tools online, but a couple of popular ones are GT Metrix and Pingdom.


Further tips

Optimising Images

Your images' file sizes can vary due to the size (resolution) of the image, and the quality of the image. Having an image with a huge file size on your site can dramatically increase loading time and overall site performance, especially for users with a slow internet connection. Thankfully there are some steps you can take to reduce the file size without compromising the quality of the image:

  • Resize it – Use you can simply resize your images correctly using image editing programs like Microsoft Paint or Adobe Photoshop. It’s best to have a 480×360 image rather than a 2400×1800 image squashed into a 480×360 space on your web page.
  • Change the image type – The most common image types are JPEG and PNG. Use JPEG for photographs and complex art. Use PNG for text, logos, cartoons and simple colours.
  • JPEG Quality Adjustment – Some image editing programs, like Photoshop or Paint.net, allow you to alter the quality of your JPEG images. It can make a difference between a 1MB image or a 380KB image with no noticeable quality difference. Experiment with the settings to see how low you can make the file size go, without losing the image quality.

Enable Gzip Compression

Gzip compression is a feature that compresses the text-based files on your site (e.g. HTML, PHP and Javascript files). This means that these smaller chunks can be delivered to your visitors quicker. This is done slightly differently depending on whether you are on a Linux server, or a Windows one:


Linux

Create a blank file under the public_html folder and call it .htaccess, or edit an existing one and paste the below code at the bottom:

<IfModule mod_deflate.c>
#Enable Gzip compression
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/json
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/eot
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/vnd.microsoft.icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml

# Remove browser bugs for legacy browsers
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
</IfModule>

Windows

Create a blank file under the web/content folder and call it web.config or edit an existing one and paste the below code in the correct place:

<system.webServer>
<httpCompression directory="%SystemDrive%inetpubtempIIS Temporary Compressed Files">
<scheme name="gzip" dll="%Windir%system32inetsrvgzip.dll"/>
<dynamicTypes>
<add mimeType="application/javascript" enabled="true"/>
<add mimeType="application/json" enabled="true"/>
<add mimeType="application/rss+xml" enabled="true"/>
<add mimeType="application/vnd.ms-fontobject" enabled="true"/>
<add mimeType="application/x-font-opentype" enabled="true"/>
<add mimeType="application/x-font-truetype" enabled="true"/>
<add mimeType="application/x-font-ttf" enabled="true"/>
<add mimeType="application/x-javascript" enabled="true"/>
<add mimeType="application/xhtml+xml" enabled="true"/>
<add mimeType="application/xml" enabled="true"/>
<add mimeType="font/eot" enabled="true"/>
<add mimeType="font/opentype" enabled="true"/>
<add mimeType="font/otf" enabled="true"/>
<add mimeType="image/svg+xml" enabled="true"/>
<add mimeType="image/vnd.microsoft.icon" enabled="true"/>
<add mimeType="message/*" enabled="true"/>
<add mimeType="text/*" enabled="true"/>
<add mimeType="*/*" enabled="false"/>
</dynamicTypes>
<staticTypes>
<add mimeType="application/javascript" enabled="true"/>
<add mimeType="application/json" enabled="true"/>
<add mimeType="application/rss+xml" enabled="true"/>
<add mimeType="application/vnd.ms-fontobject" enabled="true"/>
<add mimeType="application/x-font-opentype" enabled="true"/>
<add mimeType="application/x-font-truetype" enabled="true"/>
<add mimeType="application/x-font-ttf" enabled="true"/>
<add mimeType="application/x-javascript" enabled="true"/>
<add mimeType="application/xhtml+xml" enabled="true"/>
<add mimeType="application/xml" enabled="true"/>
<add mimeType="font/eot" enabled="true"/>
<add mimeType="font/opentype" enabled="true"/>
<add mimeType="font/otf" enabled="true"/>
<add mimeType="image/svg+xml" enabled="true"/>
<add mimeType="image/vnd.microsoft.icon" enabled="true"/>
<add mimeType="message/*" enabled="true"/>
<add mimeType="text/*" enabled="true"/>
<add mimeType="*/*" enabled="false"/>
</staticTypes>
</httpCompression>
<urlCompression doStaticCompression="true" doDynamicCompression="true"/>
</system.webServer>

Extend web browser caching

This method only helps visitors who have visited your site at least once. What this does is extends the amount of time some parts of your site is cached on a visitors computer. Loading cached content is quicker than retrieving it from the server everytime you visit.

Please note:This code is only for Linux servers.

## BROWSER CACHING ##
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
## BROWSER CACHING ##

Please note:You can also read this guide for information on improving performance on your WordPress site.

Related Support Material:

  1. What can I do if my site is running slow?
  2. Why is the website hosted on my VPS slow?
  3. How will the Search Engine Optimiser help me improve my site?
  4. How can I improve the performace of my WordPress website?
  5. What is Website Builder?
  6. What is an error 404?