Jump to content
felix

Frontend performance tips

Recommended Posts

As some of you might have noticed recently there has been a large "Frontend Performance Talks Offensive" (not only) by Google Engineers.

Here are some high quality (regarding content) Videos which i enjoyed very much and thought you also might be interested in.

A Rendering Performance Guide for Developers by Paul Lewis:

Performance Tooling by Paul Irish

Your browser is talking behind your back by Jake Archibald

Gone In 60fps – Making A Site Jank-Free by Addy Osmani

http://addyosmani.com/blog/making-a-site-jank-free/

Any suggestions for more interesting performance related stuff are welcome!

  • Like 15

Share this post


Link to post
Share on other sites

I'm interested and always reading and watching everything about front-end performances and related tools.

Thanks for posting them (and keep up the good work on the new admin interface...let's code it and make us play with it :P)

  • Like 2

Share this post


Link to post
Share on other sites

I'm interested and always reading and watching everything about front-end performances and related tools.

Thanks for posting them (and keep up the good work on the new admin interface...let's code it and make us play with it :P)

Thanks a lot!

I'm about to post something on this in a few minutes (current status: writing ;))

Share this post


Link to post
Share on other sites
Well. Even if no one seems to be interested i'll keep updating this if i stumble upon interesting links. 

Actually this is very applicable stuff and I think everyone here is interested. I know I am. Thank you for posting! please keep doing so. 

  • Like 4

Share this post


Link to post
Share on other sites
(Javascript) Memory Management Masterclass with Addy Osmani

Efficient JavaScript webapps need to be fluid and fast. Any app with significant user interaction needs to consider how to effectively keep memory usage down because if too much is consumed, a page might be killed, forcing the user to reload it and cry in a corner. Automatic garbage collection isn't a substitute for effective memory management, especially in large, long-running web apps. In this talk we'll walk through how to master the Chrome DevTools for effective memory management. Learn how to tackle performance issues like memory leaks, frequent garbage collection pauses, and overall memory bloat that can really drag you down.

  • Like 2

Share this post


Link to post
Share on other sites

As I did a lot of performance optimization stuff for a client's website recently I thought I'll share some of my findings:

- optimizing for "time to first byte":

Apart from fixing performance issues with your php code there is an easy way to "get things started":Chunk your Output!

Doing an ob_flush (or {% flush %} if you're using twig) here and there is an easy way to split your page into chunks that are instantly (and in parallel) served to the client instead of rendering the whole page at once. This is especially handy if you're using the next technique:

- Inlining "above the fold" content

I must admit that I'm not a big fan of inlining things. In my opinion it's against anything I've learned about keeping things "dry, clean and separated". That's why i refused to do it until now. But if you're using grunt/gulp (and especially criticalcss) you're not doubling anything and the inlining is just another task in your gruntfile. 

There is a pretty easy step by step guide by Jeremy Keith at https://adactio.com where he explains why inlining css on the first visit will gain your site a massive (perceived) performance boost on the first load (this is especially handy on mobile devices). I'll post a recipe to processwire-recipes.com how to achieve this with processwire in the next days

- Avoid loading Webfonts directly but do it asynchronous as "Progressive Enhancement" (+ Store them in localstorage to load them super fast afterwards) to avoid blank pages: http://bdadam.com/blog/loading-webfonts-with-high-performance.html

Just implementing these 3 (pretty easy) things made the pagespeed score climb up by 15 points and lowered the perceived loading time by at least 2 seconds below the "critical hurdle" of 1-2 seconds.

  • Like 12

Share this post


Link to post
Share on other sites

Thanks felix for posting. Looking forward to your recipe.

Share this post


Link to post
Share on other sites

Thanks, great tips. I usually stop further optimizing when only "above the fold" issues left according to PageSpeed. Imo it doesn't worth the trouble.

Recently I discovered http://fontello.com/ which allows subsetting icon fonts (plus picking icons from different fonts). This can be handy if you need only a few icons instead of the whole set, saving many kilobytes.

  • Like 1

Share this post


Link to post
Share on other sites

As I did a lot of performance optimization stuff for a client's website recently I thought I'll share some of my findings:

Extremely useful recipe and tips, Felix! I was planning to do that (critical css) for my next project and you just saved me precious time with your recipe. Thank you very much! 

One more thing I'd like to add is the removing of unused CSS on the whole project, using gulp uncss from Addy Osmani. Especially if you are using a front-end framework (Bootstrap, Foundation etc) or working on someone else's code: https://github.com/addyosmani/gulp-uncss-task  You can get a great reduction on your final css file size, even 90% reduction sometimes. 

  • Like 1

Share this post


Link to post
Share on other sites

@felix

thanks for these great ressources!

do you use or is it possible to use the processwire template caching with flush and/or critical css?

thanks!

Share this post


Link to post
Share on other sites

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By NorbertH
      When saving a page with the "order" template in the backend  IftRunner is nice to me and sends the order via page action into my accounting software. 
      When saving "order" in a frontend page it does nothing.   So i certainly missing something . Any ideas? 
       
    • By SwimToWin
      ProcessWire is setting a "wires" cookie for each guest session.
      Is it possible drop that cookies, so there are no cookies at all for guests?
      That way, I don't need to spam the user with a cookie consent box.
      I don't need cookies for user preferences and marketing purposes.
      (Why are cookies being set by default in the first place?)
    • By ridgedale
      Reference: PW 3.0.111 and uikit3 based site using the Regular-Master profile.
      Despite my searches of the forum I'm somewhat confused about how to create new child pages on the frontend when a user clicks on a button on the parent page. I also have an equivalent button that is intended for uploading a .csv file to automatically create multiple new pages. This basically relates to a club (parent) and members (child) template configuration. Hopefully this explanation makes sense.
      A button should be able to launch the code needed to initiate the script required to create a new page using something like:
      <a href="/path/page.php">New +</a> <a href="/path/page.php">New ++</a> Does the code to create the new page or new pages need to be run from the template file for the child or the parent?
      A new individual member page will need to be editable manually at the point of page creation as well as subsequently, whereas multiple new pages will need to be editable after they have created and populated with data, again, as well as subsequently.
      I would very grateful for any advice or pointers as to how to achieve this.
       
    • By ridgedale
      Reference: PW 3.0.111 and uikit3 based site using the Regular-Master profile.
      I've setup a page where a member can edit contact details via the frontend displaying the field content using the <edit> ... </edit> tags.
      This works fine when the fields actually contain data. However fields that contain no data (i.e. empty) do not appear to be editable. No edit cursor appears (- possibly owing to the field width being 0px?)
      Is the only solution to recreate the page using a form, for example,  or is there a simple way to allow blank fields to be editable on the frontend?
      I wondered if anyone else has found a solution to this problem. Any assistance would be appreciated.
    • By Mobiletrooper
      Hey Ryan, hey friends,
      we, Mobile Trooper a digital agency based in Germany, use ProcessWire for an Enterprise-grade Intranet publishing portal which is under heavy development for over 3 years now. Over the years not only the user base grew but also the platform in general. We introduced lots and lots of features thanks to ProcessWire's absurd flexibility. We came along many CMS (or CMFs for that matter) that don't even come close to ProcessWire. Closest we came across was Locomotive (Rails-based) and Pimcore (PHP based).
      So this is not your typical ProcessWire installation in terms of size.
      Currently we count:
      140 Templates (Some have 1 page, some have >6000 pages)
      313 Fields
      ~ 15k Users (For an intranet portal? That's heavy.)
      ~ 195 431 Pages (At least that's the current AUTOINCREMENT)
       
      I think we came to a point where ProcessWire isn't as scalable anymore as it used to be. Our latest research measured over 20 seconds of load time (the time PHP spent scambling the HTML together). That's unacceptable unfortunately. We've implemented common performance strategies like:
      We're running on fat machines (DB server has 32 gigs RAM, Prod Web server has 32gigs as well. Both are running on quadcores (xeons) hosted by Azure.
      We have load balancing in place, but still, a single server needs up to 20 sec to respond to a single request averaging at around about 12 sec.
      In our research we came across pages that sent over 1000 SQL queries with lots of JOINs. This is obviously needed because of PWs architecture (a field a table) but does this slow mySQL down much? For the start page we need to get somewhere around 60-80 pages, each page needs to be queried for ~12 fields to be displayed correctly, is this too much? There are many different fields involved like multiple Page-fields which hold tags, categories etc.
      We installed Profiler Pro but it does not seem to show us the real bottleneck, it just says that everything is kinda slow and sums up to the grand total we mentioned above.
      ProCache does not help us because every user is seeing something different, so we can cache some fragments but they usually measure at around 10ms. We can't spend time optimising if we can't expect an affordable benefit. Therefore we opted against ProCache and used our own module which generates these cache fragments lazily. 
      That speeds up the whole page rendering to ~7 sec, this is acceptable compared to 20sec but still ridiculously long.
      Our page consists of mainly dynamic parts changing every 2-5 minutes. It's different across multiple users based on their location, language and other preferences.
      We also have about 120 people working on the processwire backend the whole day concurrently.
       
      What do you guys think?
      Here are my questions, hopefully we can collect these in a wiki or something because I'm sure more and more people will hit that break sooner than they hoped they would:
       
      - Should we opt for optimising the database? Since >2k per request is a lot even for a mysql server, webserver cpu is basically idling at that time.
      - Do you think at this point it makes sense to use ProcessWire as a simple REST API?
      - In your experience, what fieldtypes are expensive? Page? RepeaterMatrix?
      - Ryan, what do you consider as the primary bottleneck of processwire?
      - Is the amount of fields too much? Would it be better if we would try to reuse fields as much as possible?
      - Is there an option to hook onto ProcessWires SQL builder? So we can write custom SQL for some selectors?
       
      Thanks and lots of wishes,
      Pascal from Mobile Trooper
       
       
×
×
  • Create New...