Surf the Dream A discourse of links and articles from Justin Avery

Tag Archive: Performance

  1. Is CriticalCSS harming our site performance?

    Leave a Comment

    In a recent article on Medium, JP DeVries wrote about “Unfolding Critical CSS“.

    Are you building a single web page that users will visit once never to return to or are you building a multi–page website that most users click around on for a while?

    If you inline an average of ~20kB of critical CSS on each page and a user visits 10 pages that make use of those same styles you’ve served them 180kb of avoidable weight. That’s ~20kB of the same uncacheable non–blocking styles being downloaded 10 times (once for each page) vs ~20kB of blocking styles being downloaded once as part of a common stylesheet. The number of average page views per user should be taken into consideration when architecting your CSS delivery method.

    CriticalCSS is something that I’ve been HUGELY in favour of since it was first suggested through the Filament Group (citation needed). Since then I’ve showed clients many times how much faster we can make their website appear by loading the Critical CSS in the head…. although I leave off the how and just show them the results.

    The point about the 20kb of additional critical CSS of subsequent page requests is a really good argument, that can really add up over many visits. I will say though that the idea is to get the first part of the “fold” within the first 14kb of the entire HTML document, so we’re not really talking about 20kb of additional content (although the argument still holds fast just with less kb).

    The better approach is to send the critical CSS in the head through on the first visit, download the full CSS file, set a cookie, and then include the tag back in the head to replace the critical CSS.

    This does require some configuration on what the server is generating and might not be as straight forward for some sites, and it can have additional complications around CDN’s and caching URI’s as well…. but then the web is just getting more and more complicated these days.

  2. My local wordpress MAMP site slow

    Leave a Comment

    While I was on the train ride home today I was writing an article on my local copy of wordpress when I thought to myself “This is actually slower then working with the patchy wifi and GPRS”.

    The best thing about running your site locally is that you do not require an internet connection to make updates, especially great for train, planes and tube travel. The next best thing about it should be the speed! You’re not relying on the internet connection and you will most likely have a more highly spec’d laptop then you have on your shared server space.

    Why are .local wordpress sites slower with MAMP?

    The answer was quite surprising! It’s not that it is wordpress or that you are running MAMP, although the MAMP bit does have a knock on effect.

    I use MAMP because I use a Mac and I always used Xampp before making the jump from PC to Mac in 2007. THAT is the key to why it’s slow. It’s not that it’s MAMP, but because you are running a .local site on your Mac.

    The Mac OS looks at any .local domains to be part of Bonjur, so it has a whole internal battle before it realises what it should be doing. The fastest way to avoid this is to set your local sites to something like .dev (after all they are dev sites) or follow Chris Coyiers lead and have something completely random (he uses .whatup for his local sites, so you see css-tricks.whatup).

    If you’re doing this then follow these steps for your WordPress site at least.

    1. Update both the URL’s in the Settings > General from surfthedream.local -> surfthedream.dev
    2. Update the MAMP URL from surfthedream.local -> surfthedream.dev and restart the servers
    3. If you’re running something like Migrate DB Pro as well to keep things in sync then you might also want to ensure you update the URL rewrites before you sync all your updates back up again too

    Enjoy a faster site!!! I know I am.

  3. User generated content in a multi platform publishing world

    Leave a Comment

    I’ve just finished reading Snooks article User Generated Content in a Classy World, which is turn was a follow up to Chris Coyiers article Class up Content.

    Recently I’ve been trying to apply AMP templates to the Responsive Design Knowledge Hub and it’s been a learning curve. The thing I can not fix is the embedded content that is contained within the News and Articles I’m applying the AMP template to. The reason is that AMP requires it’s own fancy elements to be declared for Images, Video, Ads, Embeds, Iframes and more. This makes a mockery of the carefully semantic way that I’ve tried to add content and renders some of the pages non-compliant.

    The best implementation I’ve seen from a CMS to separate the concerns from creating content from the way in which it is rendered to the client is WordPress and Responsive Images.

    When adding an image to WordPress I go through a three step process.

    1. Click Add Media
    2. Select or Upload an image
    3. Add the image

    The code that is added to the wysiwyg is shown below…

    
    <img src="https://surfthedream.com.au/wp-content/uploads/2015/12/moon-shard-1024x591.jpg" alt="moon shard" width="1024" height="591" class="alignnone size-large wp-image-1866" />
    

    …. yet the code that is rendered to the browser is:

    
    <img src="//surfthedream.com.au/wp-content/uploads/2015/12/moon-shard-1024x591.jpg" alt="moon shard" width="1024" height="591" class="alignnone size-large wp-image-1866" srcset="//surfthedream.com.au/wp-content/uploads/2015/12/moon-shard-300x173.jpg 300w, //surfthedream.com.au/wp-content/uploads/2015/12/moon-shard-768x443.jpg 768w, //surfthedream.com.au/wp-content/uploads/2015/12/moon-shard-1024x591.jpg 1024w, //surfthedream.com.au/wp-content/uploads/2015/12/moon-shard-500x288.jpg 500w, //surfthedream.com.au/wp-content/uploads/2015/12/moon-shard-800x462.jpg 800w, //surfthedream.com.au/wp-content/uploads/2015/12/moon-shard.jpg 1600w" sizes="(max-width: 1024px) 100vw, 1024px">
    

    … which produces the following responsively wonderful image.

    moon shard

    I haven’t had time to look into the AMP plugin for WordPress, but I assume they’re going to be doing a similar thing where they scan the content for markup that needs to be updated, images iframe embeds and rewrite them into a suitable accepted format for AMP.

    Below are my comments on Snooks article….

    The other issue I have with embedding content into that single block is when you want to retrieve the content for use in other ares besides a HTML template.

    I’ve had RSS feeds clog up because of the funky elements used within content areas (different apostrophe’s in headings the biggest issue), and while these can usually be sorted by using something like CDATA tags

    <!--CDATA 
    // Content here
    -->

    the same issues end up coming back when you look at implementing something like AMP with your database content. All of a sudden it’s less of a class issue and now you have issues with the semantics of the content requiring updates.

    The best approach from a CMS I’ve seen has been the implementation of responsive images into wordpress. The image is inserted in the same way it always has in the WYSIWYG, but when it is rendered on the front end you get the benefit of the Responsive Images markup being added for you with no additional work.

  4. Responsive Performance

    Leave a Comment

    I’m setting up a new page over on the RWD.is site looking for some guinea pigs lucky volunteers to start receiving reports and recommendations around their website performance across a variety of the devices and connections.

    Lately I’ve been doing a lot of reviews of site performance and most of the recommendations are being repeated across a variety of different sites. There are so many things that you can do today to shave off 20-50% of your webpage load time that it seems stupid not to do it.

    The idea behind the first few is to test the waters. I want to know if

    • Do the reports make sense?
    • Are you the recommendations easily achieveable
    • What are some of the barriers to get this done?
    • Do the metrics I’m checking link back to your business goals?
    • Can we track the return on investment for the work (although there’s no investment on your part to start with)

    The page should be up over the weekend and then I can start testing the work that I’ve already put together.

  5. PerfBar

    Leave a Comment

    Simple way to collect and look at your website performance metrics quickly, that supports budgeting and adding custom metrics.

    Visit Link

  6. xvfb-run: error: Xvfb failed to start

    Leave a Comment

    When trying to run Sitespeed.io in two different terminals on the same server I received the error that Xvfb could not run.

    By adding -a as an argument it will automatically pick up another thread to run with instead of the default.

    do xvfb-run -a sitespeed.io

  7. The Pain of Duplicate Scripts

    Leave a Comment

    Duplicate scripts on a page means multiple downloads (for Firefox) and a performance hit. You can help this by following Facebooks lead and opting out of an async load if the script element is already in place with if (d.getElementById(id)) {return;}

    Visit Link

Surf the Dream is a blog that has been running since the mid 2000's when it started on BlogSpot. Over the years it's been rebranded as justinavery.me (now my resume) and JaveryDesign.com (which now redirects back to this site).

I offer consultation services through Simple Things, produce a range of educational pocket notebooks, write about the Universe and run a responsive design and a RWD Weekly Newsletter