How to Reduce the Size of your Webpage
This, by no means, will be the most comprehensive guide to reducing the size of your webpage. If you need overwhelmingly thorough instructions on how to decrease your pageload time and file size of the pages on your website, check out some of these resources. That said, this will be a helpful overview on how to reduce the size of your webpage.
The size of your web page can effect many things, namely the pageload time, which effects your Google search engine ranking results, and it could cause other issues like images randomly swapping in Safari’s mobile browser. If the file size of a page on your website is too large, visitors may simply leave your website because it takes too long to load. Patience is a virtue, but don’t let your website be the one to teach this virtue.
Sidenote: We found some interesting Ideal Page Size poll results from Chris Coyier CSS-Tricks.com.
Quick steps to reduce your webpage size
There are a couple common issues that most large websites run into:
- Too many images
- Image file sizes are too large, especially for mobile
- Too many third-party fonts being loaded
- Self-hosting videos
- Improper Coding and too many javascript and stylesheets being used
Let me guide you through understanding some of these issues and giving some quick suggestions for correcting them.
Problem: Too many images. Solution: Use image sprites.
If a website is chock full of icons and images, regardless of their size, the browser has to make requests for every one of those images. This takes time and reduces the loading speed of your page. Not good.
An image sprite is a useful method of taking multiple images and combining them into a single image, thus reducing the overall number of image requests and speeding up your page load time. CSS (Cascading Style Sheets) rules then pull in the specific part of the image sprite that you want to use.
This may sound complicated, but there are neat, free image sprite tools like SpriteCow and SpritePad available to help you. (Disclaimer: these are not affiliate links and I have not personally used these tools, but am confident they will prove useful)
You may also want to read up on image sprites, or CSS Sprites, as they’re also referred to. I’m a big fan of CSS-Tricks.com and any tutorials they provide, so check out this CSS Sprite Tutorial.
Problem: Images too large. Solution: Mobile Responsive Design
When your mobile browser is having to pull in the same files that your desktop is pulling in, there is a problem. A mobile device doesn’t have the processing power of a desktop and those small screens don’t require desktop-sized images.
Mobile Responsive Design is a technique that web designers use to adjust the way a website displays on smaller screens. Using CSS, a designer can tell a browser to change which image is used, adjust the order and layout of your site and even remove entire sections of your website that aren’t necessary for a mobile device.
The “mobile responsive” keyword is a hot topic right now, so it’s being thrown around a lot. Make sure you get good advice from a reputable web designer before you invest in mobile responsive design on your site. Properly setting up mobile responsiveness is time-consuming when done right, so beware and be skeptical of anyone trying to sell cheap mobile responsive design.
We provide mobile responsive website design and would be glad to help you out. Contact us.
Problem: Too many fonts. Solution: Google Fonts.
Many sites, to this day, rely heavily on images for creating really cool titles for sections of their website. Bad idea.
You see, there’s this really cool thing called CSS3 that allows you to do all sorts of awesome things to text on your site. So first off, stop using images to display text. It’s slow and it’s not vector-based, so it won’t look beautiful on retina-friendly and high-resolution display devices.
However, many folks that have moved away from text images have introduced web fonts to their website. This is great, except when you go overboard. Web fonts are the answer to your text image problems. See some web font examples.
There are some awesome web font options out there. TypeKit and Fonts.com are two options, but I’ve had the best success with Google Fonts. They’re free. They give you a snapshot of page load time. And overall, they have a decent selection of font options.
Be picky about how many fonts you choose to load. Nancy Duarte, in her excellent book Slide:ology, talks about font usage and how slide templates and companies as a whole should pick one or two fonts and stick to them. I translate the same policy to website design. It’s your brand and it’s important.
Problem: Self-hosted videos. Solution: YouTube, Vimeo and Amazon
If you’re being overprotective of your videos and trying to host them yourself, give up. It’s unnecessary.
There are these small companies, namely YouTube, Vimeo and Amazon CloudFront that provide video hosting — some even do it for free! (My apologies for blatant facetiousness)
Simply put, if you want your site to load quickly and you intend for it to grow, it’s essential to leverage the power of these internet video powerhouses. It’s their job and they do it well.
Amazon Web Services CloudFront CDN (Content Delivery Network) is recommended for anyone who wants to maintain primary ownership of their videos.
Problem: Too much bad code. Solution: Hire a developer.
We love simple-to-use websites and content management platforms. That’s why we recommend WordPress. But sometimes the ease of a platform provides disastrous opportunities for well-meaning, but untrained website owners.
Every plugin or feature that you install on your website requires code. Javascript, stylesheets, PHP, etc. Many times those plugins are even using the same code that other plugins are using; you see this a lot with jQuery. A web developer is going to keep an eye on what files are being used and try to limit or condense the number of files that are required.
Other times, someone’s nephew or next-door neighbor is enlisted to help build a website because he’s “good with computers” and “we don’t have a budget”. But when you hire someone who is unqualified, you often get unqualified results and end up spending more money in the long haul. Check your site for coding errors using the W3C Markup Validator.
Condensing your website’s script calls is common practice for websites that value page load. Make sure you’re thinking about web caching when you review your site for size reducing opportunities.
And if all this is greek to you, that’s okay. We’d love to help improve your website’s pageload time and reduce the overall size of your webpages. Get in touch with us today!
