Hero & Navigation

The ThemeKit RWD Hero Nav described on the previous page is shown here with the navigation closed on page load open. This allows more of the image to show if it is relevant to the page content.
Mobile
The action tab for a navigation for mobile touch devices needs to be in the bottom half of the screen for visitor convenience.
On device screen widths below the breakpoint the article becomes centered in row two and the navigation in row three.

Website Download Performance

The ThemeKit RWD widgets are all about creating an efficient website with a fast enough download speed. How fast is fast enough?
PageSpeed
The most important page as far as download time is concerned is the Home page. It's a good idea to test all the sites pages but the home page is a must.
The Home page should score over 90 in the Google PageSpeed Insights test for both desktop and mobile devices.
The most important function is the TTIA (time to interactive). This is especially important for mobile devices. If this time is more than 2 to 3 secs it's back to the drawing board!

Test Results

As can be seen from the table the test results for the ThemeKit Responsive and ThemeKit Responsive Media home pages are well into the ballpark.
The other website tested has a lot of work to do to make the home page perform adequately for both desktop and mobile visitors.
Content
The main problem is the sheer amount of content along with the oversized footer. The more content there is - the less likely vistors will take the time to peruse it.
Autoplay
Autoplay is a dirty word in web design, Research shows that autoplay is more likely to drive visitors away than excite them. Most visitors like to interact with a web page. Autoplay in any form removes that choice.
Navigation
A horizontal navigation with dropdowns has proved to be the least effective in getting visitors to click through to other pages.
The mobile navigation action tab should appear in the bottom half of the device's screen - not at the top.
Use an overlay navigation with the vertically align links front and center and the current page clearly marked.
Media
The obvious areas for improvement are the images, slidshow and video player.
The not so obvious is to replace the PNG images - used for icons - with SVGs. Every PNG icon is about ten times that of the equivalent SVG and each one requires a separate server request.
Video
If you must use a Vimeo or YouTube video player try not to have it on the home page.

The main areas to consider when making a web page more efficient are …

• Resize and optimise images
• Provide a smaller image file for mobile devices
• Don't use @2x images unless all your visitors are using Apple devices
• Remove special characters and spaces from all media file names
• Avoid using hosted video - Vimeo and YouTube
• If Vimeo or YouTube is a must use lazy loading
• Change all PNG and/or Font Awesome icons to SVGs
• Use an MP4 video player which loads a smaller file for mobile devices
• Make sure sliders can lazy load the images
• Full or content width sliders need to supply a smaller mobile image