Boost Download Speed
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.
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.
- 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
Autoplay
Autoplay is not desirable 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.
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.
Responsive Media