99/100 Google Pagespeed Score with ClickBump 6

I've just updated the ClickBump 6 Beta to Release Candidate status. The update brings the beta several steps closer to release. ClickBump owner's with a current upgrades package can download the beta beginning today.

Note: ClickBump 6 is now available, this post was written prior to the release.

There’s tons of new stuff to talk about, but in this blog post, I want to highlight 2 pretty sweet things made possible with this release:

  1. How I achieve a 99/100 Google PageSpeed Score
  2. How I create the 3D Slider effect on the “Canvas 4 Demo Site“.

First, a look at the site. You can visit the live demo site now on desktop, iPad or iPhone to check it out.

Here’s a preview (Click the image to preview the live demo site or click here):

Canvas4 Demo Site

Preparing the slider PNG images for the 3D effect

The ClickBump core theme comes with a built in slider widget that has some nifty point and click display options. For example, you can have it display vertical tabs/spines or inside/outside nav arrows. You can also have it display a named category’s posts or static content you’ve added directly to the slider widget.

Its enabled by default when you build your site with JumpStart Pro, or you can easily enable it just by dragging a copy of it over from the widgets manager.

To create the 3D effect on the slider, I added a tiny bit of custom css in order to allow the images to flow out the top of the slider and give the illusion of depth:
.clickbump_slider dd,.clickbump_slider dl{overflow:visible !important}
.clickbump_slider{padding-top:40px;margin-top:-40px;overflow:hidden}

If you want to emulate this look, the first step is to copy the two lines of CSS above and paste it into your site at “ClickBump > Misc > Custom > CSS

To create the transparent areas of the PNG images, I opened my originals at pixlr.com and removed the background from the top areas using the magic wand tool (for the close cropped areas). For the areas along the sides I used the eraser tool with a large 200 pixel feather radius. You can see the transparent areas in the screenshots below. They are represented by the checkerboard patterned areas.

Here’s some shots of the images in pixlr:

Canvas4 Demo Site

The image above had a solid white background which I selected and deleted to reveal the transparency layer. This is the key to good slider images, and gives you lots of flexibility in how you display them. (Just remember to unlock the layer (by clicking on the lock icon) before deleting the background pixels.

In the image below, you’ll see the third slider image I’m using on the demo sites. This image did not have a solid white background, so it was a bit more tricky to knock out the background to transparent. The key here is to use a wide feather eraser for the fade effect and use then reserve the lasso drawing tool for areas where you need a tight crop. If you are familiar with making selections in Photoshop (using the lasso or pen tool) then this will be familar to you.

Canvas4 Demo Site

A stunning 99/100 Google PageSpeed Score

Perhaps most importantly though, the site is super fast thanks to the ClickBump 5.6 theme. It Scores a 99/100 on the desktop test and a 96/100 on mobile. I’d never seen anything above 95 before I tested this site and I was pretty amazed (and satisfied) at the results.

Canvas4 Demo Site

Optimized for Mobile with the new “Responsive Design” version of the “Canvas” skin

The Canvas demo sites are all optimized for mobile. If you view them on an iPhone or iPad for example, it automatically reformats to best fit the screen rotation. I was pleased to see my “Responsive Design” updates to the Canvas template skin resulted in an speedy 96/100 Score on the Google mobile speed test. Here’s what it will look like on iPhone and iPad and in portrait view

Canvas4 Demo Site

For those of you with the “LocalMagic” Template Skin package, I’ve also updated it for mobile using responsive design. You can download the template upgrader and upgrade your sites beginning today.

More from master tutorials

One Response to “99/100 Google Pagespeed Score with ClickBump 6”

  1. Scott Blanchard says:

    Update: ClickBump owners who want to set up their sites for optimum performance, check this sticky on the owners forum.

☝ Back to Top