Performance

Tips and tricks on how to improve your UIkit project.

Overview

Great effort was made into the file structure of UIkit for RapidWeaver in order to reach the maximum in performance. Extensive tests were made related to the way files are delivered from the server to the browser, the way stacks packages relate with the UIkit theme and what could be the best way to position the various elements into the file structure.

These are some of the features built into the UIkit for RapidWeaver framework:
  • Optimized file structure
  • Low file weight
  • Minified CSS files
  • Minified HTML files
  • Minified JavaScript files
  • Prioritised above-the-fold content
  • Viewport configured

Optimizing images

There are so many good articles on the net regarding image compressing. If you're serious about it a good place to start would be the Image Optimization page in Google Developers website.

From a personal perspective these are some of the steps I take regarding images:

Use SVG whenever possible. A few applications allow for converting images to SVG's, I use Graphic for this purpose. When using SVG's in smaller icons they tend to be lighter, depending on the icons color scheme and other factors. Overall I find that it's worth the time converting the files and comparing sizes.

Use JPEP instead of PNG, then compress it using a dedicated application or online service. I use jPEGmini and Squash. Usually these applications reduce the file size by 3x, sometimes even more.

Resize images when using thumbnails, size the full images so to be around 100KB. This is the technique used in the example Portfolio 1, where the images used for the thumbs where resized in the Dynamic Grid. In the same example images are full sized in the Case Studies page.

In that case a thumb is around 20KB, whereas the full image around 100KB. This reduction is very important when working with grids and pages that require many thumbnails.

Improve browser caching

This would be a more tricky way to improve your page speed rankings, but it's worth the effort. You may begin learning more about it at the excellent article on Leverage Browser Caching at Google Developers Website.

These readings may sound a bit complicated, but In a nutshell you will need to:

Upload a .htaccess file to the root of your web page with information regarding cache, file expiration and file access.

You may use a text editor like Apple's TextEdit, save the file as .htaccess and upload it using applications like Cyber Duck (free), or Transmit (paid). I use the latter with great results.

Here is an example of a .htaccess file, you may begin here and edit as you learn more about it:
## EXPIRES CACHING ##

ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"

## EXPIRES CACHING ##

Enable gzip compression

Gzip is a method of compressing files (making them smaller) for faster network transfers. It is also a file format. Compression allows your web server to provide smaller file sizes which load faster for your website users.

We can enable compression using the .htaccess file. The code varies from server to server, so it's best to consult your host about the right to code to use. Here's an example of gzip compression used in Apache servers, which are popular these days:
#Gzip

AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript text/javascript

#End Gzip
UIkit Framework developed by YOOtheme
Stacks interface by
Weavers Kingdom
RapidWeaver is a trademark of Realmac Software