Safra updated Topshop’s WordPress blog to a cleaner, quicker, and more on-trend design. Working with in-house designers, we recoded their blog to use fewer plug-ins and load faster.
View Topshop’s blogTopshop originally requested to use a generic theme that would be tweaked a little to their needs, but it quickly became apparent, as with most themes, that the theme they chose was woeful for performance and usability; plus, the design changes they’d requested – although seeming simple on the surface – were enough to create the same workload as creating a theme from scratch.
So, we created a bespoke theme instead and made sure performance was at the forefront.
Performance
The old site was slow which was due to a few issues:
- a super large database full of redundant/out-of-date content
- lots and lots of images (the blog listings page contained all the content for each post on it rather than excerpts)
- mobile showed the same images as desktop
- lots of plugins all with their own JavaScript files
- social like buttons for Facebook Twitter etc
Bearing in mind the above, the previous developer had done a very good job getting the site to perform reasonably given how image and plugin heavy the site was.
PageSpeed scores
Google PageSpeed Insights scored the new site at 91/100 for Desktop and 86/100 for Mobile compared to the old site being 52/100 for Desktop and 36/100 for Mobile.
Reduced content (and images) on home/listings pages
Step 1 was to recommend to the design team that the homepage and category/archive listings page only show excerpts of each post. This meant fewer and fewer images on the site (the site went from around ~6Mb or images to ~2.5Mb).
The old site had 90+ requests for assets and the new site had 35 requests.
Reduced plug-in reliance and social 'like' plugins
Official social share icons can look naff as well as slowing a site by loading in all their external content (HTML, CSS, JavaScript etc). So on the new Topshop WordPress blog, the social share links are inline SVGs with a sprinkling of JavaScript that pops open the share link in a small window.
Responsive images
Mobile users may be on 3G or their local WiFi – we’re never sure how strong their connection is, but one thing we do know – they do not want to download a 1024px wide image on their device which is then resized to fit a 320-375px space. With the help of srcset the size of images on mobile devices was reduced by 88%! That’s right, the new home page that was 2.7Mb on a desktop device became 335Kb on screens 375px wide or less.