• Share this article:

Speed optimisation

It's important that people landing on your website have pages which load quickly. A website that is running in an unhealthy state (with slow loading pages) is likely to see a sharp down-turn in visitor numbers. The only exception to slower loading pages would be if website visitors are clicking a link and anticipating a longer load time; such as a page containing many high-resolution images or a video that requires buffering. For all other 'average' webpages, most website visitors expect the page loaded in 2 - 3 seconds.

Also of note, some search engines like Google are now ranking some websites higher in search results; with particular preference to websites which load faster and consume less bandwidth. Some search engines realise that faster loading websites are easier for people to access from different devices, and therefore are a reflection of better quality search results being returned (more revenue for the search engine company).

For several years, ThemeFlood themes have deployed special methodologies and techniques to ensure your completed pages load quickly. We were talking about and implementing speed optimisation protocols in our theme designs long before most other theme companies. ThemeFlood themes load render-blocking resources like Javascript at the bottom of pages and are fully compatible with CSS consolidation in RapidWeaver 5 and RapidWeaver 6. So building websites with ThemeFlood themes already gives you a major advantage towards speeding-up your completed webpages.

Testing page speed

The first important thing is to determine where any slow-downs may be occurring. A lot of people mistakenly head straight towards the Google PageSpeed Insights website to run testing. However this can often return disappointing and very misleading results. You see, PageSpeed Insights is intended more towards enterprise level and high-traffic database driven websites; rather than smaller static websites most of us are building. And therefore, some of the 'issues' returned aren't actually things most average website developers are within their power or ability to fix. PageSpeed Insights should only be used occasionally as a 'just for interest' tool, rather than a tool you rely on regularly for gauging page speed and optimising your websites against. Getting a webpage to score 100% in PageSpeed Insights would require an extreme amount of style and functionality to be removed from a website; and there are many RapidWeaver addons you would otherwise not be able to use.

YSlow is a far more suitable service for RapidWeaver users to make use of. This is a small opensource (free) tool you install into your web browser. You navigate to a webpage you want to test and click the YSlow button. Importantly, change the Ruleset setting to Small Website or Blog using the drop-down menu and then you click a button run the test. Unlike PageSpeed Insights, YSlow analyses both the mobile and desktop versions of your website simultaneously and returns a single 'grade' and an overall page performance score rated out of 100. YSlow provides a more in-depth breakdown of page loading speed, including statistics and charts. The information YSlow provides is much easier to understand and far more realistic, towards the sorts of smaller websites we're building. YSlow typically proves more intelligent and has greater tolerance. Most importantly, the benchmarks YSLow uses are set against a database of previously tested websites; rather than a more blunt 'yes / no' scoresheet that PageSpeed Insights uses.

YSlow

Developer tools in Chrome and Firefox have a 'network' pane. When this pane is open and the page is refreshed, detailed statistics are displayed; showing the time taken to fetch and load each element in your page. This is a good tool to use for checking of files (like large images) which might be causing a page to slow down. You can see the order in which files are being loaded into the webspace, their total size, and the time taken to call them. Any bottlenecks can be isolated quickly.

Minifying files

Javascript files in your ThemeFlood theme are already minified; so there is nothing else you need to change here. Likewise resources and libraries used in themes (like jQuery and the Bootstrap framework) always make use of minified versions already.

Be sure that you have CSS consolidation enabled (turned on) in RapidWeaver. This will ensure the stylesheets RapidWeaver generates are outputted in a minified format. Minified code will always be faster to load and render.

In contrast to PageSpeed Insights recommendations, we purposefully keep theme CSS file calls at the top of pages. This is done to avoid ugly loading effects; caused by the page loading initially without any styling applied and then the stylesheets taking effect a second or two later. Also to maintain website compatibility with older web browsers (like Internet Explorer 9 and less), some CSS and Javascript files absolutely must be loaded at the top of the page.

Note that some RapidWeaver addons added into your page may not minify their CSS or Javascript code. You may have to do this yourself or accept that some files will not be minified. Likewise markup you add in the custom Javascript or CSS boxes (in the RapidWeaver page inspector) will not be minified unless you do it yourself. There are many tools for minifying code; our favourite is a cheap app called Smaller, available from the Apple App Store. If you wanted to compress all website files before upload / publication, then typically you would need to export your website from RapidWeaver first, drop it into Smaller, and then manually republish the processed files via FTP.

Images

Images are nearly always the heaviest files you would use in webpages; the exception possibly being video (discussed below). Lots of images can have a dramatic effect on page loading speed. Firstly you should always prepare you images in image editing software. Tools like Photoshop, Gimp, Acorn and Pixelmator have options to resize images down to more sensible dimensions and to save images into a suitable 'web safe' format. All images you use on the web should be saved into either PNG or JPG format, at 72 dpi. Ideally images should not exceed 200KB in size (each) unless your aim is to display special high-resolution images or large images to fill a substantial area of the page (like a banner or page background).

Pixelmator re-saving image

After saving your images, put them through a free tool like ImageOptim. This will strip-out any surplus profiles, comments or meta data that are not needed. This in turn will reduce the image file sizes down even more, with no impact on the image quality or colours. It's not unusual for ImageOptim to reduce the file size of some images by 50 percent or more.

ImageOptim

All ThemeFlood themes include support for Font Awesome icons. Font icons provide an excellent alternative to using image-based icons. Over 500 icons are supported. Many of these can be included next to headings, links or within buttons. Use Bootstrap buttons or stacks like ButtonMaker to generate pure CSS and HTML buttons, with no dependancy on images.

Video

Free services like YouTube, DailyMotion and Vimeo (among many others) make it easy to embed video content into your webpages. Typically these services do all the optimisation and compatibility fixes on your behalf, so there is nothing further to concern yourself with. However some of these services do not work with websites that have a security certificate applied (SSL) and there may still be occasions when these services pull files or resources into a webpage which are not optimised.

YouTube

If hosting your own video HTML5 content, be sure to make use of addons like the Player stack. These ensure your video files are served in the proper format and permit you to adjust how aspects such as preloading and buffering are handled. Additionally you can link to video stored on CDNs (content delivery networks) like Amazon S3, which can have a substantial impact on the speed at which people can download your video content to watch.

Adjusting .htaccess files

If you host your website on an Apache web server, be sure that your .htaccess file (in the root directory where your website is stored) includes the following:

# BEGIN GZIP

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

# END GZIP

# EXPIRES 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 text/html "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 1 month"

# END EXPIRES CACHING

# USE UTF-8 FOR ALL PLAIN TEXT AND HTML FILES SENT

AddDefaultCharset utf-8

# END UTF-8

This code will ensure Gzip compression is enabled, as discussed here. It will force web browsers to cache more of your website files, like images and theme code. It will also force all plain text and HTML files to be sent in UTF-8 format; therefore saving the web browser the time and trouble trying to determine what format the files are in.

As always, editing .htaccess files carries some health warnings! This is quite a fragile file than can easily be broken and cause a lot of damage to your website. Some hosting companies do not permit you to setup .htaccess files and may edit or delete them. If in doubt, always contact the hosting company to ask them to set this up for you. After all, that is what you pay them for!

Site structure

Spilt larger pages up into smaller subpages. Pages with a lot of content or images on them will ultimately take longer to load. Moving content off onto subpages provides your website users with the ability to jump straight onto specific categories. RapidWeaver makes it easy to rearrange pages, add subpages and change the structure of your website.

A prime example of this technique would be image galleries. Instead of having a vast image gallery of several hundred images, make use of plugins like WeaverPix to generate a small thumbnail grid of images. Each thumbnail image can act as a link through to secondary WeaverPix pages, where you can display your images in full resolution via a lightbox gallery, slideshow or carousel etc. Splitting portions of your website like this results in faster loading pages and easier site navigation for end users.

Avoid redirects; which can have a detrimental effect on page loading speed. A redirect is typically where someone lands on a webpage and you redirect them to another part of the website. Redirects should only be used when the physical location of a page or resource has changed; and you need to direct people to the correct location (to avoid 404 errors).

Website hosting

Cheap hosting companies promising unlimited bandwidth and disk space have to sacrifice something. Often you will find that sacrifice will be performance. Typically these hosting companies work on the economics of trying to squeeze as many accounts onto the same server hardware. Bottlenecks can often occur, especially if neighbouring websites on the same server are doing things like streaming video, hosting games or running processor-intensive software. Quoted hosting accounts (where each account has capped disk space and bandwidth) ensures everyone on the shared server gets an equal slice of resources to run their website. Very often the speed and reliability of websites can increase noticeably as a result. ThemeFlood recommends Chillidog Hosting as the fastest shared web hosting for RapidWeaver websites.

Global caching

Services such as CloudFlare copy your most popular website files onto multiple web servers located all around the world. The theory with using services like CloudFlare is that putting your website files geographically closer to website visitors results in faster loading pages and less strain on your primary web server. Services like CloudFlare are free for basic accounts, and then you pay subscription fees for accounts that have more features. It's not too difficult to setup services like CloudFlare, but there are a few important considerations to make: - Changes you make to your website may take a few hours before they show worldwide to all users - Not all web hosting companies or domain registrars support global caching services - It can be difficult and expensive to configure websites that make use of security certificates

Generally speaking, services like CloudFlare only need to be considered after all other page optimisation techniques have been implemented. If hosting your websites with a company like Chillidog Hosting, you can quickly turn-on CloudFlare in your CPanel, for basic websites.

Cutting-out the nonessentials Rid your webpages of all nonessential items and calls to external websites. Elements like social media 'share' buttons can add significant weight to pages if they connect to third-party services. Often you can replace elements like social media buttons with your own buttons; which work just as well and have minimal impact on page loading speed. Same with other 'widgets' like Twitter or Facebook embeds. All the time you're waiting on content from another website to load, you're slowing down your own website.

Provide Feedback

Please use this form to provide feedback about this particular knowledgebase article. For example; to report broken links, errors or things you think could be worded better. We welcome all constructive feedback. All fields are required.

 

Feedback is submitted anonymously (unless you otherwise provide your name or contact details). We don't promise to reply to every feedback message received; neither is this a good place to request technical support. You can continue to request one-to-one support through the ThemeFlood website. See getting in contact for details.